小程序如何构建npm

所有操作都基于小程序根目录

第一步 初始化

初始化小程序，生成package.json文件

npm init
//或者直接生成默认package.json文件
npm init -f

第二步 下载npm包

npm i 相应npm包

npm i @vant/weapp -S --production

第三步 构建使用

小程序开发者工具-详情-本地设置-使用npm模块

小程序开发者工具-工具-构建npm

第一次构建npm之后会在目录下生成miniprogram_npm，可以看做是将node_modules中的组件打包到miniprogram_npm，

需要注意的是：每次npm新的npm包都需要在开发者工具中构建npm，否则新的npm包只会存在于node_modules，而miniprogram_npm中没有该包，则无法在小程序中使用

第四步 引用

• 引用组件类型

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

需要使用组件的wxml文件

按钮

• 引用js类型

以dayjs为例，不再需要在app.json或者其他json中配置，直接在相应页面js文件require引用即可

1. 下载

npm i dayjs -S --production

2. 构建
3. 使用

//例如在user.js中使用
const dayjs = require('dayjs');

console.log(999,dayjs().format());//999 "2020-09-09T10:27:05+08:00"

小程序中npm i 时候这个production是什么用处，本地测试不加也没有影响，正式环境没有进行测试