80行代码写一个Webpack插件并发布到npm


Posted in Javascript onMay 24, 2021

1. 前言

最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件。

这个插件实现的功能比较简单:

  • 默认清除 js 代码中的 console.log 的打印输出;
  • 可通过传入配置,实现移除 console 的其它方法,如 console.warnconsole.error 等;

2. Webpack 的构建流程以及 plugin 的原理

2.1 Webpack 构建流程

Webpack 的主要构建流程,可以分为三个阶段:

  • 初始化阶段:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler
  • 编译阶段:从 Entry 发出,针对每个 Module 串行调用对应的 Loader 去翻译文件内容,再找到该 Module 依赖的 Module,递归地进行编译处理。
  • 生成阶段:对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统。

如果 Webpack 打包生产环境文件时,只会执行一次构建,以上阶段会按顺序执行一遍。但是在开启监听模式时,如开发环境,Webpack 会持续的进行构建。

80行代码写一个Webpack插件并发布到npm

2.2 plugin 原理

Webpack 插件通常是一个带有 apply 函数的类,其中 constructor 可以接收传入的配置项。插件被安装时,apply 函数会被调用一次,并接收 Compiler 对象,然后我们可以在 Compiler 对象上监听不同的事件钩子,从而进行插件功能的开发。

// 定义一个插件
class MyPlugin {
  // 构造函数,接收插件的配置项 options 
  constructor(options) {
    // 获取配置项,初始化插件
  }

  // 插件安装时会调用 apply,并传入 compiler
  apply(compiler) {
    // 获取 comolier 独享,可以监听事件钩子
    // 功能开发 ... 
  }
}

2.3 compiler 和 compilation 对象

在开发 Plugin 过程中最常用的两个对象就是 CompilerCompilation

  • Compiler 对象在 Webpack 启动时被实例化,该对象包含了 Webpack 环境所有的配置信息,包括 optionsloadersplugins 等。在整个 Webpack 构建过程中,Compiler 对象是全局唯一的, 它提供了很多事件钩子回调供插件使用。
  • Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象在 Webpack 构建过程中并不是唯一的,如果在开发模式下 Webpack 开启了文件检测功能,每当文件变化时,Webpack 会重新构建,此时会生成一个新的 Compilation 对象。Compilation 对象也提供了很多事件回调供插件做扩展。

3. 插件开发

3.1 项目目录

该插件实现的功能比较简单,文件目录也不复杂。首先新建一个空文件夹 remove-console-Webpack-plugin,并在该文件夹目录下运行 npm init,根据提示来填写 package.json 相关信息。然后再新建一个 src 文件夹,插件主要代码就放在 src/index.js 里面。如果你需要把项目放到 github 上,最好也添加一下 .gitignoreREADME.md 等文件。

// remove-console-Webpack-plugin
├─src
│  └─index.js  
├─.gitignore
├─package.json
└─README.md

3.2 插件代码

插件代码逻辑也并不复杂,主要有几点:

  • 在构造函数中接收配置参数,并对参数进行合并,得到需要清除的 console 函数, 存放在 removed 数组中;
  • apply 函数中监听 compiler.hook.compilation 钩子,该钩子触发后,拿到 compilation 后进一步监听它的钩子,这里 Webpack4Webpack5 的钩子不一样,需要做兼容;
  • 定义 assetsHandler 方法来处理 js 文件,利用正则表达式清除 removed 中包括的 console 函数;
class RemoveConsoleWebpackPlugin {
  // 构造函数接受配置参数
  constructor(options) {
    let include = options && options.include;
    let removed = ['log']; // 默认清除的方法

    if (include) {
      if (!Array.isArray(include)) {
        console.error('options.include must be an Array.');
      } else if (include.includes('*')) {
        // 传入 * 表示清除所有 console 的方法
        removed = Object.keys(console).filter(fn => {
          return typeof console[fn] === 'function';
        })
      } else {
        removed = include; // 根据传入配置覆盖
      }
    }

    this.removed = removed;
  }

  // Webpack 会调用插件实例的 apply 方法,并传入compiler 对象
  apply(compiler) {
    // js 资源代码处理函数
    let assetsHandler = (assets, compilation) => {
      let removedStr = this.removed.reduce((a, b) => (a + '|' + b));

      let reDict = {
        1: [RegExp(`\\.console\\.(${removedStr})\\(\\)`, 'g'), ''],
        2: [RegExp(`\\.console\\.(${removedStr})\\(`, 'g'), ';('],
        3: [RegExp(`console\\.(${removedStr})\\(\\)`, 'g'), ''],
        4: [RegExp(`console\\.(${removedStr})\\(`, 'g'), '(']
      }

      Object.entries(assets).forEach(([filename, source]) => {
        // 匹配js文件
        if (/\.js$/.test(filename)) {
          // 处理前文件内容
          let outputContent = source.source();

          Object.keys(reDict).forEach(i => {
            let [re, s] = reDict[i];
            outputContent = outputContent.replace(re, s);
          })

          compilation.assets[filename] = {
            // 返回文件内容
            source: () => {
              return outputContent
            },
            // 返回文件大小
            size: () => {
              return Buffer.byteLength(outputContent, 'utf8')
            }
          }
        }
      })
    }

    /**
     * 通过 compiler.hooks.compilation.tap 监听事件
     * 在回调方法中获取到 compilation 对象
     */
    compiler.hooks.compilation.tap('RemoveConsoleWebpackPlugin',
      compilation => {
        // Webpack 5
        if (compilation.hooks.processAssets) {
          compilation.hooks.processAssets.tap(
            { name: 'RemoveConsoleWebpackPlugin' },
            assets => assetsHandler(assets, compilation)
          );
        } else if (compilation.hooks.optimizeAssets) {
          // Webpack 4
          compilation.hooks.optimizeAssets.tap(
            'RemoveConsoleWebpackPlugin', 
            assets => assetsHandler(assets, compilation)
          );
        }
      })
  }
}

// export Plugin
module.exports = RemoveConsoleWebpackPlugin;

4. 发布到npm

希望别人能使用到你的插件,就需要把插件发布到 npm 上,发布的主要流程:

首先在 npm 官网上注册账号,然后打开命令行工具,在任意目录下输入 npm login 并按提示登录;

80行代码写一个Webpack插件并发布到npm

登录后可用 npm whoami 查看是否登录成功;

80行代码写一个Webpack插件并发布到npm

发布前检查一下根目录下的 package.json 文件信息是否填写正确,主要字段:

  • name:决定用户下载你的插件时用的名称,不可与 npm 上已有的第三方包重名,否则无法发布;
  • main:插件主文件入口,Webpack 引入插件时,就从该目录导入;
  • version:每次更新发布时,需要与上一版本的版本号不一样,否则上传不成功;
  • repository:如果你的插件代码放在 githubgitee 等网站,可以填一下;
  • private:不能设置为 true,否则无法发布;

80行代码写一个Webpack插件并发布到npm

一切准备就绪后,切换到插件所在的目录下,运行 npm publish 即可上传插件;

80行代码写一个Webpack插件并发布到npm

上传成功后,到 npm 官网上搜索,看看是否能搜到插件;

80行代码写一个Webpack插件并发布到npm

5. 结尾

到此这篇关于80行代码写一个Webpack插件并发布到npm的文章就介绍到这了,更多相关Webpack插件发布到npm内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 #Javascript
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
JS + HTML 罗盘式时钟的实现
JavaScript canvas实现流星特效
May 20 #Javascript
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
You might like
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
python模块内置属性概念及实例
2021/02/18 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
淘宝客服自我总结鉴定
2014/01/25 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
讲解员培训方案
2014/05/04 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
公司运动会策划方案
2014/05/25 职场文书
拉歌口号大全
2014/06/13 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
学校端午节活动总结
2015/02/11 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers