tapable 創建鉤子

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 一樣，不同的是他會把異步鉤子並行執行 (並行執行就是把異步鉤子全部一起開啓，不按順序執行)。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Bpb1vevY3udAmGuwe2BX_A