微信小程序开发笔记——构建npm

微信小程序开发笔记——构建npm

在使用微信小程序开发工具开发项目的时候，会遇到需要使用一些npm进行管理的包，这时我们就需要在项目中构建npm以进行使用。以下博文将会帮助你在自己的项目中构建npm：

官方构建npm的全流程

官方文档地址：微信小程序——npm支持

1.版本支持

小程序基础库：2.2.1以上，可以在小程序中通过调用 wx.getSystemInfo 或 wx.getSystemInfoSync 获取到当前小程序运行的基础库的版本。
开发者工具：1.02.1808300及以上。

2.npm安装——这一步非常需要注意，本文所述不是非常全面，仅做提示之用，详细的做法及原理，建议详读官方文档-npm支持-原理介绍/Tips部分

在安装npm之前，打开project.config.json文件查看是否有如下配置：

“miniprogramRoot”: “XXX/”

若有，则miniprogramRoot为XXX/，若没有，则miniprogramRoot为project.config.json所在的文件夹。
此时，我们需要确保package.json在miniprogramRoot内。比较package.json与miniprogramRoot的位置，如果package.json不在miniprogramRoot内，有以下方式进行解决：

• 在project.config.json文件中加上如下配置：

// project.config.json
"setting": {
  "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./XXX/"
      }
    ],
}

完成上述操作后，在小程序 package.json 所在的目录中执行命令安装 npm 包：

npm install

3.构建npm

点击开发者工具中的菜单栏：工具 --> 构建 npm

4.使用npm包——查看官方文档

5.发布npm包——查看官方文档

以上都是我在自己实践时遇到的坑，特别是第二步，卡了我好久。其实遇到的这些问题，官方文档里都有解释和解决，只是要拉到最下面的Tips部分，因为是跟着文档一步一步往下走的，没有注意到附加的Tips。对此稍加记录，望后来者引以为戒。