webpack原理系列-tapable用法(SyncWaterfallHook篇)

SyncWaterfallHook

• 上一個函數的返回值做爲下一個函數的接受參數

  代碼以下

  const { SyncWaterfallHook } = require('tapable');
     let WaterfallHook = new SyncWaterfallHook(["name"]);
     WaterfallHook.tap("a", function (name) {
         console.log(name, 'a');
      return "tab1";
     });
     WaterfallHook.tap("b", function (data) {
       console.log(data, 'b');
       return "tab2";
     });
     WaterfallHook.tap("c", function (data) {
       console.log(data, 'c');
     });
     WaterfallHook.call("測試");

打印結果：

測試 a
tab1 b
tab2 c

SyncWaterfallHook 實現原理

 就是一個類，記住一點，tapable全部的鉤子都是基於發佈訂閱模式實現的。

class SyncWaterfallHook {
  constructor() {
    this.hooks = [];
  }
  tap(name, fn) {
    this.hooks.push(fn);
  }
  call() {
    let result;
    this.hooks.forEach((hook, index) => {
      result = index === 0 ? hook(...arguments) : hook(result);
    });
  }
}