Tapable
Why Tapable
前端开发中 Webpack 本质上是基于事件流的运行机制，它的工作流程是将特定的任务分发到指定的事件钩子中去完成。而实现这一切的核心就是 tapable，Webpack 中的两个基础模块：负责编译的 Compiler 和负责创建 bundle 的 Compilation 都是 tapable 构造函数的实例。
在 Webpack 4.0 的源码中会看到下面这些以 Sync、Async 开头，以 Hook 结尾的方法，这些都tapable 核心库的构造类，它为我们提供不同的事件流机制：
- SyncBailHook：同步执行，前一步返回是 undefined 才会进入下一个函数，否则直接结束
- SyncWaterfallHook：同步执行，前一个函数的执行结果作为下一个函数的参数传入
- SyncLoopHook：同步执行每个函数，若某个函数返回不为 undefined 则继续循环执行该函数，直至该函数返回 undefined 再进入下一个函数
- AsyncParallelHook：异步并行执行，知道所有异步函数执行结束再进入最后的 finalCallback
- AsyncParallelBailHook：异步并行执行，只要监听函数的返回值不为 undefined，就会忽略后面的监听函数执行，直接跳跃到callAsync等触发函数绑定的回调函数，然后执行这个被绑定的回调函数
- AsyncSeriesHook：异步串行执行，函数参数都来自于最初传入的参数
- AsyncSeriesBailHook：异步串行执行，只要监听函数的返回值不为 undefined，就会忽略后面的监听函数执行，直接跳跃到callAsync等触发函数绑定的回调函数，然后执行这个被绑定的回调函数
- AsyncSeriesWaterfallHook：异步串行执行，上一个监听函数的中的callback(err, data)的第二个参数,可以作为下一个监听函数的参数
Tapable and EventEmitter
Tapable 和 EventEmitter 都是实现了 事件的订阅与发布 功能，很多刚接触Tapable的同学可能会懵逼，这玩意和 EventEmitter 有什么区别呢？
- tapable 在创建订阅中心时需要指定回调函数的参数列表
- tapable 触发事件时不需要指定事件名，所有的事件都会被调用
// SyncHook 钩子的使用
const { SyncHook } = require("tapable");
// 创建实例
let syncHook = new SyncHook(["name"]);
// 注册事件
syncHook.tap("login", (name) => console.log(name)); // gaollard
syncHook.tap("register", (name) => console.log(name)); // gaollard
// 触发事件
syncHook.call("gaollard");
// 引入 events 模块
const events = require('events');
// 创建 eventEmitter 对象
const userEvent = new events.EventEmitter();
userEvent.addListener('login', function(name) {
console.log(name)
})
userEvent.addListener('register', function(name) {
console.log(name) // 打印 gaollard
})
userEvent.emit('login', 'gaollard')
Sync 类型钩子
- 注册事件 tap
- 触发事件 call
SyncHook
SyncHook 为串行同步执行，什么都不需要关心，在触发事件之后，会按照事件注册的先后顺序执行所有的事件处理函数，参数就是调用call传入的参数：
// SyncHook 钩子的使用
const { SyncHook } = require("tapable");
// 创建实例 ["name"] 用于声明回调函数的参数个数
let userSyncHook = new SyncHook(["name"]);
// 注册事件 第一个参数为事件名, 第二个参数为注册的回调函数
userSyncHook.tap("login", (name) => console.log(name));
userSyncHook.tap("register", (name) => console.log(name));
// 触发事件
userSyncHook.call("gaollard");
console.log(userSyncHook);
在 tapable 解构的 SyncHook 是一个类，注册事件需先创建实例，创建实例时支持传入一个数组，数组内存储事件触发时传入的参数，实例的 tap 方法用于注册事件，支持传入两个参数，第一个参数为事件名称，在 Webpack 中一般用于存储事件对应的插件名称， 第二个参数为事件处理函数，函数参数为执行 call 方法触发事件时所传入的参数的形参。
SyncBailHook
SyncBailHook 为串行同步执行，如果事件处理函数执行时有一个返回值不为 undefined，则跳过剩下未执行的事件处理函数：
// 创建实例
let userSyncHook = new SyncBailHook(["name"]);
// 注册事件
userSyncHook.tap("login", (name) => {
console.log(name)
return null // 返回值不为 undefined
});
userSyncHook.tap("register", (name) => {
console.log(name)
});
// 触发事件，让监听函数执行
userSyncHook.call("gaollard"); // 只会打印一次
SyncWaterfallHook
SyncWaterfallHook 为串行同步执行，上一个事件处理函数的返回值作为参数传递给下一个事件处理函数，依次类推，当然，只有第一个事件处理函数的参数可以通过 call 传递，而 call 的返回值为最后一个事件处理函数的返回值：
// 创建实例
let userSyncHook = new SyncWaterfallHook(["name"]);
// 注册事件
userSyncHook.tap("login", (name) => {
console.log('login', name) // 打印 gaollard
});
userSyncHook.tap("register", (name) => {
console.log('register', name) // login回调未返回值, 所以参数为 "gaollard"
return "hello"
});
userSyncHook.tap("enroll", (name) => {
console.log("enroll", name) // register回调返回"hello", 所以参数为 "hello"
});
// 触发事件
userSyncHook.call("gaollard");
SyncLoopHook
SyncLoopHook 为串行同步执行，但是 SyncLoopHook 中的每一个事件回调函数都会被循环执行，事件处理函数返回 undefined 表示结束循环，当前的事件回调循环结束后进入到下一个回调函数中，直到整个流程结束：
// 创建实例
let userSyncHook = new SyncLoopHook(["name"]);
let num1 = 1
// 注册事件
userSyncHook.tap("login", (name) => {
console.log('login', name, num1)
return (++num1) > 10 ? undefined : true
});
userSyncHook.tap("register", (name) => {
console.log('login', name, num1)
return (++num1) > 20 ? undefined : true
});
// 触发事件
userSyncHook.call("manbax");
卧槽，连 21 也被打印出来了??? 发现了 tapable 一个BUG(写完去github提issue)
Async 类型钩子
Async 类型可以使用 tap、tapSync 和 tapPromise 注册不同类型的插件 “钩子”，分别通过 call、callAsync 和 promise 方法调用，我们下面会针对 AsyncParallelHook 和 AsyncSeriesHook 的 async 和 promise 两种方式分别介绍和模拟。
AsyncParallelHook
AsyncParallelHook 为异步并行执行，通过 tapAsync 注册的事件，通过 callAsync 触发；通过 tapPromise 注册的事件，通过 promise 触发（返回值可以调用 then 方法）
- tapAsync/callAsync
const { AsyncParallelHook } = require("tapable");
// 创建实例
let asyncParallelHook = new AsyncParallelHook(["name"]);
console.time("time");
// 注册事件
asyncParallelHook.tapAsync("login", (name, done) => {
setTimeout(() => {
console.log("login", name, new Date());
done();
}, 1000);
});
asyncParallelHook.tapAsync("register", (name, done) => {
setTimeout(() => {
console.log("register", name, new Date());
done();
console.timeEnd("time");
}, 2000);
});
// 触发事件, callAsync 的最后一个参数为回调函数，在所有事件处理函数执行完毕后执行。
asyncParallelHook.callAsync("manbax", () => {
console.log("complete");
});
上面的代码中：两个事件处理函数会并行的执行，都执行完成后(done 被调用)，触发 callAsync 回调函数。所有 tapAsync 注册的事件处理函数最后一个参数都为一个回调函数 done，每个事件处理函数在异步代码执行完毕后调用 done 函数，则可以保证 callAsync 会在所有异步函数都执行完毕后执行，接下来看一看 callAsync 是如何实现的:
// 模拟 SyncLoopHook 类
class AsyncParallelHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tapAsync(name, task) {
this.taps.push({
name: name,
fn: task,
type: 'sync',
});
}
callAsync(...args) {
if (args.length < this.args.length) {
throw new Error("参数不足");
}
let sum = 0
const fn = args.pop();
const params = args.splice(0, this.args.length);
const done = () => {
(++sum === this.taps.length) && fn()
}
this.taps.forEach(task => {
task.fn(params, done)
})
}
}
- tapPromise/promise
要使用 tapPromise 注册事件，对事件处理函数有一个要求，必须返回一个 Promise 实例，而 promise 方法也返回一个 Promise 实例，callAsync 的回调函数在 promise 方法中用 then 的方式代替:
const { AsyncParallelHook } = require("tapable");
// 创建实例
let asyncParallelHook = new AsyncParallelHook(["name"]);
console.time("time");
// 注册事件
asyncParallelHook.tapPromise("login", (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("login", name, new Date());
resolve();
}, 1000);
})
});
asyncParallelHook.tapAsync("register", (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("register", name, new Date());
resolve();
console.timeEnd("time");
}, 2000);
})
});
// 触发事件
asyncParallelHook.promise("manbax").then(() => {
console.log("complete");
});
AsyncParallelHook 的实现：
class AsyncParallelHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tapPromise(name, task) {
this.taps.push({
name: name,
fn: task,
type: 'async',
});
}
promise(...args) {
if (args.length < this.args.length) {
throw new Error("参数不足");
}
return new Promise.all(this.taps.map(task => task.fn(...args)))
}
}
AsyncParallelBailHook
- tapPromise/promise
const { AsyncParallelBailHook } = require("tapable");
// 创建实例
let userHook = new AsyncParallelBailHook(["name"]);
console.time("time");
// 注册事件
userHook.tapPromise("login", (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("login", name, new Date());
resolve(undefined) // 此处为 undefined 进入到下一个回调
}, 1000);
})
});
userHook.tapPromise("register", (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("register", name, new Date());
resolve("2"); // 这个回调完成后直接触发最后回调
}, 2000);
})
});
userHook.tapPromise("enroll", (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("enroll", name, new Date());
reject("2");
console.timeEnd("time");
}, 3000);
})
});
// 触发事件
userHook.promise("manbax").then((res) => {
console.log("complete", res)
}).catch(err => {
console.log("error", err)
})
AsyncSeriesHook
AsyncSeriesHook 为异步串行执行，与 AsyncParallelHook 相同，通过 tapAsync 注册的事件，通过 callAsync 触发，通过 tapPromise 注册的事件，通过 promise 触发，可以调用 then 方法。
- tapAsync/callAsync
const { AsyncSeriesHook } = require("tapable");
// 创建实例
let userHook = new AsyncSeriesHook(["name"]);
console.time()
userHook.tapAsync('login', function(name, done) {
setTimeout(() => {
console.log('login--', name, new Date())
done()
}, 1000)
})
userHook.tapAsync('register', function(name, done){
setTimeout(() => {
console.log('register--', name, new Date())
done()
}, 2000)
})
// 整个调用花费了 3S
userHook.callAsync('manbax', () => {
console.log('complete')
console.timeEnd()
})
- tapPromise/promise
const { AsyncSeriesHook } = require("tapable");
// 创建实例
let userHook = new AsyncSeriesHook(["name"]);
console.time()
userHook.tapPromise('login', function(name){
return new Promise((resolve) => {
setTimeout(() => {
console.log('login--', name, new Date())
resolve()
}, 1000)
})
})
userHook.tapPromise('register', function(name){
return new Promise((resolve) => {
setTimeout(() => {
console.log('register--', name, new Date())
resolve()
}, 2000)
})
})
// 整个调用花费了 3S
userHook.promise('manbax').then(res => {
console.log('complete')
console.timeEnd()
})
AsyncSeriesBailHook
const { AsyncSeriesBailHook } = require("tapable");
// 创建实例
let userHook = new AsyncSeriesBailHook(["name"]);
console.time()
userHook.tapAsync('login', function(name, done) {
setTimeout(() => {
console.log('login--', name, new Date())
done(1) // 这里返回1, 第二个不会执行(register)
}, 1000)
})
userHook.tapAsync('register', function(name, done){
setTimeout(() => {
console.log('register--', name, new Date())
done(2)
}, 2000)
})
// 整个调用花费了 3S
userHook.callAsync('manbax', (_, data) => {
console.log('complete')
console.timeEnd()
})
AsyncSeriesWaterfallHook
- tapAsync/callAsync: tapAsync 中的 done 回调函数需要传入两个参数，第一个表示是否有异常，第二个为返回值。
const { AsyncSeriesWaterfallHook } = require("tapable");
// 创建实例
let userHook = new AsyncSeriesWaterfallHook(["name"]);
console.time()
userHook.tapAsync('login', function(name, done) {
setTimeout(() => {
console.log('login--', name, new Date())
done(null, "1")
}, 1000)
})
userHook.tapAsync('register', function(name, done){
setTimeout(() => {
console.log('register--', name, new Date())
done(null, "2")
}, 2000)
})
// 整个调用花费了 3S
userHook.callAsync('manbax', (_, data) => {
console.log('complete', data)
console.timeEnd()
})
API模拟实现
SyncHook
// 模拟 SyncHook 类
class MySyncHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tap(name, task) {
this.taps.push({
name: name,
fn: task,
type: 'sync',
});
}
call(...args) {
if (args.length < this.args.length) {
// 参数不足时抛出异常
throw new Error("参数不足");
}
// 参数长度与创建实例传入数组长度一直，不足补 undefined
// 因为长度不足时已经抛出异常，故注释
// args = args.slice(0, this.args.length);
// 依次执行事件处理函数
this.taps.forEach(task => task.fn(...args));
}
}
SyncBailHook
// 模拟 SyncBailHook 类
class SyncBailHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tap(name, task) {
this.taps.push({
name: name,
fn: task,
type: 'sync',
});
}
call(...args) {
if (args.length < this.args.length) {
throw new Error("参数不足");
}
let i = 0, res;
do {
res = this.taps[i++].fn(...args)
} while (res === undefined && i < this.taps.length)
}
}
SyncWaterfallHook
// 模拟 SyncWaterfallHook 类
class SyncWaterfallHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tap(name, task) {
this.taps.push({
name: name,
fn: task,
type: 'sync',
});
}
call(...args) {
if (args.length < this.args.length) {
throw new Error("参数不足");
}
return this.taps.reduce((res, current) => {
let _res = current.fn(res)
// 若当前的回调函数没有返回值，那么就使用上一个参数
return _res !== undefined ? _res : res
}, ...args)
}
}
SyncLoopHook
// 模拟 SyncLoopHook 类
class SyncLoopHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tap(name, task) {
this.taps.push({
name: name,
fn: task,
type: 'sync',
});
}
call(...args) {
if (args.length < this.args.length) {
throw new Error("参数不足");
}
let i = 0
while (i < this.taps.length) {
const task = this.taps[i++].fn
const magic = function () {
let res = task(...args)
if (res !== undefined) {
magic()
}
};
magic();
}
}
}
AsyncSeriesHook
class AsyncSeriesHook {
constructor(args) {
this.args = args;
this.taps = [];
}
tapAsync(name, task) {
this.taps.push({
name: name,
fn: task,
});
}
callAsync(...args) {
if (args.length < this.args.length) {
throw new Error("参数不足");
}
let i = 0
const cb = args.pop()
const _args = args.splice(0, args.length)
const next = () => {
const task = this.taps[i++]
if (task) {
task.fn(..._args, next)
} else {
cb()
}
}
next()
}
}
AsyncSeriesWaterfallHook
class AsyncSeriesWaterfallHook {
constructor() {
this.tasks = [];
}
tap(name, task) {
this.tasks.push(task);
}
call(...args, finalCb) {
let count = 0;
const len = this.tasks.length;
const next = (err, data) => {
if(count === len) return finalCb()
let task = this.tasks[count];
if (count === 0) {
task(...args, next);
} else {
task(data, next);
}
count++;
};
next()
}
}
总结
仔细思考发现 Tapable 事件机制 就像工厂里面生产线：
- 前序工位的输出是后序工位的输入
- 当某个产品在流产线上的工位发生异常时，这个产品的后序流程终止
它非常适合用于解决流水作业，就像 Webpack 对文件进行处理正是这样的场景。学习 tapable 有助于帮助我们更高的理解 Webpack。
tapable的注册事件的方法有：tab/tapSync/tapPromise 和触发事件的方法 call/callAsync/promise，在 Webpack 中，我们通过这些API来设计钩子，这些 “钩子” 能够将 Webpack 中插件/加载器/功能独立的模块连接起来，以减少耦合性和提高扩展性。