返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 官方文档 >

两种构建npm方式是什么?

2020-09-14 作者:--

  从 1.03.2006302 (或 1.03.2006302) 开始,我们提供了两种构建 npm 的方式:

  默认的构建 npm 方式

  默认情况下,在 miniprogramRoot 内正确配置了 package.json 并执行 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 方式” 不一样,此种方式需要开发者在 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

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用