[JavaScript知识库]引入组件库和使用npm包

一、引入组件库：

引入官方组件库有两种方式，分别是：通过npm下载依赖项到本地，以及在 app.json 中设置 useExtendedLib: { "weui": true}。

后者引入的组件不会计入代码包大小。

Tips：因为小程序的代码包有上限，目前总包是 20M，每个分包/主包大小不能超过 2M。简单理解就是主包在小程序启动的时候会默认加载启动，分包在需要的时候才会下载并加载，用来提升小程序初次加载速度。

但是实际在使用中，我们经常用到的 tabbar 组件（和其他组件），往往需要搭配图标使用（需要指定本地 Icon 的路径），而第二种方式也就是weui里的 Icon 是没有本地路径的，所以需要下载需要的图标。

这里可以直接上阿里的 图标库，下载成对的图标到项目里（点击后变一下颜色比较好看），也对应着 tabbar 点击前后的两个图标配置：iconPath、selectedIconPath

假如要用到一些官方没有的 npm 包，就要用到下面的知识点了。

二、构建npm并使用npm包

Tips：以下命令都在开发者工具的终端里运行，请确保你的电脑上已经安装nodejs、npm并配置了环境变量，可以参考：传送门

每个新项目第一次使用 npm 的时候都需要用 npm init 初始化一下，输入一些项目名之类的信息，只要名字合法其他可以直接 pass，如下图：

然后我们就可以在终端安装 weui 组件了：npm i weui-miniprogram

在终端里 cd 到 project.config.json 文件里 miniprogramRoot 对应的路径下，笔者是miniprogram，如下图：

然后运行命令：npm install，接着点击开发者工具中的菜单栏：工具 --> 构建 npm，当出现下面结果后，就可以愉快地在项目中引入 npm 包了。

最后的实际引用就很简单了：

1. js 中引入 npm 包：

   const myPackage = require('packageName')
   const packageOther = require('packageName/other')
   

2. 使用 npm 包中的自定义组件：

   {
     "usingComponents": {
       "myPackage": "packageName",
       "package-other": "packageName/other"
     }
   }
   

Tips：使用 npm 包时如果只引入包名，则默认寻找包名下的 index.js 文件或者 index 组件。

参考：
https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读