[FE] tapable

tapable 是 webpack 的底层依赖包，用以实现 webpack hook（插件）功能。
最近发现 rush.js 也在用 tapable，所以有必要对 tapable 再进一步了解和学习。

---

测试项目

仓库：github: thzt/debug-tapable
tapable v2.2.1

./debug-tapable
├── README.md
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── src
|  └── index.js
└── test
   └── index.test.js

代码执行过程

为了简单起见，我们只看 SyncHook

预编译

tapable 会对添加给 hook 的 plugin 进行预编译。
hook.call 并不是直接调用每个 plugin，而是做了一些调整。
例如， 上述例子中，hook.call 实际调用的函数是以下编译结果，它是由 new Function 生成的，

生成的匿名函数如下，

编译的过程，会受到多种因素影响，例如 hook 类型、tap 了多少 plugin、以及是否绑定了拦截器。

预编译过程

下面我们来看一下 tapable 是如何生成代码的，

const hook = new SyncHook(['arg1', 'arg2']);           // 初始化一个 hook
  const hook = new Hook(args, name);                     // 父类
    this.call = CALL_DELEGATE;                           // hook.call 实际进行调用的函数
    this._x = undefined;                                 // 保存各个 plugin
  hook.compile = COMPILE;                                // 对 plugin 进行编译的方法
hook.intercept(...);                                   // 注册拦截器
  this._resetCompilation();
hook.tap('plugin1', (x1, x2) => {});                   // 注册 plugin1
  this._tap("sync", options, fn);
    options = this._runRegisterInterceptors(options);
      const newOptions = interceptor.register(options);
        // 调用我们注册 register 拦截器
      this._insert(options);                             // 把 plugin 信息存起来 {fn,name,type}
hook.tap('plugin2', (x1, x2) => {});                   // 注册 plugin2
  ...
hook.call('hello', 'world');                           // 调用 hook，实际是调用 CALL_DELEGATE
  this.call = this._createCall("sync");                  // 创建一个编译产物
    return this.compile({taps,interceptors,args,type});  // 编译，调用的是 COMPILE
      factory.setup(this, options);                      // 把 plugin 都放到 this._x 中
      return factory.create(options);                    // 创建编译产物
        this.init(options);                              // 把参数名放到 this._args 中
        fn = new Function(...);                          // 使用 new Function 生成新的函数
          this.args()                                    // 生成参数列表：'arg1, arg2'
          this.header()                                  // 一些前置变量：'var _context;\nvar _x = this._x;\nvar _taps = this.taps;\nvar _interceptors = this.interceptors;\n'
          this.contentWithInterceptors(...)              // '_interceptors[0].call(arg1, arg2);\nvar _fn0 = _x[0];\n_fn0(arg1, arg2);\nvar _fn1 = _x[1];\n_fn1(arg1, arg2);\n'
            this.getInterceptor(i)                       // 根据是否注册了拦截器，生成代码：'_interceptors[0].call(arg1, arg2);\n'
            this.content(...)                            // 同下
              this.callTapsSeries(...)                   // 'var _fn0 = _x[0];\n_fn0(arg1, arg2);\nvar _fn1 = _x[1];\n_fn1(arg1, arg2);\n'
                this.callTap(...)                        // 'var _fn1 = _x[1];\n_fn1(arg1, arg2);\n'
                  this.getTapFn(tapIndex)                // '_x[1]'
  return this.call(...args);                             // 调用编译产物
    // 调到了刚才用 new Function 创建的函数里面

(function anonymous(arg1, arg2
) {
"use strict";
var _context;
var _x = this._x;
var _taps = this.taps;
var _interceptors = this.interceptors;
_interceptors[0].call(arg1, arg2);
var _fn0 = _x[0];
_fn0(arg1, arg2);
var _fn1 = _x[1];
_fn1(arg1, arg2);

})

其他类型的 hook 会生成不同的匿名函数，compile 过程取决于这些因素，this.compile({taps,interceptors,args,type})。
注册了多少 plugin，是否注册了拦截器，hook 参数，以及 hook 的类型。

---

参考

tapable v2.2.1
github: thzt/debug-tapable