开源一个微信小程序开发插件 - 自动导入组件并更新打包配置

做过微信原生小程序开发的小伙伴应该会遇到以下2个不太爽的地方：

• 要使用一个自定义组件时，每次都得去 json 文件中配置名称和路径，还经常忘了，等到编译不通过才发现。稍微好一点的办法可以把常用的定义到 app.json 中全局配置。但是手动配置还是很繁琐。
• 另外就是如果我们使用到了其他组件库，比如 vant weapp ,一般也不会全部都使用，由于小程序有包大小限制，项目大一点就要考虑怎么把没有使用到的组件排除出去，手动配置打包忽略文件的话，使用到的组件有变化就得去更新配置，非常的麻烦。

为了解决这2个问题，之前写了个轻量小巧的命令行工具在内部使用，现在把它开源出来。

工具介绍

开启工具后，编写wxml文件保存时，会自动导入组件到 json 配置中，也可以根据使用情况自动更新打包配置，把未使用到的组件排除在外。另外工具也支持单次更新页面和组件json中的组件引用，把一些多余和错误的引入去除； 单次更新打包配置。

使用效果如下图所示：

右侧为 project.config.json 中 packOption.ignore 字段的内容，可以看到页面中使用到的组件变化之后便会更新 json 中的组件引用，而且也会动态的把没有用到的组件更新到忽略打包的列表中。

安装

全局安装

# 安装
npm i -g mp-watcher

# 使用
mp-watcher watch --update-ignore

项目级安装

# 安装
npm i -D mp-watcher

# 使用
npx mp-watcher --update-ignore

使用

快速开始

推荐把命令配置到 package.json 中使用。

{
  "scripts": {
    "watch": "mp-watcher watch --update-ignore"
  }
}

开发前开启 watch 命令，就可以放心的去编写页面了。

npm run watch

所有命令

更多详细用法可以查看 npm 上的文档说明： www.npmjs.com/package/mp-…

源码

• Github：github.com/chunjin666/…
• Gitee：gitee.com/chunjine/mp…

实现原理

遍历项目中的所有页面和组件（包括 npm 包中的第三方组件库），通过解析 json 中的 usingComponents 配置获取依赖的组件并记录，存储页面/组件信息，另外分主包和子包存储包中的组件信息（以组件名称作为 key 值）。

wxml 文件变化时，通过正则匹配找出所有用到的标签，剔除掉内置组件后，根据顺序依次从页面/组件所在子包、主包中查找组件信息，并更新的 json 中，监听到 json 文件变化后，更新相关的依赖关系。

如果需要更新打包配置，则遍历所有页面，并深度遍历并记录其中用到的组件，与所有组件列表进行比对 ，找出没有用到的组件，并更新到 project.config.json 中。