webpack---tapable

tapable

const tapable = require('tapable')
const {
  SyncHook,
	SyncBailHook,
	SyncWaterfallHook,
	SyncLoopHook,   // 同步
	AsyncParallelHook,
	AsyncParallelBailHook, // 异步并行
	AsyncSeriesHook,
	AsyncSeriesBailHook,
	AsyncSeriesWaterfallHook  // 异步串行
} = tapable

• 三种注册方法: tap 同步注册 tapAsync 异步注册(需要调用cb) tapPromise(注册promise); 对应三种调用方法 call callAsync promise

1. SyncHook

let hook = new SyncHook(['name'])

// tap用于注册事件
hook.tap('vapour', function (name) {
  console.log(name)
})
hook.tap('awww', function (name) {
  console.log(name)
})

// call用于执行事件
hook.call('abc')  // abc传到回调的参数中

2. SyncBailHook (可以决定是否继续向下执行)

const {
  SyncBailHook
} = require('tapable')

const hook = new SyncBailHook(['name'])
hook.tap('vapour', function (name) {
  console.log(name)
  return '出错了'  // 回调中返回值不是undefined时就不会继续向下执行了
})
hook.tap('zwp', function (name) {
  console.log(name)
})
hook.call('isME')

3. SyncWaterfallHook(后面的任务接收前面任务的返回值)

const {
  SyncWaterfallHook
} = require('tapable')

const hook = new SyncWaterfallHook(['name'])
hook.tap('vapour', function (name) {
  console.log(name) // 传入参数
  return '第一个的返回结果'
})
hook.tap('zwp', function (data) {
  console.log(data) // 第一个的返回结果
})
hook.call('传入参数')

4. SyncLoopHook(遇到某个不返回undefined的函数会重复执行)

const {
  SyncLoopHook
} = require('tapable')
let index = 1
const hook = new SyncLoopHook(['name'])
hook.tap('vapour', function (name) {
  console.log(name) // 传入参数
  return index++ === 3 ? undefined : `执行${index}次`
})
hook.tap('zwp', function (data) {
  console.log(data, '-----') // 第一个的返回结果
})
hook.call('传入参数')

5. AsyncParallelHook

const hook = new AsyncParallelHook(['param'])
hook.tapAsync('vapour', function (param, cb) {
  setTimeout(() => {
    console.log(param)
    cb() // cb执行，标识该异步任务完成
  }, 500)
})
hook.tapAsync('zwp', function (param, cb) {
  setTimeout(() => {
    console.log(param)
    cb()
  }, 500)
})
hook.callAsync('参数', function (data) {
  // 只有在所有异步任务的cb都执行后，此回调才会执行
  console.log('异步任务执行完之后执行', data)
})

const hook = new AsyncParallelHook(['param'])

hook.tapPromise('vapour', function (param) {
  return new Promise((resolve, reject) => {
    console.log(param)
    resolve()
  })
})
hook.tapPromise('zwp', function (param) {
  return new Promise((resolve, reject) => {
    console.log(param)
    resolve()
  })
})

hook.promise('参数').then(function (data) {
  // 只有在所有异步任务都resolve后，此回调才会执行
  console.log('异步任务执行完之后执行')
}, function(){
  console.log('catch')
})

6. AsyncSeriesHook (异步任务执行完之后再执行下一个异步任务)

const {
  AsyncSeriesHook,
} = require('tapable')

const hook = new AsyncSeriesHook(['name'])
hook.tapAsync('vapour', function (param, cb) {
  setTimeout(() => {
    console.log(param)
    cb()
  }, 1000)
})
hook.tapAsync('zwp', function (param, cb) {
  setTimeout(() => {
    console.log(param)
    cb()
  }, 1000)
})

hook.callAsync('参数', function () {
  console.log('异步任务执行后执行')
})

const hook = new AsyncSeriesHook(['name'])
hook.tapPromise('vapour', function (param) {
  return new Promise((resolve, reject) => {
    console.log(param)
    setTimeout(() => {
      resolve()
    }, 1000)
  })
})
hook.tapPromise('zwp', function (param) {
  return new Promise((resolve, reject) => {
    console.log(param)
    resolve()
  })
})

hook.promise('参数').then(function () {
  console.log('异步任务执行后执行')
})

7. AsyncSeriesWaterfallHook(把异步结果传给下一个异步任务)

const hook = new AsyncSeriesWaterfallHook(['name'])
hook.tapPromise('vapour', function (param) {
  return new Promise((resolve, reject) => {
    console.log(param)
    setTimeout(() => {
      resolve('第一个异步任务结果')
    }, 1000)
  })
})
hook.tapPromise('zwp', function (data) {
  return new Promise((resolve, reject) => {
    console.log('接收第一个异步任务结果', data)
    resolve('第二个异步任务结果')
  })
})

hook.promise('参数').then(function (data) {
  console.log('异步任务执行后执行', data)
})