tapable是webpack中的核心库,搞定它对理解webpack有很大的帮助。今天我们来看看tapable是一个啥东东。

首先我们可以通过npm install --save tapable将它下载下来,便于后续的学习调试和查看源代码。

tapable里面主要的实现是基于观察者模式,可以订阅/发布,但是有很多的执行机制,我们可以先来看看包含的主要钩子:

这些钩子主要分为同步和异步,异步又分并行和串行。

SyncHook

SyncHook为同步执行,按照顺序执行注册的方法:

上面代码中,new SyncHook新建了一个同步执行的数组,通过tap方法往内部加入方法,通过call方法执行内部所有的方法。

new SyncHook中的参数(name,age)表示加入数组方法的参数,我们可以看到tap的第二个参数(加入的方法)中的方法参数都是name和age。参数在执行call方法的时候赋值。

tap中的第一个参数没什么具体的作用,相当于注解。

SyncBailHook

SyncBailHook也是同步执行,但是如果执行的时候遇到了一个不为空的返回,则不会继续执行:

上面的第二个方法返回了true,不是undefined,因此中断执行。

SyncWaterfallHook

SyncWaterfallHook是同步执行,除了第一个方法外,后面方法的参数都来自前面方法的返回结果:

我们可以看到,最后一个方法返回的结果就是最终的结果。

SyncLoopHook

SyncLoopHook是同步执行,如果一个方法返回的是undefined,那么继续执行下一个;如果返回的不是undefined,将从头开始再执行一次(之前执行过的也会重复执行):

我们可以看到,第一个方法应该是能立马通过的,但是却执行了3次,这是因为第二个方法卡住了之后,会从头执行。

AsyncParallelHook

AsyncParallelHook表示异步并行执行,可以通过tapAsync添加,callAsync触发;也可通过tapPromise添加,promise触发(tap/call属于同步,这里用不了),我们先看看tapAsync/callAsync版的:

上面的异步都是定时1秒钟,结果是同时输出内容,表示异步是同时被触发的,因此同时执行完毕。

在来看一个promise版本的:

上面promise版的,如果中途有reject并不会中断剩下的执行,而是外部捕捉到错误。

AsyncSeriesHook

AsyncSeriesHook表示异步串行,先来看个tapAsync/callAsync版的:

两个异步都是1秒钟,结果是第一个先输出,第二个隔了1秒钟输出。如果想直接中断输出的话,可以在next中传入参数。

再来看个promise版:

注意这里如果promise执行了reject,会中断后续的输入。

还有几个异步的情况和之前同步的类似,这里就不重复说了,不过注意AsyncSeriesLoopHook钩子虽然源代码里面有,但是并没有公布出来,因此无法使用。

拦截器(interception)

拦截器是在钩子执行之前的方法,主要分为call,tap,loop,register,含义如下:

call:(...args) => void当你的钩子触发之前,(就是call()之前),就会触发这个函数,你可以访问钩子的参数.多个钩子执行一次

tap: (tap: Tap) => void 每个钩子执行之前(多个钩子执行多个),就会触发这个函数

loop:(...args) => void 这个在每一次循环的时候触发。

register:(tap: Tap) => 每添加一个Tap都会触发 .可以得到注册的方法,注意需要返回才可以正常执行。

看个demo感受下:

Context(上下文)

可以设置context让插件或拦截器获得自定义内容:

HookMap

HookMap是Hooks的帮助类,定义一个生成Hook的工厂(factory),如果相同的key得到同一个Hook:

MultiHook

MultiHook提供一种数组形式的Hook处理方式:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字