JavaScript内核与高级编程之：`Webpack`的`Tapable`：其插件系统的底层架构。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位好，我是老码农，今天咱们来聊聊Webpack插件系统的底层架构——Tapable。这玩意儿听起来有点玄乎，但其实是Webpack插件机制的核心，搞明白它，你就能更深入地理解Webpack的运作方式，甚至自己也能造轮子（定制Webpack插件）。

开场：Webpack插件的魅力与困惑

Webpack之所以强大，很大程度上归功于其灵活的插件系统。你可以用插件来压缩代码、优化图片、生成HTML，甚至改变Webpack的构建流程。想象一下，如果没有插件，Webpack可能就只是个平平无奇的模块打包工具，而不是现在前端工程化的基石。

但是，插件的强大也带来了一些困惑。你可能用过很多插件，但有没有想过，Webpack是如何让这些插件“听话”的，又是如何让它们按照特定的顺序执行的呢？这就是Tapable的用武之地。

Tapable：一个“中间人”的角色

Tapable，可以把它理解成一个“中间人”，或者一个“事件管理器”。它提供了一套机制，允许插件在特定的“钩子”（Hook）上注册自己的“监听器”（Listener），然后在Webpack执行到这些钩子的时候，触发相应的监听器。

你可以把Webpack的构建过程想象成一条流水线，这条流水线上有很多关键的节点，比如：

compilation: Webpack开始编译时
optimize: Webpack开始优化代码时
emit: Webpack准备输出文件时

这些节点就是Tapable中的“钩子”。插件可以在这些钩子上“挂载”自己的逻辑，就像在流水线上添加一道工序一样。

Tapable的核心概念：Hook和Tap

Tapable中最核心的概念就是Hook和Tap。

Hook（钩子）： 指的是Webpack构建过程中预定义的事件点。比如beforeCompile、compilation、emit等等。Webpack会在这些关键节点触发相应的Hook。
Tap（水龙头/监听器）： 指的是插件注册到Hook上的回调函数。当Hook被触发时，所有注册到该Hook上的Tap都会被依次执行。

你可以把Hook想象成一个水龙头，而Tap就是连接到水龙头上的各种水管。当水龙头打开时（Hook被触发），水就会从这些水管里流出来（Tap被执行）。

Tapable的几种Hook类型

Tapable提供了几种不同类型的Hook，它们的主要区别在于：

执行顺序： Hook上的Tap执行顺序是否可以控制
返回值： Hook上的Tap是否可以返回值，以及返回值如何影响后续Tap的执行
并发执行： Hook上的Tap是否可以并发执行

常见的Hook类型包括：

Hook类型	描述
`SyncHook`	同步Hook。Hook上的Tap按顺序同步执行，Tap的返回值不会影响后续Tap的执行。
`SyncBailHook`	同步Bail Hook。Hook上的Tap按顺序同步执行，如果某个Tap返回非`undefined`的值，则后续Tap不再执行。
`SyncWaterfallHook`	同步Waterfall Hook。Hook上的Tap按顺序同步执行，每个Tap的返回值会作为下一个Tap的参数。第一个Tap的参数是Hook触发时传入的参数。
`SyncLoopHook`	同步Loop Hook。Hook上的Tap按顺序同步执行，如果某个Tap返回非`undefined`的值，则该Tap会被重复执行，直到返回`undefined`为止。
`AsyncSeriesHook`	异步串行Hook。Hook上的Tap按顺序异步执行，只有前一个Tap执行完成后，才会执行下一个Tap。
`AsyncParallelHook`	异步并行Hook。Hook上的Tap并发异步执行。
`AsyncSeriesBailHook`	异步串行Bail Hook。Hook上的Tap按顺序异步执行，如果某个Tap返回`Error`或调用`callback`函数时传入了`Error`，则后续Tap不再执行。
`AsyncSeriesWaterfallHook`	异步串行Waterfall Hook。Hook上的Tap按顺序异步执行，每个Tap的返回值会作为下一个Tap的参数。第一个Tap的参数是Hook触发时传入的参数。

代码示例：创建一个简单的插件

为了更好地理解Tapable，我们来创建一个简单的Webpack插件，这个插件会在Webpack开始编译之前，打印一条消息到控制台。

// my-plugin.js
class MyPlugin {
  constructor(options) {
    this.options = options || {};
  }

  apply(compiler) {
    // 注册到 'beforeCompile' 钩子上
    compiler.hooks.beforeCompile.tap('MyPlugin', (params) => {
      console.log('MyPlugin: Webpack is about to compile...');
      // 可以在这里对 params 进行一些修改，影响编译过程
    });

    // 注册到 'done' 钩子上，表示编译完成
    compiler.hooks.done.tap('MyPlugin', (stats) => {
        console.log('MyPlugin: Webpack compilation is done!');
    });
  }
}

module.exports = MyPlugin;

在这个插件中：

我们定义了一个MyPlugin类，它有一个apply方法。
apply方法接收一个compiler对象，这个对象是Webpack的核心编译器实例。
我们通过compiler.hooks.beforeCompile.tap方法，将一个回调函数注册到beforeCompile钩子上。tap方法的第一个参数是插件的名称，第二个参数是回调函数。
当Webpack执行到beforeCompile钩子时，就会执行我们注册的回调函数，打印一条消息到控制台。
我们还注册了done钩子，在编译完成后打印消息。

要使用这个插件，需要在Webpack的配置文件中添加它：

// webpack.config.js
const MyPlugin = require('./my-plugin.js');

module.exports = {
  // ... 其他配置
  plugins: [
    new MyPlugin({
      // 插件的配置项
      message: 'Hello from MyPlugin!'
    })
  ]
};

运行Webpack，你就能在控制台上看到MyPlugin打印的消息了。

深入理解Hook的类型：一个SyncBailHook的例子

SyncBailHook是Tapable中一个很有用的Hook类型。它可以让插件在特定的条件下“阻止”后续插件的执行。

想象一个场景：你有一个代码风格检查插件，它会在Webpack编译之前检查代码风格。如果代码风格不符合规范，你希望立即停止编译，而不是继续执行后续的插件。

// eslint-plugin.js
class ESLintPlugin {
  apply(compiler) {
    compiler.hooks.beforeCompile.tap('ESLintPlugin', (params) => {
      // 执行代码风格检查
      const errors = this.lintCode();

      if (errors.length > 0) {
        console.error('ESLintPlugin: Code style errors found!');
        // 返回一个非undefined的值，阻止后续插件执行
        return new Error('Code style errors found!'); // 返回Error类型也能阻止
      }
    });
  }

  lintCode() {
    // 这里模拟代码风格检查，返回一个错误列表
    return [
      'Error: Missing semicolon at line 1',
      'Error: Unexpected indentation at line 3'
    ];
  }
}

module.exports = ESLintPlugin;

在这个插件中，如果lintCode方法返回的错误列表不为空，beforeCompile钩子上的回调函数会返回一个Error对象。由于beforeCompile钩子是一个SyncBailHook，Webpack会立即停止编译，并抛出一个错误。

Async Hook：处理异步操作

有时候，插件需要执行一些异步操作，比如读取文件、发送网络请求等等。这时，就需要使用Async类型的Hook。

Async类型的Hook有两种：AsyncSeriesHook和AsyncParallelHook。

AsyncSeriesHook：Hook上的Tap按顺序异步执行。
AsyncParallelHook：Hook上的Tap并发异步执行。

// async-plugin.js
class AsyncPlugin {
  apply(compiler) {
    // 使用 AsyncSeriesHook
    compiler.hooks.afterCompile.tapAsync('AsyncPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('AsyncPlugin: After compile (series)');
        callback(); // 必须调用 callback，表示异步操作完成
      }, 1000);
    });

    // 使用 AsyncParallelHook
    compiler.hooks.emit.tapPromise('AsyncPlugin', (compilation) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('AsyncPlugin: Emit (parallel)');
          resolve();
        }, 500);
      });
    });
  }
}

module.exports = AsyncPlugin;

在这个插件中：

我们使用tapAsync方法注册afterCompile钩子。tapAsync方法的第二个参数是一个回调函数，这个回调函数接收两个参数：compilation和callback。callback是一个函数，必须在异步操作完成后调用，表示异步操作已经完成。
我们使用tapPromise方法注册emit钩子。tapPromise方法的第二个参数是一个返回Promise的函数，当Promise resolve时，表示异步操作完成。

Tapable的底层实现：事件订阅与发布

Tapable的底层实现其实就是一个简单的事件订阅与发布系统。

Hook的创建： 当你创建一个Hook实例时，实际上是创建了一个事件“容器”。这个容器会维护一个监听器列表。
Tap的注册： 当你使用tap方法注册一个Tap时，实际上是将一个监听器添加到Hook的监听器列表中。
Hook的触发： 当Webpack执行到某个Hook时，会遍历该Hook的监听器列表，依次执行这些监听器。

使用Tapable构建自己的插件系统

Tapable不仅仅可以用于Webpack插件开发，你也可以使用它来构建自己的插件系统。

const { SyncHook } = require('tapable');

class MyPluginSystem {
  constructor() {
    this.hooks = {
      beforeAction: new SyncHook(['name']),
      action: new SyncHook(['name', 'payload']),
      afterAction: new SyncHook(['name'])
    };
  }

  doAction(name, payload) {
    this.hooks.beforeAction.call(name);
    this.hooks.action.call(name, payload);
    this.hooks.afterAction.call(name);
  }
}

// 创建一个插件系统实例
const pluginSystem = new MyPluginSystem();

// 注册插件
pluginSystem.hooks.beforeAction.tap('LogBefore', (name) => {
  console.log(`[Before] Action: ${name}`);
});

pluginSystem.hooks.action.tap('PerformAction', (name, payload) => {
  console.log(`[Action] Performing: ${name} with payload: ${JSON.stringify(payload)}`);
});

pluginSystem.hooks.afterAction.tap('LogAfter', (name) => {
  console.log(`[After] Action: ${name}`);
});

// 执行 action
pluginSystem.doAction('createUser', { username: 'john.doe', email: '[email protected]' });

在这个例子中，我们创建了一个简单的插件系统，它有三个Hook：beforeAction、action和afterAction。我们可以注册插件来监听这些Hook，并在doAction方法中触发这些Hook。

总结：Tapable的价值

Tapable是Webpack插件系统的基石，它提供了一种灵活、可扩展的机制，允许插件在Webpack的构建流程中插入自己的逻辑。理解Tapable，可以帮助你：

更深入地理解Webpack的运作方式
更好地使用Webpack插件
自定义Webpack插件
构建自己的插件系统

Tapable的核心价值在于，它将Webpack的核心逻辑与插件逻辑解耦，使得Webpack可以更加灵活地适应各种不同的需求。通过定义一系列的Hook，Tapable允许插件在不修改Webpack核心代码的情况下，扩展Webpack的功能。

希望今天的讲座能帮助大家更好地理解Tapable。掌握了Tapable，你就掌握了Webpack插件开发的钥匙，可以开启更广阔的前端工程化世界。下次有机会，咱们再聊聊Webpack loader的原理。

发表回复 取消回复

发表回复取消回复