微信小程序-第一个npm项目创建
第一种方式：简单的创建方式
1、微信开发工具正常流程新建小程序
2、在根目录添加package.json文件
{
"name": "master_weapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@vant/weapp": "^1.9.2",
"is-array": "^1.0.1"
}
}
添加依赖模块之后，npm install 或者 yarn install
3、执行下面步骤三和四
第二种方式根据官方模板修改
第一步，默认的构建 npm 方式
默认情况下，在 miniprogramRoot 内正确配置了 package.json 并执行 npm install 之后，其构建 npm 的结果是，为每一个 package.json 对应的 node_modules 构建一份 miniprogram_npm，并放置在对应 package.json 所在目录的子目录中。参考 demo
最简单有效的导入方式，点击 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"`
以下步骤使用是这样的目录，删除miniprogram文件夹下的node_modules、package,json、sub_packager文件如下：
├── miniprogram
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── index
│ │ ├── 略
├── node_modules // 不被默认方式构建 npm，因为它不在 miniprogramRoot 内
├── package.json
└── project.config.json // 其中存在配置 `"miniprogramRoot": "./miniprogram"`
第二步，修改：project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
第三步，本地设置修改
[图片上传失败...(image-c03fb6-1637215662167)]
步骤四 构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
[图片上传失败...(image-c5a0e4-1637215662167)]
注： npm install 之后再构建npm
导入想要模块就可以使用了。具体参考官网
