微信小程序构建npm，添加各种包

前言

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。网上有很多npm的教程，但是感觉对新手不太友好，记录一下作为一个新手我是如何操作的。
tips：要使用npm需要先安装node.js
tips：本文以安装WeUI组件库weui-miniprogram为例

项目中设置勾上npm

设置勾上npm.jpg

初始化npm

命令行
npm init

直接在新建项目的调试器里面新建终端。输入npm init 命令行。

step1.jpg

安装WeUI组件库weui-miniprogram

命令行
npm i weui-miniprogram -S --production

如果成功应该是直接创建了node_modules文件夹，还有package-lock.json、package.json两个Json文件。

成功.png

tips：--production可以减少安装一些业务无关的npm包，从而减少整个小程序包的大小。

安装npm包

命令行
npm install

在开发者工具中选择构建npm

构建npm.jpg

在miniprogram_npm目录下会有导入的weui-miniprogram

使用

在对应的页面.json文件里引入

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon"
  }
}

以上都是在一切顺利的情况，下面介绍一下我自己碰到的问题。

提示：Sorry, name can only contain URL-friendly characters and name can no longer....

错误提示.jpg

这个问题是npm在初始化的时候，会询问项目名。如果不命名直接回车它会指向你文件的名称当做项目名。但是有时候，我们的项目名称是不规范的。所以它会询问！这时候需要在询问的时候自己重新定义一个。比如weixinmini

pack-name.jpg

然后一路回车下去，除了开始的package name, 其余的暂时可不填。最后到确认即可

pack-name-确认.jpg

后面安装使用的就和之前一样了。

相对而言，支付宝小程序npm添加包就简单多了。如果本文对你有帮助，记得点个赞呢，谢谢！