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

最新推荐文章于 2024-09-28 23:16:05 发布

Unique·Blue

最新推荐文章于 2024-09-28 23:16:05 发布

阅读量6.5k

点赞数 3

分类专栏：微信小程序文章标签：小程序 npm

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

版权

微信小程序专栏收录该内容

16 篇文章

订阅专栏

点击前往小程序npm官方文档

安装依赖的前提，需要生成一个package.json文件

npm init

一路回车即可生成：
在这里插入图片描述
然后可以看到package.json已经生成了

注：初始化后的package.json文件中不存在任何依赖，所以尝试执行 npm install 并不会有依赖安装成功
在这里插入图片描述

安装需要的依赖

比如我们在使用 MobX 时，到这一步，就可以直接安装 MobX 所需的依赖了。

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

点击前往vant-ui官方文档

npm i @vant/weapp -S --production

在这里插入图片描述
安装后出现了node_modules文件夹，package.json中也出现了相应的依赖项

在这里插入图片描述

安装完以后需要进行构建

微信开发者工具左上角：工具 — 构建npm （没有依赖时，点击构建是不会构建成功的，会提示没有可构建的项）
构建的结果是：生成和 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 包。