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);
    });
  }
}