关于前端:撸一个-webpack-插件希望对大家有所帮助

47次阅读

共计 4086 个字符,预计需要花费 11 分钟才能阅读完成。

有幻想,有干货,微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

最近,陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(上面介绍),这是本人第三个开源我的项目,心愿大家一起来保护,一起 star 呀,其它两个:

  • vue-okr-tree

    基于 Vue 2 的组织架构树组件

    地址:https://github.com/qq44924588…

  • ztjy-cli

    团队的一个繁难模板初始化脚手架

    地址:https://github.com/qq44924588…

  • UniUsingComponentsWebpackPlugin

    地址:https://github.com/qq44924588…

    配合 UniApp,用于集成小程序原生组件

    • 配置第三方库后能够主动引入其下的原生组件,而无需手动配置
    • 生产构建时能够主动剔除没有应用到的原生组件

背景

第一个痛点

用 uniapp 开发小程序的小伙伴应该晓得,咱们在 uniapp 中要应用第三方 UI 库 (vant-weappiView-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,刚对应的 moduleiview-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-columnloading 都没有带 van 前缀,因为这个问题,在做 主动剔除 性能中,我是依据 前缀来判断应用哪些组件的,因为这里的 loadingpicker-column 没有加前缀,所以就被会删除,导致最终的 picker 用不了。为了解决这个问题,减少了不少工作量。

心愿 Vant 官网前面的版本能优化一下。

总结

本文通用自定义 Webpack 插件来实现日常一些技术优化需要。次要为大家介绍了 Webpack 插件的根本组成和简略架构,通过三个痛点,引出了 uni-using-components-webpack-plugin 插件,并介绍了应用形式,实现思路。

最初,对于 Webpack 插件开发,还有更多常识能够学习,倡议多看看官网文档《Writing a Plugin》进行学习。

代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0