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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值