小程序npn构建

今天在开发微信小程序的时候想引入一下第三方的库一直提示：发生错误Error: D:\My_exe\微信小程序开发工具\project\miniprogram\ 未找到
然后在网上找了好久才发现问题，新手真的是各种踩坑...

我这里使用的组件库是 Vant Weapp

首先在微信小程序终端输入： npm init ，之后一直回车就好了

然后开始 npm 安装 npm i @vant/weapp -S --production

然后在你的项目中就会生成下面几个包，但是注意如果发现miniprogram_npm没有生成就需要查看一下project.config.json目录中的 "packNpmManually" ,是不是为true了，是的话将其改为false在npm一下应该就正常了

然后继续按照官方教程走先修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

最后构建npn就好了，打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。