微信小程序中使用 npm 安装依赖
点击前往小程序npm官方文档
安装依赖的前提,需要生成一个package.json文件
npm init
【微信小程序中使用 npm 安装依赖】一路回车即可生成:
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/3eb2975306dd4298823c4e7460bf63b4.jpg)
文章图片
然后可以看到package.json已经生成了
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/94098e067da040bbacc4a2ba560394da.jpg)
文章图片
注:初始化后的package.json文件中不存在任何依赖,所以尝试执行 npm install 并不会有依赖安装成功
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/4f6144362fa448058062eb629b1765b6.jpg)
文章图片
安装需要的依赖 比如我们在使用
MobX
时,到这一步,就可以直接安装 MobX
所需的依赖了。我们尝试安装一个
vant-ui
试试点击前往vant-ui官方文档
npm i @vant/weapp -S --production
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/509d33963c71438e9ff40d402c975962.jpg)
文章图片
安装后出现了node_modules文件夹,package.json中也出现了相应的依赖项
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/db6b039ffb2b4cf2b56f8fabac2168b8.jpg)
文章图片
安装完以后需要进行构建
- 微信开发者工具左上角:
工具
---构建npm
(没有依赖时,点击构建是不会构建成功的,会提示没有可构建的项) - 构建的结果是:生成和
node_modules
同级目录的文件夹miniprogram_npm
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/e0daa70293ce4f7583c0881e60ef200b.jpg)
文章图片
构建完成后依赖包即可正常使用 例如: 使用 vant/weapp 包中的 button 组件:
xxx.json
"usingComponents": {
"van-button": "@vant/weapp/button"
},
xxx.wxml
demo
警告按钮
效果如下:
![微信小程序中使用 npm 安装依赖](https://img.it610.com/image/info9/616db104c08346ec85ba9add1cfa48be.png)
文章图片
补充:为什么需要构建?官方阐述的原理: 首先
node_modules
目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍 构建 npm
的过程,在每一份 miniprogramRoot
内开发者声明的 package.json
的最外层的 node_modules
的同级目录下会生成一个 miniprogram_npm
目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。推荐阅读
- 一个小故事,我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗()