webpack5 源码不得不提的 Tapable

Tapable 使用时通常需要经历如下步骤：

1. 创建钩子实例
2. 调用订阅接口注册回调，包括：tap、tapAsync、tapPromise
3. 调用发布接口触发回调，包括：call、callAsync、promise

我们可以源码查看下 Tapable 导出的 hooks，包含了以下几种

• SyncHook
• SyncBailHook
• SyncWaterfallHook
• SyncLoopHook
• AsyncParallelHook
• AsyncParallelBailHook
• AsyncSeriesHook
• AsyncSeriesBailHook
• AsyncSeriesLoopHook
• AsyncSeriesWaterfallHook

我们可以将 Tapable 的 hooks 分为同步和异步，

• 以 sync 开头的，是同步的Hook
• 以 asyn开头的，两个事件处理回调，不会等待上一次处理回调结束后再执行下一次回调

我们也可以按其他的类别分类

• bail: 当有返回值时，就不会执行后续的事件触发了
• Loop: 当返回值为true，就会反复执行该事件，当返回值为undefined或者不返回内容，就退出事件
• Waterfall: 当返回值不为undefined时，会将这次返回的结果作为下次事件的第一个参数
• Parallel: 并行，会同时执行此事件处理回调结束，才执行下一次事件处理回调
• Series: 串行，会等待上一是异步的Hook

举个例子：

const { SyncWaterfallHook } = require('tapable')
 
class MyTapable {
  constructor() {
    this.hooks = {
      syncWaterfallHook: new SyncWaterfallHook(['myName', 'myAge'])
    }
    this.on()
  }
  // 注册
  on() {
    this.hooks.syncWaterfallHook.tap('myTap1', (name, age) => {
      console.log('myTap1', name, age)
      return '20'
    })
    this.hooks.syncWaterfallHook.tap('myTap2', (name, age) => {
      console.log('myTap2', name, age)
    })
  }
  // 初始化
  emit() {
    this.hooks.syncWaterfallHook.call('17', 18)
  }
}
 
const tapable = new MyTapable()
tapable.emit() 

参考

https://www.npmjs.com/package/tapab