兩種構建npm方式是什么?
從 1.03.2006302 (或 1.03.2006302) 開始,我們提供了兩種構建 npm 的方式:
默認的構建 npm 方式
默認情況下,在 miniprogramRoot 內正確配置了 package.json 并執(zhí)行 npm install 之后,其構建 npm 的結果是,為每一個 package.json 對應的 node_modules 構建一份 miniprogram_npm,并放置在對應 package.json 所在目錄的子目錄中。參考 demo
構建 npm 前
├── miniprogram
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── index
│ │ ├── 略
│ ├── node_modules // 可被默認方式構建 npm,因為它在 miniprogramRoot 內
│ ├── package.json
│ └── sub_package
│ ├── node_modules // 可被默認方式構建 npm,因為它在 miniprogramRoot 內
│ ├── package.json
│ └── sub_package_page
├── node_modules // 不被默認方式構建 npm,因為它不在 miniprogramRoot 內
├── package.json
└── project.config.json // 其中存在配置 `"miniprogramRoot": "./miniprogram"`
構建 npm 后
├── miniprogram
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── index
│ │ ├── 略
│ ├── miniprogram_npm
│ ├── node_modules // 可被默認方式構建 npm,因為它在 miniprogramRoot 內 --> 同級的 miniprogram_npm 是這份 node_modules 的構建結果
│ ├── package.json
│ └── sub_package
│ ├── miniprogram_npm
│ ├── node_modules // 可被默認方式構建 npm,因為它在 miniprogramRoot 內 --> 同級的 miniprogram_npm 是這份 node_modules 的構建結果
│ ├── package.json
│ └── sub_package_page
├── node_modules // 不被默認方式構建 npm,因為它不在 miniprogramRoot 內 --> 它并沒有對應的 miniprogram_npm 生成
├── package.json
└── project.config.json // 其中存在配置 `"miniprogramRoot": "./miniprogram"`
自定義 node_modules 和 miniprogram_npm 位置的構建 npm 方式
與 “默認的構建 npm 方式” 不一樣,此種方式需要開發(fā)者在 project.config.json 中指定 mode_modules 的位置 和目標 miniprogram_npm 的位置。參考demo
使用方法
配置 project.config.json 的 setting.packNpmManually 為 true,開啟自定義 node_modules 和 miniprogram_npm 位置的構建 npm 方式
配置 project.config.json 的 setting.packNpmRelationList 項,指定 packageJsonPath 和 miniprogramNpmDistDir 的位置
其中 packNpmRelationList 的格式為
packageNpmRelationList: Array<{
"packageJsonPath": string,
"miniprogramNpmDistDir": string
}>
packageJsonPath 表示 node_modules 源對應的 package.json
miniprogramNpmDistDir 表示 node_modules 的構建結果目標位置
構建 npm 前
.
├── miniprogram
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── index
│ ├── sitemap.json
│ └── sub_package
│ └── sub_package_page
├── project.config.json
├── src_node_modules_1
│ ├── node_modules
│ └── package.json
└── src_node_modules_2
├── node_modules
└── package.json
其中 project.config.json 存在配置
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./src_node_modules_1/package.json",
"miniprogramNpmDistDir": "./miniprogram/"
},
{
"packageJsonPath": "./src_node_modules_2/package.json",
"miniprogramNpmDistDir": "./miniprogram/sub_package"
}
]
}
構建 npm 后
.
├── miniprogram
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── index
│ ├── miniprogram_npm // 由 src_node_modules_1/node_modules 構建得到
│ ├── sitemap.json
│ └── sub_package
│ ├── miniprogram_npm // 由 src_node_modules_2/node_modules 構建得到
│ └── sub_package_page
├── project.config.json
├── src_node_modules_1
│ ├── node_modules
│ └── package.json
└── src_node_modules_2
├── node_modules
└── package.json