微信小程序中使用 npm 安装依赖
smile1213 -点击前往小程序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 >
<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 包。
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: 小程序中使用 MobX 绑定辅助库
下一篇: 使用ImageMagick操作gif图