webpackTapable

const {SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeriesHook,AsyncSeriesBailHook,AsyncSeriesWaterfallHook} &＃61; require("tapable");


用法

All Hook constructors take one optional argument, which is a list of argument names as strings.

class Car {constructor() {this.hooks &＃61; {accelerate: new SyncHook(["newSpeed"]),brake: new SyncHook(),calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])}}
}const muCar &＃61; new Car()
//注册监听
//同步钩子
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed &＃61;> console.log(&＃96;Accelerating to ${newSpeed}&＃96;));
myCar.hooks.brake.tap("WarningLampPlugin", () &＃61;> warningLamp.on());
//异步钩子
myCar.hooks.calculateRoutes.tapPromise("GoogleMapsPlugin", (source, target, routesList) &＃61;> {return google.maps.findRoute(source, target).then(route &＃61;> {routesList.add(route);});
});


钩子注册&＃xff08;钩入&＃xff09;方式

1. 同步
   • tap
2. 异步
   • tap
   • tapPromise
   • tapAsync

Hooks type

每个钩子都能监听一个或多个函数&＃xff0c;函数如何执行取决于钩子的类型

• hook 基础钩子
• bail hook 只要有一个handler有返回值&＃xff0c;剩下handler不执行
• waterfall hook 上一个handler的返回值当做下一个handler的入参
• loop hook 循环 只要钩子有返回值&＃xff0c;不停loop
• sync hook 同步
• async hook 异步
• Async series 异步串行
• Async parallel 异步并行

拦截器

每个钩子都有拦截器&＃xff0c;每个拦截器接收call,tap,register,loop,context五个属性

const {SyncLoopHook,
} &＃61; require("../lib/index")class Test {constructor(){this.hooks &＃61; {test: new SyncLoopHook(["name"]),};}
}const objTest &＃61; new Test()
objTest.hooks.test.intercept({//当钩子使用call调用call: (name) &＃61;> {console.log("call");},//当插件进入钩子的时候调用(注册),Tap对象无法更改tap: (Tap) &＃61;> {console.log("tap");},//当钩子循环的时候调用loop: (name)&＃61;>{console.log(&＃39;loop&＃39;);},//钩子使用tap调用&＃xff0c;并且可以修改Tap对象register: (Tap) &＃61;> {console.log("register");},
});
objTest.hooks.test.tap(&＃39;testPlugin&＃39;,(name)&＃61;>{console.log(name);
})
objTest.hooks.test.call(&＃39;test&＃39;)//输出结果如下
register
call
loop
tap
test//Tap对象结构
interface Tap {name: string,type: stringfn: Function,stage: number,context: boolean,before?: string | Array
}


webpack中如何使用Tapable

1. hooks均继承自hook(lib/Hook.js)

2. Tap tapAsync tappromise会把handler丢入到数组中。

3. call callAsync promise会按照相应的顺序去执行数组中的handler

   //以SyncHook为例 精简版
lass SyncHookCodeFactory extends HookCodeFactory {content({ onError, onDone, rethrowIfPossible }) {return this.callTapsSeries({onError: (i, err) &＃61;> onError(err),onDone,rethrowIfPossible});}
}const factory &＃61; new SyncHookCodeFactory();
const COMPILE &＃61; function(options) {factory.setup(this, options);return factory.create(options);
};


   1. call 、callAsync、promise最终会调用每个hook的COMPILE方法

   2. COMPILE方法会实例化继承自HookCodeFactory的相应类并调用HookCodeFactory的create方法

      • create方法用new Function(‘a’,‘b’,‘return a&＃43;b’)方式去创建每个handler的执行函数字符串

        问&＃xff1a;为啥用new Function去创建函数&＃xff1f;

        答&＃xff1a;函数入参和函数体会根据入参的长度而动态生成&＃xff0c;这样你可以根据实际情况来控制传入参数的个数&＃xff0c;并且函数也只处理这几个入参。

参考

1. Tapable readme
2. 掘金-雾豹-深入源码解析 tapable 实现原理