原文链接:https://www.jb51.net/article/167545.htm
原文链接:https://blog.csdn.net/ShiXinXin_Harbour/article/details/102568389
原文链接:https://youzan.github.io/vant-weapp/#/quickstart
原文链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下
1、在根目录中,打开终端命令,cd到你的项目miniprogram目录下;
2、npm 初始化,如果你的小程序项目没有安装过npm包的话,你需要先初始化npm,
npm init
3、# 通过 npm 安装
npm i @vant/weapp -S --production
4、
5、修改该配置项
注意:
构建npm时,会在node_modules的同级目录中创建一个miniprogram_npm;miniprogram_npm包才是小程序真正使用的npm包;
原理介绍
为了帮助大家更好的理解发布 npm 包中提到的各种要求,这里简单介绍一下原理:
首先 node_modules 目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程,在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。
构建打包分为两种:小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中;其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程(类似 webpack)。
寻找 npm 包的过程和 npm 的实现类似,从依赖 npm 包的文件所在目录开始逐层往外找,直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况,构建之前的结构: