开发中复用的代码通常会封装成npm包，发布到npm源，项目中再依赖这个包。如果包的源码改动，需要先发布到npm上再使用项目更新依赖。本文则是不发布到外网，只在本地开发。包的源码通过内网的svn或者git进行同步。并且这个npm也是直接用小程序开发工具进行开发，方便包里的组件修改完之后，在这个包自身的工程里编写示例代码查看效果。

创建npm项目

新建一个小程序，根目录通过命令创建package.json目的是可以设置自己的模块名称，版本，作者等一系列信息。

npm init 需要一步步指定参数，加上[-y]使用默认参数快捷生成

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包需要在根目录下创建入口文件（package.json中指定的main字段），如index.js，可自定义名字。但是小程序有自己的规则，这步可以不用。
小程序npm约束。在package.json里添加miniprogram 字段指定对外暴露的资源目录，小程序工具构建npm后才能使用这个目录下的代码。如图dist目录下代表该npm对外可见的内容

image.png

使用本地npm项目

再建一个实际开发的项目，同样执行第一步生产package.json文件。在dependencies依赖字段指定引用的npm项目，下面的代码分别举例本地和远程。其中本地的路径使用file开头加上npm项目的路径，因为我直接放在上一层目录，所以值就是"../"开头

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

安装npm。运行npm install 命令安装这些依赖，生成node_modules目录。
构建npm。小程序开发工具中，菜单栏里找到’构建npm‘功能，生成小程序平台实际使用的目录miniprogram_npm，如图所示。在目录结构里可以看出引用的本地npm多了个箭头图标。

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的使用

小程序开发本地npm的使用

创建npm项目

使用本地npm项目

参考