背景

最近在一個微信小程序項目中需要用到基于npm構(gòu)建的組件，官方文檔寫的比較模糊，導(dǎo)致經(jīng)常構(gòu)建失敗，一番采坑后，終于搞懂了，特此留文🚀🚀🚀。

官方文檔

從小程序基礎(chǔ)庫版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。
在小程序 package.json 所在的目錄中執(zhí)行命令安裝 npm 包
npm install
此處要求參與構(gòu)建 npm 的 package.json 需要在 project.config.js 定義的 miniprogramRoot 之內(nèi)。

然而基于官文一番操作后，點擊工具-構(gòu)建總是提示構(gòu)建失敗。😏

解決

采坑后，解決方案如下：

1. 打開微信小程序終端（終端在調(diào)試器最右邊）
2. 進入項目所在的目錄后（與app.json平級），新建一個miniprogramRoot文件夾。mkdir miniprogramRoot
3. 然后cd miniprogramRoot執(zhí)行 npm install(沒有安裝過 node 的需要先安裝一下),會生成一個 package-lock.json。
4. 將package-lock.json改成package.json
5. 安裝需要安裝的 node 包，例如npm i @vant/weapp -S --production
6. 點擊**工具-構(gòu)建**，并且在小程序編輯器詳情的配置項里面勾選使用 npm 模塊就ok 了
7. miniprogramRoot的目錄如下

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

8. 最后在對應(yīng)的 json 文件，比如test.json引用組件即可。(需要手動修改一下組件的引用路徑)

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

總結(jié)

安裝的 node 包和 page.json必須要在miniprogramRoot這個文件夾里面才能構(gòu)建成功!