webpack之tapable

Posted raindi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack之tapable相关的知识,希望对你有一定的参考价值。

webpack

技术图片

tapable

webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是tapable,核心原理是依赖于发布订阅模式;
tapable注册函数的方法有三种:tap、tapAsync、tapPromise
相对应的执行方法也有三种:call、callAsync、promise

SyncHook

const { SyncLoopHook } = require(‘tapable‘)

class Lesson {
  constructor () {
    this.index = 0
    this.hooks = {
      arch: new SyncLoopHook([‘name‘])
    }
  }
  tap () {
    let self = this
    this.hooks.arch.tap(‘node‘, function (name) {
      console.log(‘node‘, name)
      return ++self.index >=3 ? undefined :‘23‘
    })
    this.hooks.arch.tap(‘react‘, function (name) {
      console.log(‘react‘, name)
    })
  }
  start () {
    this.hooks.arch.call(‘jw‘)
  }
}

let l = new Lesson()
l.tap()
l.start()
  • SyncBailHook

SyncBailHook同步熔断保险钩子,即return一个非undefined的值,则不再继续执行后面的监听函数

  • SyncWaterfallHook

上一个监听函数的返回值会传递给下一个监听函数

  • SyncLoopHook

遇到某个不返回undefined的监听函数,就重复执行


AsyncHook

const { AsyncParallelHook } = require(‘tapable‘)

class Lesson {
  constructor () {
    this.index = 0
    this.hooks = {
      arch: new AsyncParallelHook([‘name‘])
    }
  }
  tap () {
    let self = this
    this.hooks.arch.tapAsync(‘node‘, function (name, cb) {
      setTimeout(() => {
        console.log(‘node‘, name)
        cb()
      })
    })
    this.hooks.arch.tapAsync(‘react‘, function (name, cb) {
      console.log(‘react‘, name)
      cb()
    })
  }
  start () {
    this.hooks.arch.callAsync(‘jw‘, function () {
      console.log(‘end‘)
    })
  }
}

let l = new Lesson()
l.tap()
l.start()

结果:
react jw
node jw
end
  • AsyncParallelHook

异步 并行

源码:

module.exports =  class AsyncParallelHook {
  constructor () {
    this.tasks = []
  }
  tapAsync (name, fn) {
    this.tasks.push(fn)
  }
  callAsync (...args) {
    const final = args.pop()
    let index = 0
    const done = () => {
      index++
      if (index === this.tasks.length) {
        final()
      }
    }
    this.tasks.forEach(task => {
      task(...args, done)
    })
  }
}
  • AsyncSeriesHook

异步串行

源码:

// callback方式
module.exports =  class AsyncSerieslHook {
  constructor () {
    this.tasks = []
  }
  tapAsync (name, fn) {
    this.tasks.push(fn)
  }
  callAsync (...args) {
    let index = 0
    const final = args.pop()
    const next = () => {
      if (this.tasks.length === index) {
        final()
        return
      }
      const firstFn = this.tasks[index++]
      firstFn(...args, next)
    }
    next()
  }
}


// promise方式
module.exports =  class AsyncSerieslHook {
  constructor () {
    this.tasks = []
  }
  tapPromise (name, fn) {
    this.tasks.push(fn)
  }
  promise (...args) {
    const [firstFn, ...others] = this.tasks
    return others.reduce((n, p) => {
      return n.then(_ => p(...args))
    }, firstFn(...args))
  }
}

调用:

//callback方式调用
const AsyncSeriesHook = require(‘./asyncHook‘)

class Lesson {
  constructor () {
    this.index = 0
    this.hooks = {
      arch: new AsyncSeriesHook([‘name‘])
    }
  }
  tap () {
    this.hooks.arch.tapAsync(‘node‘, function (name, cb) {
      setTimeout(() => {
        console.log(‘node‘, name)
        cb()
      }, 1000)
    })
    this.hooks.arch.tapAsync(‘react‘, function (name, cb) {
      setTimeout(() => {
        console.log(‘react‘, name)
        cb()
      }, 2000)
    })
  }
  start () {
    this.hooks.arch.callAsync(‘jw‘, function () {
      console.log(‘end‘)
    })
  }
}

let l = new Lesson()
l.tap()
l.start()

// promise方式调用
const AsyncSeriesHook = require(‘./asyncHook‘)

class Lesson {
  constructor () {
    this.index = 0
    this.hooks = {
      arch: new AsyncSeriesHook([‘name‘])
    }
  }
  tap () {
    this.hooks.arch.tapPromise(‘node‘, function (name) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(‘node‘, name)
          resolve()
        }, 1000)
      })
    })
    this.hooks.arch.tapPromise(‘react‘, function (name) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(‘react‘, name)
          resolve()
        }, 2000)
      })
    })
  }
  start () {
    this.hooks.arch.promise(‘jw‘).then(function () {
      console.log(‘end‘)
    })
    // this.hooks.arch.callAsync(‘jw‘, function () {
    //   console.log(‘end‘)
    // })
  }
}

let l = new Lesson()
l.tap()
l.start()


以上是关于webpack之tapable的主要内容,如果未能解决你的问题,请参考以下文章

webpack原理篇(五十四):Tapable是如何和webpack进行关联起来的?

webpack核心模块tapable源码解析

webpack核心模块tapable源码解析

webpack4.0各个击破—— tapable篇

webpack原理:Tapable源码分析及钩子函数作用分析

转关于 tapable 你需要知道这些