微信小程序中使用 npm 安装依赖

  • Post author:
  • Post category:小程序



可以查看

小程序npm官方文档




安装依赖的前提,需要生成一个package.json文件,在小程序 package.json 所在的目录中执行命令安装 npm 包

npm install


然后一路回车即可生成:


在这里插入图片描述


然后可以看到package.json已经生成了


在这里插入图片描述


初始化后的package.json文件中不存在任何依赖,所以尝试执行 npm install 并不会有依赖安装成功



我们可以尝试安装一个vant-ui试试

npm i @vant/weapp -S --production

在这里插入图片描述


安装后出现了node_modules文件夹,package.json中也出现了相应的依赖项


在这里插入图片描述


安装完以后下一步需要进行构建


1. 微信开发者工具左上角:工具 — 构建npm (没有依赖时,点击构建是不会构建成功的,会提示没有可构建的项)


2. 构建的结果是:生成和 node_modules 同级目录的文件夹 miniprogram_npm

构建成功提示:

在这里插入图片描述


构建完成后依赖包即可正常使用

例如: 使用 vant/weapp 包中的 button 组件:

xxx.json

"usingComponents": {
  "van-button": "@vant/weapp/button"
},

xxx.wxml

<view class="usermotto">
  <van-button type="primary">demo</van-button>
  <van-button type="warning">警告按钮</van-button>
</view>


补充:为什么需要构建?官方阐述的原理:

首先 node_modules 目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍 构建 npm 的过程,在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。

原文链接:https://blog.csdn.net/weixin_42289080/article/details/117334310



版权声明:本文为Quentin0823原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。