共计 4874 个字符，预计需要花费 13 分钟才能阅读完成。
记录下自己在前端路上爬坑的经历 加深印象，正文开始～
tapable 是 webpack 的核心依赖库 想要读懂 webpack 源码 就必须首先熟悉 tapableok. 下面是 webapck 中引入的 tapable 钩子 由此可见 在 webpack 中 tapable 的重要性
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require(“tapable”);
这些钩子可分为同步的钩子和异步的钩子，Sync 开头的都是同步的钩子，Async 开头的都是异步的钩子。而异步的钩子又可分为并行和串行的钩子，其实同步的钩子也可以理解为串行的钩子。
本文将以以下章节分别梳理每个钩子
同步钩子
SyncHook
SyncBailHook
SyncWaterfallHook
SyncLoopHook
异步钩子
AsyncParallelHook
AsyncParallelHook 的 Promise 版本
AsyncSeriesHook
AsyncSeriesHook 的 Promise 版本
AsyncSeriesWaterfallHook
AsyncSeriesWaterfallHook 的 Promise 版本
首先安装 tapable npm i tapable -D
SyncHook
SyncHook 是简单的同步钩子，它很类似于发布订阅。首先订阅事件，触发时按照顺序依次执行，所以说同步的钩子都是串行的。
const {SyncHook} = require(‘tapable’);
class Hook{
constructor(){
/** 1 生成 SyncHook 实例 */
this.hooks = new SyncHook([‘name’]);
}
tap(){
/** 2 注册监听函数 */
this.hooks.tap(‘node’,function(name){
console.log(‘node’,name);
});
this.hooks.tap(‘react’,function(name){
console.log(‘react’,name);
});
}
start(){
/** 3 出发监听函数 */
this.hooks.call(‘call end.’);
}
}
let h = new Hook();
h.tap();/** 类似订阅 */
h.start();/** 类似发布 */
/* 打印顺序：
node call end.
react call end.
*/
可以看到 它是按照顺序依次打印的，其实说白了就是发布和订阅。接下来我们就手动实现它。
class SyncHook{// 定义一个 SyncHook 类
constructor(args){/* args -> [‘name’]) */
this.tasks = [];
}
/** tap 接收两个参数 name 和 fn */
tap(name,fn){
/** 订阅: 将 fn 放入到 this.tasks 中 */
this.tasks.push(fn);
}
start(…args){/** 接受参数 */
/** 发布: 将 this.taks 中的 fn 依次执行 */
this.tasks.forEach((task)=>{
task(…args);
});
}
}
let h = new SyncHook([‘name’]);
/** 订阅 */
h.tap(‘react’,(name)=>{
console.log(‘react’,name);
});
h.tap(‘node’,(name)=>{
console.log(‘node’,name);
});
/** 发布 */
h.start(‘end.’);
/* 打印顺序：
react end.
node end.
*/
SyncBailHook
SyncBailHook 从字面意思上理解为带有保险的同步的钩子，带有保险意思是 根据每一步返回的值来决定要不要继续往下走，如果 return 了一个非 undefined 的值 那就不会往下走，注意 如果什么都不 return 也相当于 return 了一个 undefined。
const {SyncBailHook} = require(‘tapable’);
class Hook{
constructor(){
this.hooks = new SyncBailHook([‘name’]);
}
tap(){
this.hooks.tap(‘node’,function(name){
console.log(‘node’,name);
/** 此处 return 了一个非 undefined
* 代码到这里就不会继续执行余下的钩子
*/
return 1;
});
this.hooks.tap(‘react’,function(name){
console.log(‘react’,name);
});
}
start(){
this.hooks.call(‘call end.’);
}
}
let h = new Hook();
h.tap();
h.start();
/* 打印顺序：
node call end.
*/
手动实现
class SyncHook{
constructor(args){
this.tasks = [];
}
tap(name,fn){
this.tasks.push(fn);
}
start(…args){
let index = 0;
let result;
/** 利用 do while 先执行一次的特性 */
do{
/** 拿到每一次函数的返回值 result */
result = this.tasks[index++](…args);
/** 如果返回值不为 undefined 或者执行完毕所有 task -> 中断循环 */
}while(result === undefined && index < this.tasks.length);
}
}
let h = new SyncHook([‘name’]);
h.tap(‘react’,(name)=>{
console.log(‘react’,name);
return 1;
});
h.tap(‘node’,(name)=>{
console.log(‘node’,name);
});
h.start(‘end.’);
/* 打印顺序：
react end.
*/
SyncWaterfallHook
SyncWaterfallHook 是同步的瀑布钩子，瀑布怎么理解呢? 其实就是说它的每一步都依赖上一步的执行结果，也就是上一步 return 的值就是下一步的参数。
const {SyncWaterfallHook} = require(‘tapable’);
class Hook{
constructor(){
this.hooks = new SyncWaterfallHook([‘name’]);
}
tap(){
this.hooks.tap(‘node’,function(name){
console.log(‘node’,name);
/** 此处返回的值作为第二步的结果 */
return ‘ 第一步返回的结果 ’;
});
this.hooks.tap(‘react’,function(data){
/** 此处 data 就是上一步 return 的值 */
console.log(‘react’,data);
});
}
start(){
this.hooks.call(‘callend.’);
}
}
let h = new Hook();
h.tap();
h.start();
/* 打印顺序：
node callend.
react 第一步返回的结果
*/
手动实现：
class SyncWaterFallHook{
constructor(args){
this.tasks = [];
}
tap(name,fn){
this.tasks.push(fn);
}
start(…args){
/** 解构 拿到 tasks 中的第一个 task -> first */
let [first, …others] = this.tasks;
/** 利用 reduce() 累计执行
* 首先传入第一个 first 并执行
* l 是上一个 task n 是当前 task
* 这样满足了 下一个函数依赖上一个函数的执行结果
*/
others.reduce((l,n)=>{
return n(l);
},first(…args));
}
}
let h = new SyncWaterFallHook([‘name’]);
/** 订阅 */
h.tap(‘react’,(name)=>{
console.log(‘react’,name);
return ‘ 我是第一步返回的值 ’;
});
h.tap(‘node’,(name)=>{
console.log(‘node’,name);
});
/** 发布 */
h.start(‘end.’);
/* 打印顺序：
react end.
node 我是第一步返回的值
*/
SyncLoopHook
SyncLoopHook 是同步的循环钩子。循环钩子很好理解，就是在满足一定条件时 循环执行某个函数：
const {SyncLoopHook} = require(‘tapable’);
class Hook{
constructor(){
/** 定义一个 index */
this.index = 0;
this.hooks = new SyncLoopHook([‘name’]);
}
tap(){
/** 箭头函数 绑定 this */
this.hooks.tap(‘node’,(name) => {
console.log(‘node’,name);
/** 当不满足条件时 会循环执行该函数
* 返回值为 udefined 时 终止该循环执行
*/
return ++this.index === 5?undefined:’ 学完 5 遍 node 后再学 react’;
});
this.hooks.tap(‘react’,(data) => {
console.log(‘react’,data);
});
}
start(){
this.hooks.call(‘callend.’);
}
}
let h = new Hook();
h.tap();
h.start();
/* 打印顺序：
node callend.
node callend.
node callend.
node callend.
node callend.
react callend.
*/
可以看到 执行了 5 遍 node callend 后再继续往下执行。也就是当返回 undefined 时 才会继续往下执行：
class SyncWaterFallHook{
constructor(args){
this.tasks = [];
}
tap(name,fn){
this.tasks.push(fn);
}
start(…args){
let result;
this.tasks.forEach((task)=>{
/** 注意 此处 do{}while() 循环的是每个单独的 task */
do{
/** 拿到每个 task 执行后返回的结果 */
result = task(…args);
/** 返回结果不是 udefined 时 会继续循环执行该 task */
}while(result !== undefined);
});
}
}
let h = new SyncWaterFallHook([‘name’]);
let total = 0;
/** 订阅 */
h.tap(‘react’,(name)=>{
console.log(‘react’,name);
return ++total === 3?undefined:’ 继续执行 ’;
});
h.tap(‘node’,(name)=>{
console.log(‘node’,name);
});
/** 发布 */
h.start(‘end.’);
/* 打印顺序：
react end.
react end.
react end.
node end.
*/
可以看到，执行了 3 次 react end. 后 才继续执行了下一个 task -> node end。至此，我们把 tapable 的所有同步钩子都解析完毕. 异步钩子比同步钩子麻烦些，我们会在下一章节开始解析异步的钩子.