关于前端:微信小程序中使用-npm-安装依赖

3次阅读

共计 825 个字符,预计需要花费 3 分钟才能阅读完成。

点击返回小程序 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 包。

正文完
 0