開發(fā)中復(fù)用的代碼通常會封裝成npm包，發(fā)布到npm源，項目中再依賴這個包。如果包的源碼改動，需要先發(fā)布到npm上再使用項目更新依賴。本文則是不發(fā)布到外網(wǎng)，只在本地開發(fā)。包的源碼通過內(nèi)網(wǎng)的svn或者git進(jìn)行同步。并且這個npm也是直接用小程序開發(fā)工具進(jìn)行開發(fā)，方便包里的組件修改完之后，在這個包自身的工程里編寫示例代碼查看效果。

創(chuàng)建npm項目

• 新建一個小程序，根目錄通過命令創(chuàng)建package.json目的是可以設(shè)置自己的模塊名稱，版本，作者等一系列信息。

npm init 需要一步步指定參數(shù)，加上[-y]使用默認(rèn)參數(shù)快捷生成

npm init -y

生成的package.json文件:

{
  "name": "wx-js-demo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {}
}

• 通常npm包需要在根目錄下創(chuàng)建入口文件（package.json中指定的main字段），如index.js，可自定義名字。但是小程序有自己的規(guī)則，這步可以不用。

• 小程序npm約束。在package.json里添加miniprogram 字段指定對外暴露的資源目錄，小程序工具構(gòu)建npm后才能使用這個目錄下的代碼。如圖dist目錄下代表該npm對外可見的內(nèi)容

  
  
  image.png

使用本地npm項目

• 再建一個實際開發(fā)的項目，同樣執(zhí)行第一步生產(chǎn)package.json文件。在dependencies依賴字段指定引用的npm項目，下面的代碼分別舉例本地和遠(yuǎn)程。其中本地的路徑使用file開頭加上npm項目的路徑，因為我直接放在上一層目錄，所以值就是"../"開頭

{
  "name": "wx-js-demo",
  ...
  "dependencies": {
    "sino-miniprogram": "file:../sino-miniprogram",
    "weui-miniprogram": "^1.0.3"
  }
}

• 安裝npm。運(yùn)行npm install 命令安裝這些依賴，生成node_modules目錄。

• 構(gòu)建npm。小程序開發(fā)工具中，菜單欄里找到’構(gòu)建npm‘功能，生成小程序平臺實際使用的目錄miniprogram_npm，如圖所示。在目錄結(jié)構(gòu)里可以看出引用的本地npm多了個箭頭圖標(biāo)。

  
  
  image.png
• 項目中引入npm里的組件。
  在app.json或者某個頁面的json文件里添加usingComponents字段

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog",
    "sino-list-box": "/miniprogram_npm/sino-miniprogram/listBox/listBox"
  }
}

樣式也是同樣的道理。在app.wxss或者頁面的wxss文件中import文件目錄

/**app.wxss**/
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
@import '/miniprogram_npm/sino-miniprogram/sino-style/snui.wxss';

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

參考

• 小程序官方的npm支持
• 創(chuàng)建自己的私有npm包并發(fā)布