有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。最近，我陆续开发了一个UniUsingComponentsWebpackPlugin插件（下面介绍），这是我的第三个开源项目。希望大家一起维护，一起出演。另外两个：vue-okr-tree是基于Vue2的组织结构树组件地址：https://github.com/qq44924588...ztjy-cli团队的一个简单的模板初始化脚手架地址：https:///github.com/qq44924588...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的强耦合架构。当它在特定时间触发一个钩子时，它会附加足够的上下文信息。在插件定义的钩子回调中，它可以也只能与这些上下文背后的数据结构和接口进行交互。sideeffect，进而影响编译状态和后续流程。从形态上看，插件通常是一个带有apply函数的类：并传入编译器对象compiler，插件开发者可以以此为起点到达webpack中定义的任何钩子，例如：)=>{})}}注意核心语句compiler.hooks.thisCompilation.tap，其中thisCompilation是tapable仓库提供的hook对象；tap是用于注册回调的订阅函数。webpack的插件体系是基于tapable提供的各种hooks，所以有必要熟悉一下tapable提供的hooks的种类以及各自的特点。至此，我就不继续介绍了。有关插件的更多详细信息，您可以访问官方网站。这里我推荐《Webpack 插件架构深度讲解》https://mp.weixin.qq.com/s/tX作者Tecvan。实现思路UniUsingComponentsWebpackPlugin插件主要使用了三个编译器钩子。第一个钩子是environment:compiler.hooks.environment.tap('UsingComponentsWebpackPlugin',async()=>{//todosomeing});该钩子主要用于自动引入其下的原生组件，从而无需手动配置。解决第一个痛点。第二个hookthisCompilation可以获取编译并在最终打包后的产品上运行：',async(cb)=>{awaitthis.copyUsingComponents(compiler,compilation);cb();});});所以这个hook用来将node_modules下的第三个库拷贝到我们生产的dist目录下的wxcomponents，解决了第二个痛点。ps：这个也可以直接用现有的copy-webpack-plugin插件实现。第三个钩子完成了，说明编译执行完成：deleteNoUseComponents();回调();});}执行完成后，意味着我们已经生成了dist目录，我们可以读取文件内容，分析，获取使用了哪些组件，然后删除未使用组件对应的文件。这将解决我们的第三个痛点。PS：这里我判断只有在生产环境才会去掉，开发环境不会去掉，也没有必要。使用npminstalluni-using-components-webpack-plugin--save-dev安装并将插件添加到您的WebPack配置中。例如：constUniUsingComponentsWebpackPlugin=require("uni-using-components-webpack-plugin");module.exports={plugins:[newUniUsingComponentsWebpackPlugin({patterns:[{prefix:'van',module:'@vant/weapp',},{prefix:'i',module:'iview-weapp',},],})],};注意：uni-using-components-webpack-plugin只适用于UniApp开发的小程序。参数NameTypeDescriptionpatterns{Array
