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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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
PHP实现远程下载文件到本地
2015/05/17 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
js实现选项卡效果
2020/03/07 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
numpy数组广播的机制
2019/07/12 Python
Python with语句和过程抽取思想
2019/12/23 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
DTD的含义以及作用
2014/01/26 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
师德师风个人反思
2014/04/28 职场文书
企业宣传工作方案
2014/06/02 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
美术教师求职信范文
2015/03/20 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android