一文先容 Tapable 的特性和使用，助力明确 webpack 插件架构！ ...

一、引言

众所周知，webpack 的 plugins 非常机动，可以在编译的差别阶段注册事件回调，这个功能便是基于 Tapable 实现的。
Tapable 的使用步骤如下：

• 创建钩子实例，如 SyncHook、SyncLoopHook 钩子;
  
• 调用订阅接口注册事件回调，包括 tap、tapAsync、tapPromise;
  
• 触发回调，包括 call、callAsync、promise。
  

Tapable 的钩子分为同步钩子和异步钩子，同步钩子都以 Sync 开头，通过 tap 注册回调，使用 call 触发回调。异步钩子则以 Async 开头，通过 tapAsync 和 callAsync，或者 tapPromise 和 promise 来注册和触发回调。
接下来便是各个钩子的先容和用法。
二、同步钩子

SyncHook

SyncHook 是一个基础的钩子。通过该钩子注册的事件会依次实行。

1. const { SyncHook } = require('tapable')
3. // 实例化钩子函数，可以在这里定义形参
4. const syncHook = new SyncHook(['author', 'age'])
6. syncHook.intercept({
7.   // 每次调用 hook 实例的 tap() 方法注册回调函数时, 都会调用该方法,
8.   // 并且接受 tap 作为参数, 还可以对 tap 进行修改;
9.   register: (tapInfo) => {
10.     console.log(`${tapInfo.name} is doing its job`)
11.     return tapInfo // may return a new tapInfo object
12.   },
13.   // 通过hook实例对象上的call方法时候触发拦截器
14.   call: (arg1, arg2, arg3) => {
15.     console.log('Starting to calculate routes')
16.   },
17.   // 在调用被注册的每一个事件回调之前执行
18.   tap: (tap) => {
19.     console.log(tap, 'tap')
20.   },
21.   // loop类型钩子中 每个事件回调被调用前触发该拦截器方法
22.   loop: (...args) => {
23.     console.log(args, 'loop')
24.   },
25. })
27. // 注册事件
28. syncHook.tap('监听器1', (name, age) => {
29.   console.log('监听器1：', name, age)
30. })
32. syncHook.tap('监听器2', (name) => {
33.   console.log('监听器2：', name)
34. })
36. syncHook.tap('监听器3', (name, age) => {
37.   console.log('监听器3：', name, age)
38. })
40. // 触发事件，这里传的是实参，会被每一个注册的函数接收到
41. syncHook.call('wade', '25')
43. // 执行结果
44. /**
45. 监听器1 is doing its job
46. 监听器2 is doing its job
47. 监听器3 is doing its job
48. Starting to calculate routes
49. { type: 'sync', fn: [Function (anonymous)], name: '监听器1' } tap
50. 监听器1： wade 25
51. { type: 'sync', fn: [Function (anonymous)], name: '监听器2' } tap
52. 监听器2： wade
53. { type: 'sync', fn: [Function (anonymous)], name: '监听器3' } tap
54. 监听器3： wade 25
55. */

复制代码

SyncBailHook

SyncBailHook 是一个具有熔断风格的钩子。只要其中一个事件回调有返回值，后面的事件回调就不实行了。

1. const { SyncBailHook } = require('tapable')
3. const hook = new SyncBailHook(['author', 'age'])
5. hook.tap('测试1', (name, age) => {
6.   console.log('测试1接收参数：', name, age)
7. })
9. hook.tap('测试2', (name, age) => {
10.   console.log('测试2接收参数：', name, age)
11.   return 'outer'
12. })
14. hook.tap('测试3', (name, age) => {
15.   console.log('测试3接收参数：', name, age)
16. })
18. hook.call('wade', '25')
20. // 执行结果
21. /**
22. 测试1接收参数： wade 25
23. 测试2接收参数： wade 25
24. */

复制代码

第二个事件返回了 outer，因此第三个事件不会触发。
SyncLoopHook

SyncLoopHook 是一个循环范例的钩子。循环范例的含义是不绝的循环实行事件回调，直到所有函数结果 result === undefined，不符合条件就返回从第一个事件回调开始实行。

1. const { SyncLoopHook } = require('tapable')
3. const hook = new SyncLoopHook([])
5. let count = 5
7. hook.tap('测试1', () => {
8.   console.log('测试1里面的count：', count)
9.   if ([1, 2, 3].includes(count)) {
10.     return undefined
11.   } else {
12.     count--
13.     return '123'
14.   }
15. })
17. hook.tap('测试2', () => {
18.   console.log('测试2里面的count：', count)
19.   if ([1, 2].includes(count)) {
20.     return undefined
21.   } else {
22.     count--
23.     return '123'
24.   }
25. })
27. hook.tap('测试3', () => {
28.   console.log('测试3里面的count：', count)
29.   if ([1].includes(count)) {
30.     return undefined
31.   } else {
32.     count--
33.     return '123'
34.   }
35. })
37. //通过call方法触发事件
38. hook.call()
40. // 执行结果
41. /**
42. 测试1里面的count： 5
43. 测试1里面的count： 4
44. 测试1里面的count： 3
45. 测试2里面的count： 3
47. 测试1里面的count： 2
48. 测试2里面的count： 2
49. 测试3里面的count： 2
51. 测试1里面的count： 1
52. 测试2里面的count： 1
53. 测试3里面的count： 1
54. */

复制代码

SyncWaterfallHook

SyncWaterfallHook 是一个瀑布式范例的钩子。瀑布范例的钩子就是如果前一个事件回调的结果 result !== undefined，则 result 会作为后一个事件回调的第一个参数（也就是上一个函数的实行结果会成为下一个函数的参数）。

1. const { SyncWaterfallHook } = require('tapable')
3. const hook = new SyncWaterfallHook(['author', 'age'])
5. hook.tap('测试1', (name, age) => {
6.   console.log('测试1接收参数：', name, age)
7. })
9. hook.tap('测试2', (name, age) => {
10.   console.log('测试2接收参数：', name, age)
11.   return '另外的名字'
12. })
14. hook.tap('测试3', (name, age) => {
15.   console.log('测试3接收参数：', name, age)
16. })
18. hook.call('wade', '25')
20. // 执行结果
21. /**
22. 测试1接收参数： wade 25
23. 测试2接收参数： wade 25
24. 测试3接收参数： 另外的名字 25
25. */

复制代码

三、异步钩子

异步钩子需要通过 tapAsync 函数注册事件，同时也会多一个 callback 参数，实行 callback 告诉 该注册事件已经实行完成。callback 函数可以传递两个参数** err** 和 result，一旦 err 不为空，则后续的事件回调都不再实行。异步钩子触发事件需要使用 callAsync。
AsyncSeriesHook

AsyncSeriesHook 是一个串行的钩子。

1. const { AsyncSeriesHook } = require('tapable')
3. const hook = new AsyncSeriesHook(['author', 'age']) // 先实例化，并定义回调函数的形参
5. console.time('time')
7. hook.tapAsync('测试1', (param1, param2, callback) => {
8.   console.log('测试1接收的参数：', param1, param2)
9.   setTimeout(() => {
10.     callback()
11.   }, 1000)
12. })
14. hook.tapAsync('测试2', (param1, param2, callback) => {
15.   console.log('测试2接收的参数：', param1, param2)
16.   setTimeout(() => {
17.     callback()
18.   }, 2000)
19. })
21. hook.tapAsync('测试3', (param1, param2, callback) => {
22.   console.log('测试3接收的参数：', param1, param2)
23.   setTimeout(() => {
24.     callback()
25.   }, 3000)
26. })
28. hook.callAsync('wade', '25', (err, result) => {
29.   // 等全部都完成了才会走到这里来
30.   console.log('这是成功后的回调', err, result)
31.   console.timeEnd('time')
32. })
34. // 执行结果
35. /**
36. 测试1接收的参数： wade 25
37. 测试2接收的参数： wade 25
38. 测试3接收的参数： wade 25
39. 这是成功后的回调 undefined undefined
40. time: 6.032
41. */

复制代码

AsyncSeriesBailHook

AsyncSeriesBailHook 是一个串行、熔断范例的钩子。一旦 callback 函数传递了参数，则不再实行后续的事件回调。

1. const { AsyncSeriesBailHook } = require('tapable')
3. const hook = new AsyncSeriesBailHook(['author', 'age'])
5. console.time('time')
7. hook.tapAsync('测试1', (param1, param2, callback) => {
8.   console.log('测试1接收的参数：', param1, param2)
9.   setTimeout(() => {
10.     callback()
11.   }, 1000)
12. })
14. hook.tapAsync('测试2', (param1, param2, callback) => {
15.   console.log('测试2接收的参数：', param1, param2)
16.   setTimeout(() => {
17.     callback(false, '123')
18.   }, 2000)
19. })
21. hook.tapAsync('测试3', (param1, param2, callback) => {
22.   console.log('测试3接收的参数：', param1, param2)
23.   setTimeout(() => {
24.     callback()
25.   }, 3000)
26. })
28. hook.callAsync('wade', '25', (err, result) => {
29.   // 等全部都完成了才会走到这里来
30.   console.log('这是成功后的回调', err, result)
31.   console.timeEnd('time')
32. })
34. // 执行结果
35. /**
36. 测试1接收的参数： wade 25
37. 测试2接收的参数： wade 25
38. 这是成功后的回调 null 123
39. time: 3.013s
40. */

复制代码

AsyncSeriesWaterfallHook

AsyncSeriesWaterfallHook 是一个串行、瀑布式范例的钩子。如果前一个事件回调的 callback 的参数 result !== undefined，则 result 会作为后一个事件回调的第一个参数（也就是上一个函数的实行结果会成为下一个函数的参数）。

1. const { AsyncSeriesHook } = require('tapable')
3. const hook = new AsyncSeriesHook(['author', 'age'])
5. console.time('time')
7. hook.tapAsync('测试1', (param1, param2, callback) => {
8.   console.log('测试1接收的参数：', param1, param2)
9.   setTimeout(() => {
10.     callback()
11.   }, 1000)
12. })
14. hook.tapAsync('测试2', (param1, param2, callback) => {
15.   console.log('测试2接收的参数：', param1, param2)
16.   setTimeout(() => {
17.     callback(null, 2441)
18.   }, 2000)
19. })
21. hook.tapAsync('测试3', (param1, param2, callback) => {
22.   console.log('测试3接收的参数：', param1, param2)
23.   setTimeout(() => {
24.     callback()
25.   }, 3000)
26. })
28. hook.callAsync('wade', '25', (err, result) => {
29.   // 等全部都完成了才会走到这里来
30.   console.log('这是成功后的回调', err, result)
31.   console.timeEnd('time')
32. })
34. // 执行结果
35. /**
36. 测试1接收的参数： wade 25
37. 测试2接收的参数： 新名字A 25
38. 测试3接收的参数： 新名字A 25
39. 这是成功后的回调 null 新名字C
40. time: 6.043s
41. */

复制代码

AsyncParallelHook

AsyncParallelHook 是一个并行的钩子。通过这个钩子注册的回调不需要等候上一个事件回调实行竣事便可以实行下一个事件回调。

1. const { AsyncParallelHook } = require('tapable')
3. const hook = new AsyncParallelHook(['author', 'age'])
5. console.time('time')
7. hook.tapAsync('测试1', (param1, param2, callback) => {
8.   setTimeout(() => {
9.     console.log('测试1接收的参数：', param1, param2)
10.     callback()
11.   }, 2000)
12. })
14. hook.tapAsync('测试2', (param1, param2, callback) => {
15.   console.log('测试2接收的参数：', param1, param2)
16.   callback()
17. })
19. hook.tapAsync('测试3', (param1, param2, callback) => {
20.   console.log('测试3接收的参数：', param1, param2)
21.   callback()
22. })
24. // call 方法只有同步钩子才有，异步钩子得使用 callAsync
25. hook.callAsync('wade', '25', (err, result) => {
26.   // 等全部都完成了才会走到这里来
27.   console.log('这是成功后的回调', err, result)
28.   console.timeEnd('time')
29. })
31. // 执行结果
32. /**
33. 测试2接收的参数： wade 25
34. 测试3接收的参数： wade 25
35. 测试1接收的参数： wade 25
36. 这是成功后的回调 undefined undefined
37. time: 2.015s
38. */

复制代码

第一个事件设置了 2 秒的定时器再实行，此时会先实行后续的事件回调，比及 2 秒后再实行第一个事件回调。
AsyncParallelBailHook

AsyncParallelBailHook 是一个串行、熔断范例的钩子。若当前的事件回调的 callback 的参数 result !== undefined，则后续的事件都不再实行。

1. const { AsyncParallelBailHook } = require('tapable')
3. const hook = new AsyncParallelBailHook(['author', 'age'])
5. console.time('time')
7. hook.tapAsync('测试1', (param1, param2, callback) => {
8.   console.log('测试1接收的参数：', param1, param2)
9.   setTimeout(() => {
10.     callback()
11.   }, 1000)
12. })
14. hook.tapAsync('测试2', (param1, param2, callback) => {
15.   console.log('测试2接收的参数：', param1, param2)
16.   callback(null, '测试2有返回值啦')
17. })
19. hook.tapAsync('测试3', (param1, param2, callback) => {
20.   console.log('测试3接收的参数：', param1, param2)
21.   setTimeout(() => {
22.     callback(null, '测试3有返回值啦')
23.   }, 3000)
24. })
26. hook.callAsync('wade', '25', (err, result) => {
27.   // 等全部都完成了才会走到这里来
28.   console.log('这是成功后的回调', err, result)
29.   console.timeEnd('time')
30. })
32. // 执行结果
33. /**
34. 测试1接收的参数： wade 25
35. 测试2接收的参数： wade 25
36. 这是成功后的回调 null 测试2有返回值啦
37. time: 3.015s
38. */

复制代码

由于第二个事件回调有返回值，因此第三个事件回调不会实行。若第一个事件回调也有返回值，尽管是第二个事件回调先实行完成，但是 callAsync 拿到的结果依然是第一个事件回调的返回值，示比方下：

1. const { AsyncParallelBailHook } = require('tapable')
3. const hook = new AsyncParallelBailHook(['author', 'age'])
5. console.time('time')
7. hook.tapAsync('测试1', (param1, param2, callback) => {
8.   console.log('测试1接收的参数：', param1, param2)
9.   setTimeout(() => {
10.     callback(null, '测试1有返回值啦')
11.   }, 3000)
12. })
14. hook.tapAsync('测试2', (param1, param2, callback) => {
15.   console.log('测试2接收的参数：', param1, param2)
16.   callback(null, '测试2有返回值啦')
17. })
19. hook.tapAsync('测试3', (param1, param2, callback) => {
20.   console.log('测试3接收的参数：', param1, param2)
21.   setTimeout(() => {
22.     callback(null, '测试3有返回值啦')
23.   }, 1000)
24. })
26. hook.callAsync('wade', '25', (err, result) => {
27.   // 等全部都完成了才会走到这里来
28.   console.log('这是成功后的回调', err, result)
29.   console.timeEnd('time')
30. })
32. // 执行结果
33. /**
34. 测试1接收的参数： wade 25
35. 测试2接收的参数： wade 25
36. 这是成功后的回调 null 测试1有返回值啦
37. time: 3.009s
38. */

复制代码

四、总结

Tapable 提供的这些钩子，支持同步、异步、熔断、循环、waterfall 等功能特性，以此支持起 webpack 复杂的编译功能，在明确这些内容之后，我们对 webpack 插件架构的设计会有进一步的明确和使用。
参考资料

https://juejin.cn/post/6955421936373465118
https://github.com/webpack/tapable

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。