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 实现原理
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章