步步分解 Tapable 实现 Webpack 的核心事件流机制

2024-01-21 07:34:28

Tapable 的核心原理：发布订阅模式

Tapable 的核心原理是依赖于发布订阅模式。发布订阅模式是一种设计模式，它允许一个对象（发布者）向其他对象（订阅者）发送消息。订阅者可以注册自己感兴趣的消息，当发布者发布消息时，订阅者就会收到通知。

在 Tapable 中，发布者是插件，订阅者是 Webpack 的核心模块。插件可以向 Webpack 的核心模块发布消息，Webpack 的核心模块收到消息后就会做出相应的处理。

Tapable 的核心方法：同步方法

Tapable 提供了几个核心的方法，其中一个核心方法是同步方法。同步方法允许插件在 Webpack 的核心模块处理消息之前对其进行处理。

同步方法的语法如下：

tap(name: string, fn: (data: any, next: () => void) => void): void;

name：插件的名称。
fn：插件的处理函数。
data：插件接收到的数据。
next：插件处理完数据后需要调用的函数。

插件可以使用 tap() 方法来注册同步方法。当 Webpack 的核心模块发布消息时，同步方法就会被调用。同步方法可以对数据进行处理，然后调用 next() 函数将处理后的数据传递给下一个插件。

模拟实现 Tapable

为了更好地理解 Tapable 的工作原理，我们可以模拟实现一个简单的 Tapable。

class Tapable {
  private _hooks: Map<string, Array<(data: any, next: () => void) => void>>;

  constructor() {
    this._hooks = new Map();
  }

  tap(name: string, fn: (data: any, next: () => void) => void): void {
    if (!this._hooks.has(name)) {
      this._hooks.set(name, []);
    }
    this._hooks.get(name)?.push(fn);
  }

  call(name: string, data: any): void {
    const hooks = this._hooks.get(name);
    if (hooks) {
      hooks.forEach((fn) => {
        fn(data, () => {});
      });
    }
  }
}