带你简单了解Tapable库

Taptable是webpack中重要的一个库，它主要复制着webpack事件流的处理。关于webpack的有关知识可以看我这篇文章juejin.cn/post/716050… 下面只要是通过代码例子的方式去连接tapable暴露的几个钩子函数，你可以直接复制下方的代码去执行体会了解。

const {
  SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  // SyncLoopHook, 
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook
} = require("tapable");
// 基本类型钩子
const syHookRun = () => {
   // 下面需要hook.tap需要传几个参数就要写几个['name1', 'name2']
  const hook = new SyncHook(['name1', 'name2'])
  hook.tap('flag1', (name, age) => {
    console.log('flag1:', name, age)
  })
  hook.tap('flag2', (name, age) => {
    console.log('flag2:', name, age)
  })

  hook.call('cxk', '18')

}
// syHookRun()


// 保险类型钩子(有返回值时中断后面钩子的执行)
const syBHookRun = () => {
  const hook = new SyncBailHook(['name1', 'name2'])
  hook.tap('flag1', (name, age) => {
    console.log('flag1:', name, age)
    // 返回1会中断flag2的执行
    return 1
  })
  hook.tap('flag2', (name, age) => {
    console.log('flag2:', name, age)
  })

  hook.call('cxk', '18')
}
// syBHookRun()


// 瀑布钩子(将上一个函数的返回传递给下一个)
const syWHookRun = () => {
  const hook = new SyncWaterfallHook(['name1', 'name2'])
  hook.tap('flag1', (name, age) => {
    console.log('flag1:', name, age)
    // 只能传递一个返回值
    return 'lsc'
  })
  hook.tap('flag2', (name, age) => {
    console.log('flag2:', name, age)
  })

  hook.call('cxk', '18')
}
// syWHookRun()


// 异步串行钩子
console.time('asySHRun')
const asySHRun = () => {
  const hook = new AsyncSeriesHook(['name1', 'name2'])
  hook.tapAsync('flag1', (name, age,cb) => {
    console.log('flag1:', name, age)
    setTimeout(()=>{
      cb()
      // cb的传参是cb(error,arg1,arg2...),传error会中断后面钩子的执行
      // cb(1)
    },1000)
  })
  hook.tapPromise('flag2', (name, age) => {
    console.log('flag2', name, age)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve()
      },1000)
    })
  })

  hook.callAsync('cxk', '18',(err,res)=>{
    console.log('执行结束')
    console.timeEnd('asySHRun')
  })
}
// asySHRun()


// 异步并行行钩子
console.time('asyPHRun')
const asyPHRun = () => {
  const hook = new AsyncParallelHook(['name1', 'name2'])
  hook.tapAsync('flag1', (name, age,cb) => {
    console.log('flag1:', name, age)
    setTimeout(()=>{
      cb()
      // cb(1)
    },1000)
  })
  hook.tapPromise('flag2', (name, age) => {
    console.log('flag2', name, age)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve()
      },1000)
    })
  })

  hook.callAsync('cxk', '18',(err,res)=>{
    console.log('执行结束')
    console.timeEnd('asyPHRun')
  })
}
// asyPHRun()


// 异步串行保险钩子
console.time('asySBHRun')
const asySBHRun = () => {
  const hook = new AsyncSeriesBailHook(['name1', 'name2'])
  hook.tapAsync('flag1', (name, age,cb) => {
    console.log('flag1:', name, age)
    setTimeout(()=>{
      cb(null,222)
      // cb(null)
    },1000)
  })
  hook.tapPromise('flag2', (name, age) => {
    console.log('flag2', name, age)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve()
      },1000)
    })
  })

  hook.callAsync('cxk', '18',(err,res)=>{
    console.log('执行结束')
    console.timeEnd('asySBHRun')
  })
}
// asySBHRun()


// 异步并行保险钩子
console.time('asyPBHRun')
const asyPBHRun = () => {
  const hook = new AsyncParallelBailHook(['name1', 'name2'])
  hook.tapAsync('flag1', (name, age,cb) => {
    console.log('flag1:', name, age)
    setTimeout(()=>{
      cb(null)
    },1000)
  })
  hook.tapPromise('flag2', (name, age) => {
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log('flag2', name, age)
        resolve(66)
      },3000)
    })
  })

  hook.callAsync('cxk', '18',(err,res)=>{
    console.log('执行结束',res)
    console.timeEnd('asyPBHRun')
  })
}
// asyPBHRun()


// 异步串行瀑布钩子
console.time('asySWHRun')
const asySWHRun = () => {
  const hook = new AsyncSeriesWaterfallHook(['name1', 'name2'])
  hook.tapAsync('flag1', (name, age,cb) => {
    console.log('flag1:', name, age)
    setTimeout(()=>{
      cb(null,222)
    },1000)
  })
  hook.tapPromise('flag2', (name, age) => {
    console.log('flag2', name, age)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve()
      },1000)
    })
  })

  hook.callAsync('cxk', '18',(res)=>{
    console.log('执行结束')
    console.timeEnd('asySWHRun')
  })
}
// asySWHRun()