前不久寫了一篇webpack基本原理和AST用法的文章，本來想接着寫webpack plugin的原理的，但是發現webpack plugin高度依賴tapable這個庫，不清楚tapable而直接去看webpack plugin始終有點霧里看花的意思。所以就先去看了下tapable的文檔和源碼，發現這個庫非常有意思，是增強版的發布訂閱模式。發布訂閱模式在源碼世界實在是太常見了，我們已經在多個庫源碼里面見過了：
這些庫基本都自己實現了自己的發布訂閱模式，實現方式主要是用來滿足自己的業務需求，而tapable並沒有具體的業務邏輯，是一個專門用來實現事件訂閱或者他自己稱為hook(鈎子)的工具庫，其根本原理還是發布訂閱模式，但是他實現了多種形式的發布訂閱模式，還包含了多種形式的流程控制。
tapable暴露多個API，提供了多種流程控制方式，連使用都是比較復雜的，所以我想分兩篇文章來寫他的原理：
- 先看看用法，體驗下他的多種流程控制方式
- 通過用法去看看源碼是怎么實現的
本文就是講用法的文章，知道了他的用法，大家以后如果有自己實現hook或者事件監聽的需求，可以直接拿過來用，非常強大！
本文例子已經全部上傳到GitHub，大家可以拿下來做個參考：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Engineering/tapable-usage
tapable是什么
tapable是webpack的核心模塊，也是webpack團隊維護的，是webpack plugin的基本實現方式。他的主要功能是為使用者提供強大的hook機制，webpack plugin就是基於hook的。
主要API
下面是官方文檔中列出來的主要API，所有API的名字都是以Hook結尾的：
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
這些API的名字其實就解釋了他的作用，注意這些關鍵字：Sync, Async, Bail, Waterfall, Loop, Parallel, Series。下面分別來解釋下這些關鍵字：
Sync：這是一個同步的hook
Async：這是一個異步的hook
Bail：Bail在英文中的意思是保險，保障的意思，實現的效果是，當一個hook注冊了多個回調方法，任意一個回調方法返回了不為undefined的值，就不再執行后面的回調方法了，就起到了一個“保險絲”的作用。
Waterfall：Waterfall在英語中是瀑布的意思，在編程世界中表示順序執行各種任務，在這里實現的效果是，當一個hook注冊了多個回調方法，前一個回調執行完了才會執行下一個回調，而前一個回調的執行結果會作為參數傳給下一個回調函數。
Loop：Loop就是循環的意思，實現的效果是，當一個hook注冊了回調方法，如果這個回調方法返回了true就重復循環這個回調，只有當這個回調返回undefined才執行下一個回調。
Parallel：Parallel是並行的意思，有點類似於Promise.all，就是當一個hook注冊了多個回調方法，這些回調同時開始並行執行。
Series：Series就是串行的意思，就是當一個hook注冊了多個回調方法，前一個執行完了才會執行下一個。
Parallel和Series的概念只存在於異步的hook中，因為同步hook全部是串行的。
下面我們分別來介紹下每個API的用法和效果。
同步API
同步API就是這幾個：
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
} = require("tapable");
前面說了，同步API全部是串行的，所以這幾個的區別就在流程控制上。
SyncHook
SyncHook是一個最基礎的hook，其使用方法和效果接近我們經常使用的發布訂閱模式，注意tapable導出的所有hook都是類，基本用法是這樣的：
const hook = new SyncHook(["arg1", "arg2", "arg3"]);
因為SyncHook是一個類，所以使用new來生成一個實例，構造函數接收的參數是一個數組["arg1", "arg2", "arg3"]，這個數組有三項，表示生成的這個實例注冊回調的時候接收三個參數。實例hook主要有兩個實例方法：
tap：就是注冊事件回調的方法。call：就是觸發事件，執行回調的方法。
下面我們擴展下官方文檔中小汽車加速的例子來說明下具體用法：
const { SyncHook } = require("tapable");
// 實例化一個加速的hook
const accelerate = new SyncHook(["newSpeed"]);
// 注冊第一個回調，加速時記錄下當前速度
accelerate.tap("LoggerPlugin", (newSpeed) =>
console.log("LoggerPlugin", `加速到${newSpeed}`)
);
// 再注冊一個回調，用來檢測是否超速
accelerate.tap("OverspeedPlugin", (newSpeed) => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
});
// 再注冊一個回調，用來檢測速度是否快到損壞車子了
accelerate.tap("DamagePlugin", (newSpeed) => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
});
// 觸發一下加速事件，看看效果吧
accelerate.call(500);
然后運行下看看吧，當加速事件出現的時候，會依次執行這三個回調：
上面這個例子主要就是用了tap和call這兩個實例方法，其中tap接收兩個參數，第一個是個字符串，並沒有實際用處，僅僅是一個注釋的作用，第二個參數就是一個回調函數，用來執行事件觸發時的具體邏輯。
accelerate.tap("LoggerPlugin", (newSpeed) =>
console.log("LoggerPlugin", `加速到${newSpeed}`)
);
上述這種寫法其實與webpack官方文檔中對於plugin的介紹非常像了，因為webpack的plguin就是用tapable實現的，第一個參數一般就是plugin的名字：
而call就是簡單的觸發這個事件，在webpack的plguin中一般不需要開發者去觸發事件，而是webpack自己在不同階段會觸發不同的事件，比如beforeRun, run等等，plguin開發者更多的會關注這些事件出現時應該進行什么操作，也就是在這些事件上注冊自己的回調。
SyncBailHook
上面的SyncHook其實就是一個簡單的發布訂閱模式，SyncBailHook就是在這個基礎上加了一點流程控制，前面我們說過了，Bail就是個保險，實現的效果是，前面一個回調返回一個不為undefined的值，就中斷這個流程。比如我們現在將前面這個例子的SyncHook換成SyncBailHook，然后在檢測超速的這個插件里面加點邏輯，當它超速了就返回錯誤，后面的DamagePlugin就不會執行了：
const { SyncBailHook } = require("tapable"); // 使用的是SyncBailHook
// 實例化一個加速的hook
const accelerate = new SyncBailHook(["newSpeed"]);
accelerate.tap("LoggerPlugin", (newSpeed) =>
console.log("LoggerPlugin", `加速到${newSpeed}`)
);
// 再注冊一個回調，用來檢測是否超速
// 如果超速就返回一個錯誤
accelerate.tap("OverspeedPlugin", (newSpeed) => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
return new Error('您已超速！！');
}
});
accelerate.tap("DamagePlugin", (newSpeed) => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
});
accelerate.call(500);
然后再運行下看看：
可以看到由於OverspeedPlugin返回了一個不為undefined的值，DamagePlugin被阻斷，沒有運行了。
SyncWaterfallHook
SyncWaterfallHook也是在SyncHook的基礎上加了點流程控制，前面說了，Waterfall實現的效果是將上一個回調的返回值作為參數傳給下一個回調。所以通過call傳入的參數只會傳遞給第一個回調函數，后面的回調接受都是上一個回調的返回值，最后一個回調的返回值會作為call的返回值返回給最外層：
const { SyncWaterfallHook } = require("tapable");
const accelerate = new SyncWaterfallHook(["newSpeed"]);
accelerate.tap("LoggerPlugin", (newSpeed) => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
return "LoggerPlugin";
});
accelerate.tap("Plugin2", (data) => {
console.log(`上一個插件是: ${data}`);
return "Plugin2";
});
accelerate.tap("Plugin3", (data) => {
console.log(`上一個插件是: ${data}`);
return "Plugin3";
});
const lastPlugin = accelerate.call(100);
console.log(`最后一個插件是：${lastPlugin}`);
然后看下運行效果吧：
SyncLoopHook
SyncLoopHook是在SyncHook的基礎上添加了循環的邏輯，也就是如果一個插件返回true就會一直執行這個插件，直到他返回undefined才會執行下一個插件：
const { SyncLoopHook } = require("tapable");
const accelerate = new SyncLoopHook(["newSpeed"]);
accelerate.tap("LoopPlugin", (newSpeed) => {
console.log("LoopPlugin", `循環加速到${newSpeed}`);
return new Date().getTime() % 5 !== 0 ? true : undefined;
});
accelerate.tap("LastPlugin", (newSpeed) => {
console.log("循環加速總算結束了");
});
accelerate.call(100);
執行效果如下：
異步API
所謂異步API是相對前面的同步API來說的，前面的同步API的所有回調都是按照順序同步執行的，每個回調內部也全部是同步代碼。但是實際項目中，可能需要回調里面處理異步情況，也可能希望多個回調可以同時並行執行，也就是Parallel。這些需求就需要用到異步API了，主要的異步API就是這些：
const {
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
既然涉及到了異步，那肯定還需要異步的處理方式，tapable支持回調函數和Promise兩種異步的處理方式。所以這些異步API除了用前面的tap來注冊回調外，還有兩個注冊回調的方法：tapAsync和tapPromise，對應的觸發事件的方法為callAsync和promise。下面分別來看下每個API吧：
AsyncParallelHook
AsyncParallelHook從前面介紹的命名規則可以看出，他是一個異步並行執行的Hook，我們先用tapAsync的方式來看下怎么用吧。
tapAsync和callAsync
還是那個小汽車加速的例子，只不過這個小汽車加速沒那么快了，需要一秒才能加速完成，然后我們在2秒的時候分別檢測是否超速和是否損壞，為了看出並行的效果，我們記錄下整個過程從開始到結束的時間：
const { AsyncParallelHook } = require("tapable");
const accelerate = new AsyncParallelHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
// 注意注冊異步事件需要使用tapAsync
// 接收的最后一個參數是done，調用他來表示當前任務執行完畢
accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
done();
}, 1000);
});
accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
// 2秒后檢測是否超速
setTimeout(() => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
done();
}, 2000);
});
accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
// 2秒后檢測是否損壞
setTimeout(() => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
done();
}, 2000);
});
accelerate.callAsync(500, () => {
console.log("任務全部完成");
console.timeEnd("total time"); // 記錄總共耗時
});
上面代碼需要注意的是，注冊回調要使用tapAsync，而且回調函數里面最后一個參數會自動傳入done，你可以調用他來通知tapable當前任務已經完成。觸發任務需要使用callAsync，他最后也接收一個函數，可以用來處理所有任務都完成后需要執行的操作。所以上面的運行結果就是：
從這個結果可以看出，最終消耗的時間大概是2秒，也就是三個任務中最長的單個任務耗時，而不是三個任務耗時的總額，這就實現了Parallel並行的效果。
tapPromise和promise
現在都流行Promise，所以tapable也是支持的，執行效果是一樣的，只是寫法不一樣而已。要用tapPromise，需要注冊的回調返回一個promise，同時觸發事件也需要用promise，任務運行完執行的處理可以直接使用then，所以上述代碼改為：
const { AsyncParallelHook } = require("tapable");
const accelerate = new AsyncParallelHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
// 注意注冊異步事件需要使用tapPromise
// 回調函數要返回一個promise
accelerate.tapPromise("LoggerPlugin", (newSpeed) => {
return new Promise((resolve) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
resolve();
}, 1000);
});
});
accelerate.tapPromise("OverspeedPlugin", (newSpeed) => {
return new Promise((resolve) => {
// 2秒后檢測是否超速
setTimeout(() => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
resolve();
}, 2000);
});
});
accelerate.tapPromise("DamagePlugin", (newSpeed) => {
return new Promise((resolve) => {
// 2秒后檢測是否損壞
setTimeout(() => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
resolve();
}, 2000);
});
});
// 觸發事件使用promise，直接用then處理最后的結果
accelerate.promise(500).then(() => {
console.log("任務全部完成");
console.timeEnd("total time"); // 記錄總共耗時
});
這段代碼的邏輯和運行結果和上面那個是一樣的，只是寫法不一樣：
tapAsync和tapPromise混用
既然tapable支持這兩種異步寫法，那這兩種寫法可以混用嗎？我們來試試吧：
const { AsyncParallelHook } = require("tapable");
const accelerate = new AsyncParallelHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
// 來一個promise寫法
accelerate.tapPromise("LoggerPlugin", (newSpeed) => {
return new Promise((resolve) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
resolve();
}, 1000);
});
});
// 再來一個async寫法
accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
// 2秒后檢測是否超速
setTimeout(() => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
done();
}, 2000);
});
// 使用promise觸發事件
// accelerate.promise(500).then(() => {
// console.log("任務全部完成");
// console.timeEnd("total time"); // 記錄總共耗時
// });
// 使用callAsync觸發事件
accelerate.callAsync(500, () => {
console.log("任務全部完成");
console.timeEnd("total time"); // 記錄總共耗時
});
這段代碼無論我是使用promise觸發事件還是callAsync觸發運行的結果都是一樣的，所以tapable內部應該是做了兼容轉換的，兩種寫法可以混用：
由於tapAsync和tapPromise只是寫法上的不一樣，我后面的例子就全部用tapAsync了。
AsyncParallelBailHook
前面已經看了SyncBailHook，知道帶Bail的功能就是當一個任務返回不為undefined的時候，阻斷后面任務的執行。但是由於Parallel任務都是同時開始的，阻斷是阻斷不了了，實際效果是如果有一個任務返回了不為undefined的值，最終的回調會立即執行，並且獲取Bail任務的返回值。我們將上面三個任務執行時間錯開，分別為1秒，2秒，3秒，然后在2秒的任務觸發Bail就能看到效果了：
const { AsyncParallelBailHook } = require("tapable");
const accelerate = new AsyncParallelBailHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
done();
}, 1000);
});
accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
// 2秒后檢測是否超速
setTimeout(() => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
// 這個任務的done返回一個錯誤
// 注意第一個參數是node回調約定俗成的錯誤
// 第二個參數才是Bail的返回值
done(null, new Error("您已超速！！"));
}, 2000);
});
accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
// 3秒后檢測是否損壞
setTimeout(() => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
done();
}, 3000);
});
accelerate.callAsync(500, (error, data) => {
if (data) {
console.log("任務執行出錯：", data);
} else {
console.log("任務全部完成");
}
console.timeEnd("total time"); // 記錄總共耗時
});
可以看到執行到任務2時，由於他返回了一個錯誤，所以最終的回調會立即執行，但是由於任務3之前已經同步開始了，所以他自己仍然會運行完，只是已經不影響最終結果了：
AsyncSeriesHook
AsyncSeriesHook是異步串行hook，如果有多個任務，這多個任務之間是串行的，但是任務本身卻可能是異步的，下一個任務必須等上一個任務done了才能開始：
const { AsyncSeriesHook } = require("tapable");
const accelerate = new AsyncSeriesHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
done();
}, 1000);
});
accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
// 2秒后檢測是否超速
setTimeout(() => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
done();
}, 2000);
});
accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
// 2秒后檢測是否損壞
setTimeout(() => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
done();
}, 2000);
});
accelerate.callAsync(500, () => {
console.log("任務全部完成");
console.timeEnd("total time"); // 記錄總共耗時
});
每個任務代碼跟AsyncParallelHook是一樣的，只是使用的Hook不一樣，而最終效果的區別是：AsyncParallelHook所有任務同時開始，所以最終總耗時就是耗時最長的那個任務的耗時；AsyncSeriesHook的任務串行執行，下一個任務要等上一個任務完成了才能開始，所以最終總耗時是所有任務耗時的總和，上面這個例子就是1 + 2 + 2，也就是5秒：
AsyncSeriesBailHook
AsyncSeriesBailHook就是在AsyncSeriesHook的基礎上加上了Bail的邏輯，也就是中間任何一個任務返回不為undefined的值，終止執行，直接執行最后的回調，並且將這個返回值傳給最終的回調：
const { AsyncSeriesBailHook } = require("tapable");
const accelerate = new AsyncSeriesBailHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
done();
}, 1000);
});
accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
// 2秒后檢測是否超速
setTimeout(() => {
if (newSpeed > 120) {
console.log("OverspeedPlugin", "您已超速！！");
}
// 這個任務的done返回一個錯誤
// 注意第一個參數是node回調約定俗成的錯誤
// 第二個參數才是Bail的返回值
done(null, new Error("您已超速！！"));
}, 2000);
});
accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
// 2秒后檢測是否損壞
setTimeout(() => {
if (newSpeed > 300) {
console.log("DamagePlugin", "速度實在太快，車子快散架了。。。");
}
done();
}, 2000);
});
accelerate.callAsync(500, (error, data) => {
if (data) {
console.log("任務執行出錯：", data);
} else {
console.log("任務全部完成");
}
console.timeEnd("total time"); // 記錄總共耗時
});
這個執行結果跟AsyncParallelBailHook的區別就是AsyncSeriesBailHook被阻斷后，后面的任務由於還沒開始，所以可以被完全阻斷，而AsyncParallelBailHook后面的任務由於已經開始了，所以還會繼續執行，只是結果已經不關心了。
AsyncSeriesWaterfallHook
Waterfall的作用是將前一個任務的結果傳給下一個任務，其他的跟AsyncSeriesHook一樣的，直接來看代碼吧：
const { AsyncSeriesWaterfallHook } = require("tapable");
const accelerate = new AsyncSeriesWaterfallHook(["newSpeed"]);
console.time("total time"); // 記錄起始時間
accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
// 1秒后加速才完成
setTimeout(() => {
console.log("LoggerPlugin", `加速到${newSpeed}`);
// 注意done的第一個參數會被當做error
// 第二個參數才是傳遞給后面任務的參數
done(null, "LoggerPlugin");
}, 1000);
});
accelerate.tapAsync("Plugin2", (data, done) => {
setTimeout(() => {
console.log(`上一個插件是: ${data}`);
done(null, "Plugin2");
}, 2000);
});
accelerate.tapAsync("Plugin3", (data, done) => {
setTimeout(() => {
console.log(`上一個插件是: ${data}`);
done(null, "Plugin3");
}, 2000);
});
accelerate.callAsync(500, (error, data) => {
console.log("最后一個插件是:", data);
console.timeEnd("total time"); // 記錄總共耗時
});
運行效果如下：
總結
本文例子已經全部上傳到GitHub，大家可以拿下來做個參考：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Engineering/tapable-usage
tapable是webpack實現plugin的核心庫，他為webpack提供了多種事件處理和流程控制的Hook。- 這些
Hook主要有同步(Sync)和異步(Async)兩種，同時還提供了阻斷(Bail)，瀑布(Waterfall)，循環(Loop)等流程控制，對於異步流程還提供了並行(Paralle)和串行(Series)兩種控制方式。 tapable其核心原理還是事件的發布訂閱模式，他使用tap來注冊事件，使用call來觸發事件。- 異步
hook支持兩種寫法：回調和Promise，注冊和觸發事件分別使用tapAsync/callAsync和tapPromise/promise。 - 異步
hook使用回調寫法的時候要注意，回調函數的第一個參數默認是錯誤，第二個參數才是向外傳遞的數據，這也符合node回調的風格。
文章的最后，感謝你花費寶貴的時間閱讀本文，如果本文給了你一點點幫助或者啟發，請不要吝嗇你的贊和GitHub小星星，你的支持是作者持續創作的動力。
歡迎關注我的公眾號進擊的大前端第一時間獲取高質量原創~
“前端進階知識”系列文章：https://juejin.im/post/5e3ffc85518825494e2772fd
“前端進階知識”系列文章源碼GitHub地址： https://github.com/dennis-jiang/Front-End-Knowledges
