微信小程序中使用 npm 包

背景

最近在一个微信小程序项目中需要用到基于npm构建的组件，官方文档写的比较模糊，导致经常构建失败，一番采坑后，终于搞懂了，特此留文🚀🚀🚀。

官方文档

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。
在小程序 package.json 所在的目录中执行命令安装 npm 包
npm install
此处要求参与构建 npm 的 package.json 需要在 project.config.js 定义的 miniprogramRoot 之内。

然而基于官文一番操作后，点击工具-构建总是提示构建失败。😏

解决

采坑后，解决方案如下：

1. 打开微信小程序终端（终端在调试器最右边）
2. 进入项目所在的目录后（与app.json平级），新建一个miniprogramRoot文件夹。mkdir miniprogramRoot
3. 然后cd miniprogramRoot执行 npm install(没有安装过 node 的需要先安装一下),会生成一个 package-lock.json。
4. 将package-lock.json改成package.json
5. 安装需要安装的 node 包，例如npm i @vant/weapp -S --production
6. 点击**工具-构建**，并且在小程序编辑器详情的配置项里面勾选使用 npm 模块就ok 了
7. miniprogramRoot的目录如下

.
├── miniprogram_npm
│   └── @vant
├── node_modules
│   └── @vant
├── package-lock.json
└── package.json

8. 最后在对应的 json 文件，比如test.json引用组件即可。(需要手动修改一下组件的引用路径)

{
  "usingComponents": {
    "van-button": "../miniprogramRoot/miniprogram_npm/@vant/weapp/button/index"
  }
}

总结

安装的 node 包和 page.json必须要在miniprogramRoot这个文件夹里面才能构建成功!