tapable 创建钩子
共 1629字,需浏览 4分钟
·
2022-01-03 13:19
tapable 是一个类似于 nodejs 的 EventEmitter 的库, 主要是控制钩子函数的发布与订阅,控制着 webpack 的插件系 webpack 的本质就是一系列的插件运行。
tapable 包导出了很多 Hook 钩子类,这些 Hook 钩子类可用于为 webpack 插件创建钩子。
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
所有 Hook 钩子构造函数都接受一个可选参数,该参数是一个字符串列表。
const hook = new SyncHook(["arg1", "arg2", "arg3"]);
在 webpack 源码中,Compiler 构造函数中定义了 hooks 属性暴露了所有的钩子:
class Compiler {
constructor() {
this.hooks = {
done: new AsyncSeriesHook(["stats"]),
afterDone: new SyncHook(["stats"]),
emit: new AsyncSeriesHook(["compilation"]),
};
}
/* ... */
}
现在可以使用这些 Hook 钩子了:
const compiler = new Compiler();
// 使用tap方法添加一个订阅函数
compiler.hooks.afterDone.tap("WarningLampPlugin", () => {
console.log('Warning')
});
钩子类型
每一个钩子都可以 tap 一个或者多个函数, 他们如何运行,取决于他们的钩子类型。
基本的钩子, (钩子类名没有 waterfall, Bail, 或者 Loop 的 ), 这个钩子只会简单的调用每个 tap 进去的函数。
Waterfall, 一个 waterfall 钩子,也会调用每个 tap 进去的函数,不同的是,他会从每一个函数传一个返回的值到下一个函数。
Bail, Bail 钩子允许更早的退出,当任何一个 tap 进去的函数,返回任何值,bail 类会停止执行其他的函数执行.(类似 Promise.race())。
此外,钩子可以是同步的,也可以是异步的,Sync, AsyncSeries 和 AsyncParallel,从名字就可以看出,哪些是可以绑定异步函数的。
Sync, 一个同步钩子只能tap同步函数, 不然会报错。
AsyncSeries, 一个 async-series 钩子,可以 tap 同步钩子,基于回调的钩子和一个基于promise 的钩子(使用 myHook.tap(),myHook.tapAsync() 和 myHook.tapPromise().),他会按顺序的调用每个方法。
AsyncParallel, 一个 async-parallel 钩子跟上面的 async-series 一样,不同的是他会把异步钩子并行执行(并行执行就是把异步钩子全部一起开启,不按顺序执行)。