有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
最近,陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍),这是自己第三个开源项目,希望大家一起来维护,一起 star 呀,其它两个:
vue-okr-tree
基于 Vue 2的组织架构树组件
ztjy-cli
团队的一个简易模板初始化脚手架
UniUsingComponentsWebpackPlugin
地址:https://github.com/qq44924588...
配合UniApp,用于集成小程序原生组件
- 配置第三方库后可以自动引入其下的原生组件,而无需手动配置
- 生产构建时可以自动剔除没有使用到的原生组件
背景
第一个痛点
用 uniapp开发小程序的小伙伴应该知道,我们在 uniapp 中要使用第三方 UI 库(vant-weapp
,iView-weapp
)的时候 ,想要在全局中使用,需要在 src/pages.json
中的 usingComponents
添加对应的组件声明,如:
// src/pages.json
"usingComponents": {
"van-button": "/wxcomponents/@vant/weapp/button/index",
}
但在开发过程中,我们不太清楚需要哪些组件,所以我们可能会全部声明一遍(PS:这在做公共库的时候更常见),所以我们得一个个的写,做为程序员,我们绝不允许使用这种笨方法。这是第一个痛点。
第二个痛点
使用第三方组件,除了在 src/pages.json
还需要在对应的生产目录下建立 wxcomponents
,并将第三方的库拷贝至该文件下,这个是 uniapp 自定义的,详细就见:https://uniapp.dcloud.io/fram...。
这是第二个痛点。
第三个痛点
第二痛点,我们将整个UI库拷贝至 wxcomponents
,但最终发布的时候,我们不太可能全都用到了里面的全局组件,所以就将不必要的组件也发布上去,增加代码的体积。
有的小伙伴就会想到,那你将第三方的库拷贝至 wxcomponents
时候,可以只拷使用到的就行啦。是这理没错,但组件里面可能还会使用到其它组件,我们还得一个个去看,然后一个个引入,这又回到了第一个痛点了。
有了这三个痛点,必须得有个插件来做这些傻事,处理这三个痛点。于是就有 UniUsingComponentsWebpackPlugin 插件,这个webpack 插件主要解决下面几个问题:
- 配置第三方库后可以自动引入其下的原生组件,而无需手动配置
- 生产构建时可以自动剔除没有使用到的原生组件
webpack 插件
webpack 的插件体系是一种基于 Tapable 实现的强耦合架构,它在特定时机触发钩子时会附带上足够的上下文信息,插件定义的钩子回调中,能也只能与这些上下文背后的数据结构、接口交互产生 side effect,进而影响到编译状态和后续流程。
从形态上看,插件通常是一个带有 apply
函数的类:
class SomePlugin {
apply(compiler) {
}
}
Webpack 会在启动后按照注册的顺序逐次调用插件对象的 apply
函数,同时传入编译器对象 compiler
,插件开发者可以以此为起点触达到 webpack 内部定义的任意钩子,例如:
class SomePlugin {
apply(compiler) {
compiler.hooks.thisCompilation.tap('SomePlugin', (compilation) => {
})
}
}
注意观察核心语句 compiler.hooks.thisCompilation.tap
,其中 thisCompilation
为 tapable 仓库提供的钩子对象;tap
为订阅函数,用于注册回调。
Webpack 的插件体系基于 tapable
提供的各类钩子展开,所以有必要先熟悉一下 tapable 提供的钩子类型及各自的特点。
到这里,就不做继续介绍了,关于插件的更多 详情可以去官网了解。
这里推荐 Tecvan 大佬写的 《Webpack 插件架构深度讲解》https://mp.weixin.qq.com/s/tX...
实现思路
UniUsingComponentsWebpackPlugin 插件主要用到了三个 compiler
钩子。
第一个钩子是 environment
:
compiler.hooks.environment.tap(
'UniUsingComponentsWebpackPlugin',
async () => {
// todo someing
}
);
这个钩子主要用来自动引入其下的原生组件,这样就无需手动配置。解决第一个痛点。
第二个钩子 thisCompilation
,这个钩子可以获得 compilation
,能对最终打包的产物进行操作:
compiler.hooks.thisCompilation.tap(
'UniUsingComponentsWebpackPlugin',
(compilation) => {
// 添加资源 hooks
compilation.hooks.additionalAssets.tapAsync(
'UniUsingComponentsWebpackPlugin',
async (cb) => {
await this.copyUsingComponents(compiler, compilation);
cb();
}
);
}
);
所以这个勾子用来将 node_modules
下的第三库拷贝到我们生产 dist 目录里面的 wxcomponents
,解决第二个痛点。
ps:这里也可直接用现有的 copy-webpack-plugin
插件来实现。
第三个钩子 done
,表示 compilation
执行完成:
if (process.env.NODE_ENV === 'production') {
compiler.hooks.done.tapAsync(
'UniUsingComponentsWebpackPlugin',
(stats, callback) => {
this.deleteNoUseComponents();
callback();
}
);
}
执行完成后,表示我们已经生成 dist
目录了,可以读取文件内容,分析,获取哪些组件被使用了,然后删除没有使用到组件对应的文件。这样就可以解决我们第三个痛点了。
PS:这里我判断只有在生产环境下才会 剔除,开发环境没有,也没太必要。
使用
安装
npm install uni-using-components-webpack-plugin --save-dev
然后将插件添加到 WebPack Config 中。例如:
const UniUsingComponentsWebpackPlugin = require("uni-using-components-webpack-plugin");
module.exports = {
plugins: [
new UniUsingComponentsWebpackPlugin({
patterns: [
{
prefix: 'van',
module: '@vant/weapp',
},
{
prefix: 'i',
module: 'iview-weapp',
},
],
})
],
};
注意:uni-using-components-webpack-plugin 只适用在 UniApp 开发的小程序。
参数
Name | Type | Description |
---|---|---|
patterns | {Array<Object>} | 为插件指定相关 |
Patterns
module | prefix |
---|---|
模块名 | 组件前缀 |
module 是指 package.json
里面的 name
,如使用是 Vant 对应的 module
为@vant/weapp
,如果使用是 iview,刚对应的 module
为 iview-weapp
,具体可看它们各自的 package.json
。
prefix 是指组件的前缀,如 Vant 使用是 van
开头的前缀,iview 使用是 i
开头的前缀,具体可看它们各自的官方文档。
PS: 这里得吐曹一下 vant,叫别人使用 van 的前缀,然后自己组件里面声明子组件时,却没有使用 van 前缀,如 picker 组件,它里面的 JSON 文件是这么写的:
{
"component": true,
"usingComponents": {
"picker-column": "../picker-column/index",
"loading": "../loading/index"
}
}
picker-column
和 loading
都没有带 van
前缀,因为这个问题,在做 自动剔除 功能中,我是根据 前缀来判断使用哪些组件的,由于这里的 loading
,picker-column
没有加前缀,所以就被会删除,导致最终的 picker
用不了。为了解决这个问题,增加了不少工作量。
希望 Vant 官方后面的版本能优化一下。
总结
本文通用自定义 Webpack 插件来实现日常一些技术优化需求。主要为大家介绍了 Webpack 插件的基本组成和简单架构,通过三个痛点,引出了 uni-using-components-webpack-plugin
插件,并介绍了使用方式,实现思路。
最后,关于 Webpack 插件开发,还有更多知识可以学习,建议多看看官方文档《Writing a Plugin》进行学习。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。