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』取指定url格式及分割函数应用
Apr 22 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
JavaScript实现简单计时器
Jun 22 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
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
从vue源码看props的用法
2019/01/09 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python中运算符"=="和"is"的详解
2016/10/08 Python
浅谈Django的缓存机制
2018/08/23 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
出国留学经济担保书
2014/04/01 职场文书
安全保证书范文
2014/04/29 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
家长会标语
2014/06/24 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
python编程项目中线上问题排查与解决
2021/11/01 Python
基于Python实现对比Exce的工具
2022/04/07 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle