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