webpack Tapable

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

用法

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

class Car {
	constructor() {
		this.hooks = {
			accelerate: new SyncHook(["newSpeed"]),
			brake: new SyncHook(),
			calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
		}
	}
}

const muCar = new Car()
//註冊監聽
//同步鉤子
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
myCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());
//異步鉤子
myCar.hooks.calculateRoutes.tapPromise("GoogleMapsPlugin", (source, target, routesList) => {
	return google.maps.findRoute(source, target).then(route => {
		routesList.add(route);
	});
});

鉤子註冊（鉤入）方式

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

Hooks type

每個鉤子都能監聽一個或多個函數，函數如何執行取決於鉤子的類型

• hook 基礎鉤子
• bail hook 只要有一個handler有返回值，剩下handler不執行
• waterfall hook 上一個handler的返回值當做下一個handler的入參
• loop hook 循環 只要鉤子有返回值，不停loop
• sync hook 同步
• async hook 異步
• Async series 異步串行
• Async parallel 異步並行

攔截器

每個鉤子都有攔截器，每個攔截器接收call,tap,register,loop,context五個屬性

const {
	SyncLoopHook,
}  = require("../lib/index")

class Test {
	constructor(){
		this.hooks = {
			test: new SyncLoopHook(["name"]),
		};
	}
}

const objTest = new Test()
objTest.hooks.test.intercept({
  //當鉤子使用call調用
	call: (name) => {
		console.log("call");
	},
  //當插件進入鉤子的時候調用(註冊),Tap對象無法更改
	tap: (Tap) => {
		console.log("tap");
	},
  //當鉤子循環的時候調用
	loop: (name)=>{
		console.log('loop');
	},
  //鉤子使用tap調用，並且可以修改Tap對象
	register: (Tap) => {
		console.log("register");
	},
});
objTest.hooks.test.tap('testPlugin',(name)=>{
	console.log(name);
})
objTest.hooks.test.call('test')

//輸出結果如下
register
call
loop
tap
test

//Tap對象結構
interface Tap {
	name: string,
	type: string
	fn: Function,
	stage: number,
	context: boolean,
	before?: string | Array
}

參考

1. Tapable readme
2. 掘金-霧豹-深入源碼解析 tapable 實現原理