关于webpack:Tapable个人笔记

40次阅读

共计 7852 个字符，预计需要花费 20 分钟才能阅读完成。

webpack 底层外围是一个独立的工具库tapable

webpack 编译过程，能够看作 事件驱动型事件工作机制

外围的两个：负责编译的 complier，负责创立 bundles 的compilation 都是 tapable 的实例对象

  • 配置初始化
  • 内容编译
  • 输入编译后内容

tapable 工作流程

  • 实例化 hook 注册事件监听
  • 通过 hook 触发事件监听
  • 执行懒编译生成的可执行代码

hook 自身是实例对象，在 tapable 库中存在几种不同类，每个类实例都是一种 hook 实例（钩子），不同钩子领有不同执行特点，
从执行机制将 hook 分为同步和异步，异步分为并行串行两种模式

Hook 不同机制执行特点

  • Hook：一般钩子，监听器之间相互独立不烦扰
  • BailHook：熔断钩子，某个监听返回非 undefined 时后续不执行
  • WaterfallHook：瀑布钩子，上一个监听的返回值可传递至下一个
  • LoopHook：循环钩子，如果以后未返回 false 则始终执行

总结：

  • tapable 是个库，外部提供不同类，能够实例化出不同 hook
  • hook 分为同步异步两类，无论哪类都蕴含下面四个执行特点

tapable 库同步钩子

  • SyncHook
  • SyncBailHook
  • SyncWaterfallHook
  • SyncLoopHook

tapable 库异步串行钩子

  • AsyncSeriesHook
  • AsyncSeriesBailHook
  • AsyncSeriesWaterfallHook

tapable 库异步并行钩子

  • AsyncParallelHook
  • AsyncParallelBailHook

同步钩子应用

装置：yarn add tapable --dev
应用：导入 -> 实例化 -> 增加监听 -> 触发监听

测试 SyncHook

// 导入
const {SyncHook} = require('tapable')

// 实例化
let hook = new SyncHook(['name','age'])

// 增加事件监听
hook.tap('fn1',function(name,age){
  // 钩子监听触发时会执行此函数体
  console.log("SyncHook:fn1-->",name,age);
})

// 触发监听函数
hook.call('mcgee',18)

流式监听, 能够定义多个监听事件顺次解决内容

const {SyncHook} = require('tapable')

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

// 增加事件监听
hook.tap('fn1',function(name,age){console.log("SyncHook:fn1-->",name,age);   // SyncHook:fn1--> mcgee 18
})
hook.tap('fn2',function(name,age){console.log("SyncHook:fn2-->",name+"爸爸",age+30); // SyncHook:fn2--> mcgee 爸爸 48
})

hook.call('mcgee',18)

测试 SyncBailHook

留神 fn1return 了非undefined 的值，因而 fn2 不会执行，熔断的含意

const {SyncBailHook} = require('tapable')

let hook = new SyncBailHook(['name','age'])

hook.tap('fn1',function(name,age){console.log("SyncBailHook:fn1-->",name,age);
  return 1;  
})
hook.tap('fn2',function(name,age){console.log("SyncBailHook:fn2-->",name+"爸爸",age+30);
})

hook.call('mcgee',18)

测试 SyncWaterfallHook

返回值会被下一个监听获取

const {SyncWaterfallHook} = require('tapable')

let hook = new SyncWaterfallHook(['name','age'])

hook.tap('fn1',function(name,age){console.log("SyncWaterfallHook:fn1-->",name,age); // SyncWaterfallHook:fn1--> mcgee 18
  return "爸爸"
})
hook.tap('fn2',function(name,age){console.log("SyncWaterfallHook:fn2-->",name,age+30); // SyncWaterfallHook:fn2--> 爸爸 48
})

hook.call('mcgee',18)

测试 SyncLoopHook

如果监听未返回 undefined, 则始终执行, 从新从 taps 数组里的第一个 tap 开始执行能够断点看一下

const {SyncLoopHook} = require('tapable')

let hook = new SyncLoopHook(['name','age'])

hook.tap('fn1',function(name,age){console.log("SyncLoopHook:fn1-->",name,age);
  if(++count1 === 1)
  {
    count1 = 0
    return undefined
  }
  return true
})
hook.tap('fn2',function(name,age){console.log("SyncLoopHook:fn2-->",name,age+30);
})

hook.call('mcgee',18)

测试 AsyncParallelHook

对于异步钩子并行的应用，在增加事件监听时会存在三种形式

  • tap
  • tapAsync
  • tapPromise
const {AsyncParallelHook} = require('tapable')
let hook = new AsyncParallelHook(['name'])

增加事件监听 tap

hook.tap('fn1',function(name){
  // 钩子监听触发时会执行此函数体
  console.log("AsyncParallelHook:fn1-->",name);
})
hook.tap('fn2',function(name){console.log("AsyncParallelHook:fn2-->",name);
})

触发监听函数

hook.callAsync('mcgee',function(){console.log("run~~"); // 执行的回调，顺次输入 fn1,fn2,run~~~
  console.timeEnd('time')
})

增加事件监听 tapAsync

console.time('time')
hook.tapAsync('fn1',function(name,callback){setTimeout(()=>{console.log("AsyncParallelHook:fn1-->",name);
    callback()},1000)
})
hook.tapAsync('fn2',function(name,callback){setTimeout(()=>{console.log("AsyncParallelHook:fn2-->",name);
    callback()},2000)
})

触发监听函数

hook.callAsync('mcgee',function(){console.log("run~~");
  console.timeEnd('time')
})

增加事件监听 tapPromise

console.time('time')
hook.tapPromise('fn1',function(name){return new Promise(function(resolve,reject){setTimeout(()=>{console.log("AsyncParallelHook:fn1-->",name);
      resolve()},1000)
  })
})
hook.tapPromise('fn2',function(name){return new Promise(function(resolve,reject){setTimeout(()=>{console.log("AsyncParallelHook:fn2-->",name);
      resolve()},2000)
  })
})

触发监听函数

hook.promise('foo').then(()=>{console.log("run~~");
  console.timeEnd('time')  
})

测试 AsyncParallelBailHook

熔断操作，通过 callback 函数谬误优先，fn2 不会执行

const {AsyncParallelBailHook} = require('tapable')
let hook = new AsyncParallelBailHook(['name'])

console.time('time')
hook.tapAsync('fn1',function(name,callback){setTimeout(()=>{console.log("AsyncParallelBailHook:fn1-->",name);
    callback('err')  // callback 回调中谬误优先
  },1000)
})
hook.tapAsync('fn2',function(name,callback){setTimeout(()=>{console.log("AsyncParallelBailHook:fn2-->",name);
    callback()},2000)
})

触发监听函数

hook.callAsync('mcgee',function(){console.log("run~~");
  console.timeEnd('time')
})

测试 AsyncSeriesHook

串行，上面代码会执行 3s

const {AsyncSeriesHook} = require('tapable')
let hook = new AsyncSeriesHook(['name'])
console.time('time')
hook.tapPromise('fn1',function(name){return new Promise(function(resolve,reject){setTimeout(()=>{console.log("AsyncSeriesHook:fn1-->",name);
      resolve()},1000)
  })
})
hook.tapPromise('fn2',function(name){return new Promise(function(resolve,reject){setTimeout(()=>{console.log("AsyncSeriesHook:fn2-->",name);
      resolve()},2000)
  })
})

执行监听

hook.promise('foo').then(()=>{console.log("run~~");
  console.timeEnd('time')  
})

基于 SyncHook 的源码剖析

从源码能够看出，node_modules/tapable/lib/Hook.js文件为所有钩子的基类文件，
其余钩子都是继承自 Hook.js 并对 Hook.js 内的办法进行改写的操作，
tap 会将注册的内容存成对象，{type:'async',fn:f,name:'fn1'}再塞入 Hook 类的属性 taps 数组中

hook.tap('fn1',function(name){console.log("AsyncParallelHook:fn1-->",name);
})

基于 SyncHook 的源码剖析 2

  • 导入
  • 实例化 SyncHook 的基类 hook，两个重要属性 _x 和 taps
  • _x = [f1, f2…] tap 注册的回调内容
  • taps = [{}, {}] tap 数组
  • 调用 call 办法，应用了 HookCodeFactory 类 setup create

  • Hook SyncHook HookCodeFactory

    // # hook.js 基类

class Hook {constructor(args = []) {
  this.args = args
  this.taps = []  // 未来用于寄存组装好的 {}
  this._x = undefined  // 未来在代码工厂函数中会给 _x = [f1, f2, f3....]
}

tap(options, fn) {if (typeof options === 'string') {options = { name: options}
  }
  options = Object.assign({fn}, options)  // {fn:... name:fn1}

  // 调用以下办法将组装好的 options 增加至 []
  this._insert(options)
}

_insert(options) {this.taps[this.taps.length] = options
}

call(...args) {
  // 01 创立未来要具体执行的函数代码构造
  let callFn = this._createCall()
  // 02 调用上述的函数（args 传入进去）return callFn.apply(this, args)
}

_createCall() {
  return this.compile({
    taps: this.taps,
    args: this.args
  })
}
}

module.exports = Hook
    // # SyncHook.js

let Hook = require('./Hook.js')

//--------------------------------------------------------
// 代码组装工厂 HookCodeFactory 基于不同 hook 子类（SyncHook，SyncBailHook），设置不同函数体的类

class HookCodeFactory {args() {return this.options.args.join(',')  // ["name", "age"]===> name, age
}
head() {return `var _x = this._x;`}
content() {
  let code = ``
  for (var i = 0; i < this.options.taps.length; i++) {code += `var _fn${i} = _x[${i}];_fn${i}(${this.args()});`
  }
  return code
}
setup(instance, options) {  // 先筹备后续须要应用到的数据
  this.options = options  // 这里的操作在源码中是通过 init 办法实现，而咱们以后是间接挂在了 this 身上
  instance._x = options.taps.map(o => o.fn)   // this._x = [f1, f2, ....]
}
create() { // 外围就是创立一段可执行的代码体而后返回
  let fn
  // fn = new Function("name, age", "var _x = this._x, var _fn0 = _x[0]; _fn0(name, age);")
  fn = new Function(this.args(),
    this.head() + this.content()
  )
  return fn
}
}

//--------------------------------------------------------
let factory = new HookCodeFactory()
// 子类 SyncHook

class SyncHook extends Hook {constructor(args) {super(args)
}

compile(options) {// {taps: [{}, {}], args: [name, age]}
  factory.setup(this, options)
  return factory.create(options)
}
}

module.exports = SyncHook

    应用下面的 hook 类

    // # useHook.js

const SyncHook = require('./SyncHook.js')

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

hook.tap('fn1', function (name, age) {console.log('fn1-->', name, age)
})

hook.tap('fn2', function (name, age) {console.log('fn2-->', name, age)
})

hook.call('zoe66', 18)

/**
 * 01 实例化 hook，定义 _x = [f1, f2, ...] taps = [{}, {}]
 * 02 实例调用 tap  taps = [{}, {}]
 * 03 调用 call 办法，HookCodeFactory  setup create
 * 04 Hook SyncHook HookCodeFactory
 */

    #### 基于 AsyncParallelHook 的源码剖析

     // # useHook.js

const AsyncParallelHook = require('./AsyncParallelHook.js')

let hook = new AsyncParallelHook(['name', 'age'])

hook.tapAsync('fn1', function (name, age, callback) {console.log('fn1-->', name, age)
callback()})

hook.tapAsync('fn2', function (name, age, callback) {console.log('fn2-->', name, age)
callback()})

hook.callAsync('zoe66', 18)

    代码工程要批改的内容

    class HookCodeFactory {head() {return `"use strict";var _context;var _x = this._x;`}
content() {let code = `var _counter = ${this.options.taps.length};var _done = (function () {_callback();
  });`
  for (var i = 0; i < this.options.taps.length; i++) {code += `var _fn${i} = _x[${i}];_fn${i}(name, age, (function () {if (--_counter === 0) _done();}));`
  }
  return code
}
args({after, before} = {}) {
  let allArgs = this.options.args
  if (before) allArgs = [before].concat(allArgs)
  if (after) allArgs = allArgs.concat(after)
  return allArgs.join(',')  // ["name", "age"]===> name, age
}
}

正文完
webpack
发表至： webpack
2021-06-25
 0
关于webpack:webpack配置
关于webpack:敲黑板手把手带你写一个简易版webpack内附超详细分解
关于webpack:webpack-loader使用
关于webpack:webpack4react18构建项目