Webpack 基于 tapable 构建了其简单宏大的流程管理系统，基于 tapable 的架构不仅解耦了流程节点和流程的具体实现，还保障了 Webpack 弱小的扩大能力；学习把握tapable，有助于咱们深刻了解 Webpack。
一、tapable是什么？
The tapable package expose many Hook classes,which can be used to create hooks for plugins.tapable 提供了一些用于创立插件的钩子类。
集体感觉 tapable 是一个基于事件的流程管理工具。
二、tapable架构原理和执行过程
tapable于2020.9.18公布了v2.0版本。此文章内容也是基于v2.0版本。
2.1 代码架构
tapable有两个基类：Hook和HookCodeFactory。Hook类定义了Hook interface(Hook接口)， HookCodeFactoruy类的作用是动静生成一个流程管制函数。生成函数的形式是通过咱们相熟的New Function(arg，functionBody)。
2.2 执行流程
tapable会动静生成一个可执行函数来管制钩子函数的执行。咱们以SyncHook的应用来举一个例子，比方咱们有这样的一段代码：
// SyncHook应用import { SyncHook } from '../lib';const syncHook = new SyncHook();syncHook.tap('x', () => console.log('x done'));syncHook.tap('y', () => console.log('y done'));下面的代码只是注册好了钩子函数，要让函数被执行，还须要触发事件（执行调用）
syncHook.call();syncHook.call()在调用时会生成这样的一个动静函数：
function anonymous() { "use strict"; var _context; var _x = this._x; var _fn0 = _x[0]; _fn0(); var _fn1 = _x[1]; _fn1();}这个函数的代码非常简单：就是从一个数组中取出函数，顺次执行。留神：不同的调用形式，最终生成的的动静函数是不同的。如果把调用代码改成：
syncHook.callAsync( () => {console.log('all done')} )那么最终生成的动静函数是这样的：
function anonymous(_callback) { "use strict"; var _context; var _x = this._x; var _fn0 = _x[0]; var _hasError0 = false; try { _fn0(); } catch(_err) { _hasError0 = true; _callback(_err); } if(!_hasError0) { var _fn1 = _x[1]; var _hasError1 = false; try { _fn1(); } catch(_err) { _hasError1 = true; _callback(_err); } if(!_hasError1) { _callback(); } }}这个动静函数绝对于后面的动静函数要简单一些，但认真一看，执行逻辑也非常简单：同样是从数组中取出函数，顺次执行；只不过这次多了2个逻辑：
- 错误处理
- 在数组中的函数执行完后，执行了回调函数
通过钻研最终生成的动静函数，咱们不难发现：动静函数的模板个性十分突出。后面的例子中，咱们只注册了x,y2个钩子，这个模板保障了当咱们注册任意个钩子时，动静函数也能不便地生成进去，具备十分强的扩大能力。
那么这些动静函数是如何生成的呢？其实Hook的生成流程是一样的。hook.tap只是实现参数筹备，真正的动静函数生成是在调用后（水龙头关上后）。残缺流程如下：
三、Hook 类型详解
在tapablev2中，一共提供了12种类型的Hook，接下来，通过梳理Hook怎么执行和Hook实现回调何时执行2方面来了解tapable提供的这些Hook类。
3.1 SyncHook
钩子函数按秩序顺次全副执行；如果有Hook回调，则Hook回调在最初执行。
const syncHook = new SyncHook();syncHook.tap('x', () => console.log('x done'));syncHook.tap('y', () => console.log('y done'));syncHook.callAsync(() => { console.log('all done') }); /*输入：x doney doneall done*/3.2 SyncBailHook
钩子函数按秩序执行。如果某一步钩子返回了非undefined，则前面的钩子不再执行；如果有Hook回调，间接执行Hook回调。
const hook = new SyncBailHook(); hook.tap('x', () => { console.log('x done'); return false; // 返回了非undefined，y不会执行});hook.tap('y', () => console.log('y done'));hook.callAsync(() => { console.log('all done') }); /*输入：x doneall done*/3.3 SyncWaterfallHook
钩子函数按秩序全副执行。后一个钩子的参数是前一个钩子的返回值。最初执行Hook回调。
const hook = new SyncWaterfallHook(['count']); hook.tap('x', (count) => { let result = count + 1; console.log('x done', result); return result;});hook.tap('y', (count) => { let result = count * 2; console.log('y done', result); return result;});hook.tap('z', (count) => { console.log('z done & show result', count);});hook.callAsync(5, () => { console.log('all done') }); /*输入：x done 6y done 12z done & show result 12all done*/3.4 SyncLoopHook
钩子函数按秩序全副执行。每一步的钩子都会循环执行，直到返回值为undefined，再开始执行下一个钩子。Hook回调最初执行。
const hook = new SyncLoopHook(); let flag = 0;let flag1 = 5; hook.tap('x', () => { flag = flag + 1; if (flag >= 5) { // 执行5次，再执行 y console.log('x done'); return undefined; } else { console.log('x loop'); return true; }});hook.tap('y', () => { flag1 = flag1 * 2; if (flag1 >= 20) { // 执行2次，再执行 z console.log('y done'); return undefined; } else { console.log('y loop'); return true; }});hook.tap('z', () => { console.log('z done'); // z间接返回了undefined，所以只执行1次 return undefined;}); hook.callAsync(() => { console.log('all done') }); /*输入：x loopx loopx loopx loopx doney loopx doney donez doneall done */3.5 AsyncParallelHook
钩子函数异步并行全副执行。所有钩子的回调返回后，Hook回调才执行。
const hook = new AsyncParallelHook(['arg1']);const start = Date.now(); hook.tapAsync('x', (arg1, callback) => { console.log('x done', arg1); setTimeout(() => { callback(); }, 1000)});hook.tapAsync('y', (arg1, callback) => { console.log('y done', arg1); setTimeout(() => { callback(); }, 2000)});hook.tapAsync('z', (arg1, callback) => { console.log('z done', arg1); setTimeout(() => { callback(); }, 3000)}); hook.callAsync(1, () => { console.log(`all done。 耗时：${Date.now() - start}`);}); /*输入：x done 1y done 1z done 1all done。 耗时：3006*/3.6 AsyncSeriesHook
钩子函数异步串行全副执行，会保障钩子执行程序，上一个钩子完结后，下一个才会开始。Hook回调最初执行。
const hook = new AsyncSeriesHook(['arg1']);const start = Date.now(); hook.tapAsync('x', (arg1, callback) => { console.log('x done', ++arg1); setTimeout(() => { callback(); }, 1000)});hook.tapAsync('y', (arg1, callback) => { console.log('y done', arg1); setTimeout(() => { callback(); }, 2000)}); hook.tapAsync('z', (arg1, callback) => { console.log('z done', arg1); setTimeout(() => { callback(); }, 3000)}); hook.callAsync(1, () => { console.log(`all done。 耗时：${Date.now() - start}`);}); /*输入：x done 2y done 1z done 1all done。 耗时：6008*/3.7 AsyncParallelBailHook
钩子异步并行执行，即钩子都会执行，但只有有一个钩子返回了非undefined，Hook回调会间接执行。
const hook = new AsyncParallelBailHook(['arg1']);const start = Date.now(); hook.tapAsync('x', (arg1, callback) => { console.log('x done', arg1); setTimeout(() => { callback(); }, 1000)});hook.tapAsync('y', (arg1, callback) => { console.log('y done', arg1); setTimeout(() => { callback(true); }, 2000)}); hook.tapAsync('z', (arg1, callback) => { console.log('z done', arg1); setTimeout(() => { callback(); }, 3000)}); hook.callAsync(1, () => { console.log(`all done。 耗时：${Date.now() - start}`);});/*输入：x done 1y done 1z done 1all done。 耗时：2006 */3.8 AsyncSeriesBailHook
钩子函数异步串行执行。但只有有一个钩子返回了非undefined，Hook回调就执行，也就是说有的钩子可能不会执行。
const hook = new AsyncSeriesBailHook(['arg1']);const start = Date.now(); hook.tapAsync('x', (arg1, callback) => { console.log('x done', ++arg1); setTimeout(() => { callback(true); // y 不会执行 }, 1000);});hook.tapAsync('y', (arg1, callback) => { console.log('y done', arg1); setTimeout(() => { callback(); }, 2000);}); hook.callAsync(1, () => { console.log(`all done。 耗时：${Date.now() - start}`);}); /*输入：x done 2all done。 耗时：1006 */3.9 AsyncSeriesWaterfallHook
钩子函数异步串行全副执行，上一个钩子返回的参数会传给下一个钩子。Hook回调会在所有钩子回调返回后才执行。
const hook = new AsyncSeriesWaterfallHook(['arg']);const start = Date.now(); hook.tapAsync('x', (arg, callback) => { console.log('x done', arg); setTimeout(() => { callback(null, arg + 1); }, 1000)},); hook.tapAsync('y', (arg, callback) => { console.log('y done', arg); setTimeout(() => { callback(null, true); // 不会阻止 z 的执行 }, 2000)}); hook.tapAsync('z', (arg, callback) => { console.log('z done', arg); callback();}); hook.callAsync(1, (x, arg) => { console.log(`all done, arg: ${arg}。 耗时：${Date.now() - start}`);}); /*输入：x done 1y done 2z done trueall done, arg: true。 耗时：3010 */3.10 AsyncSeriesLoopHook
钩子函数异步串行全副执行，某一步钩子函数会循环执行到返回非undefined，才会开始下一个钩子。Hook回调会在所有钩子回调实现后执行。
const hook = new AsyncSeriesLoopHook(['arg']);const start = Date.now();let counter = 0; hook.tapAsync('x', (arg, callback) => { console.log('x done', arg); counter++; setTimeout(() => { if (counter >= 5) { callback(null, undefined); // 开始执行 y } else { callback(null, ++arg); // callback(err, result) } }, 1000)},); hook.tapAsync('y', (arg, callback) => { console.log('y done', arg); setTimeout(() => { callback(null, undefined); }, 2000)}); hook.tapAsync('z', (arg, callback) => { console.log('z done', arg); callback(null, undefined);}); hook.callAsync('AsyncSeriesLoopHook', (x, arg) => { console.log(`all done, arg: ${arg}。 耗时：${Date.now() - start}`);}); /*x done AsyncSeriesLoopHookx done AsyncSeriesLoopHookx done AsyncSeriesLoopHookx done AsyncSeriesLoopHookx done AsyncSeriesLoopHooky done AsyncSeriesLoopHookz done AsyncSeriesLoopHookall done, arg: undefined。 耗时：7014*/3.11 HookMap
次要作用是Hook分组，不便Hook组批量调用。
const hookMap = new HookMap(() => new SyncHook(['x'])); hookMap.for('key1').tap('p1', function() { console.log('key1-1:', ...arguments);});hookMap.for('key1').tap('p2', function() { console.log('key1-2:', ...arguments);});hookMap.for('key2').tap('p3', function() { console.log('key2', ...arguments);}); const hook = hookMap.get('key1'); if( hook !== undefined ) { hook.call('hello', function() { console.log('', ...arguments) });} /*输入：key1-1: hellokey1-2: hello*/3.12 MultiHook
MultiHook次要用于向Hook批量注册钩子函数。
const syncHook = new SyncHook(['x']);const syncLoopHook = new SyncLoopHook(['y']);const mutiHook = new MultiHook([syncHook, syncLoopHook]); // 向多个hook注册同一个函数mutiHook.tap('plugin', (arg) => { console.log('common plugin', arg);}); // 执行函数for (const hook of mutiHook.hooks) { hook.callAsync('hello', () => { console.log('hook all done'); });}以上Hook又能够形象为以下几类：
- xxxBailHook：依据前一步钩子函数的返回值是否是undefined来决定要不要执行下一步钩子：如果某一步返回了非undefined，则前面的钩子不在执行。
- xxxWaterfallHook：上一步钩子函数返回值就是下一步函数的参数。
- xxxLoopHook：钩子函数循环执行，直到返回值为undefined。
留神钩子函数返回值判断是和undefined比照，而不是和假值比照(null, false)
Hook也能够按同步、异步划分：
- syncXXX：同步钩子
- asyncXXX：异步钩子
Hook实例默认都有都有tap, tapAsync, tapPromise三个注册钩子回调的办法，不同注册办法生成的动静函数是不一样的。当然也并不是所有Hook都反对这几个办法，比方SyncHook不反对tapAsync, tapPromise。
Hook默认有call, callAsync，promise来执行回调。但并不是所有Hook都会有这几个办法，比方SyncHook不反对callAsync和promise。
四、实际利用
4.1 基于 tapable 实现类 jQuery.ajax()封装
咱们先温习下jQuery.ajax()的惯例用法（大略用法是这样，咱不纠结每个参数都正确）：
jQuery.ajax({ url: 'api/request/url', beforeSend: function(config) { return config; // 返回false会勾销此次申请发送 }, success: function(data) { // 胜利逻辑 } error: function(err) { // 失败逻辑 }, complete: function() { // 胜利，失败都会执行的逻辑 }});jQuery.ajax整个流程做了这么几件事：
- 在申请真正发送前，beforeSend提供了申请配置预处理的钩子。如果预处理函数返回false，能勾销此次申请的发送。
- 申请胜利（服务端数据返回后）执行success函数逻辑。
- 如果申请失败，则执行error函数逻辑。
- 最终，对立执行complete函数逻辑，无论申请胜利还是失败。
同时，咱们借鉴axios的做法，将beforeSend改为transformRequest，退出transformResponse，再加上对立的申请loading和默认的错误处理，这时咱们整个ajax流程如下：
4.2 简略版的实现
const { SyncHook, AsyncSeriesWaterfallHook } = require('tapable'); class Service { constructor() { this.hooks = { loading: new SyncHook(['show']), transformRequest: new AsyncSeriesWaterfallHook(['config', 'transformFunction']), request: new SyncHook(['config']), transformResponse: new AsyncSeriesWaterfallHook(['config', 'response', 'transformFunction']), success: new SyncHook(['data']), fail: new SyncHook(['config', 'error']), finally: new SyncHook(['config', 'xhr']) }; this.init(); } init() { // 解耦后的工作逻辑 this.hooks.loading.tap('LoadingToggle', (show) => { if (show) { console.log('展现ajax-loading'); } else { console.log('敞开ajax-loading'); } }); this.hooks.transformRequest.tapAsync('DoTransformRequest', ( config, transformFunction= (d) => { d.__transformRequest = true; return d; }, cb ) => { console.log(`transformRequest拦截器：Origin:${JSON.stringify(config)};`); config = transformFunction(config); console.log(`transformRequest拦截器：after:${JSON.stringify(config)};`); cb(null, config); }); this.hooks.transformResponse.tapAsync('DoTransformResponse', ( config, data, transformFunction= (d) => { d.__transformResponse = true; return d; }, cb ) => { console.log(`transformResponse拦截器：Origin:${JSON.stringify(config)};`); data = transformFunction(data); console.log(`transformResponse拦截器：After:${JSON.stringify(data)}`); cb(null, data); }); this.hooks.request.tap('DoRequest', (config) => { console.log(`发送申请配置：${JSON.stringify(config)}`); // 模仿数据返回 const sucData = { code: 0, data: { list: ['X50 Pro', 'IQOO Neo'], user: 'jack' }, message: '申请胜利' }; const errData = { code: 100030, message: '未登录，请从新登录' }; if (Date.now() % 2 === 0) { this.hooks.transformResponse.callAsync(config, sucData, undefined, () => { this.hooks.success.callAsync(sucData, () => { this.hooks.finally.call(config, sucData); }); }); } else { this.hooks.fail.callAsync(config, errData, () => { this.hooks.finally.call(config, errData); }); } }); } start(config) { this.config = config; /* 通过Hook调用定制串联流程 1. 先 transformRequest 2. 解决 loading 3. 发动 request */ this.hooks.transformRequest.callAsync(this.config, undefined, () => { this.hooks.loading.callAsync(this.config.loading, () => { }); this.hooks.request.call(this.config); }); }} const s = new Service(); s.hooks.success.tap('RenderList', (res) => { const { data } = res; console.log(`列表数据：${JSON.stringify(data.list)}`);}); s.hooks.success.tap('UpdateUserInfo', (res) => { const { data } = res; console.log(`用户信息：${JSON.stringify(data.user)}`);}); s.hooks.fail.tap('HandlerError', (config, error) => { console.log(`申请失败了,config=${JSON.stringify(config)},error=${JSON.stringify(error)}`);}); s.hooks.finally.tap('DoFinally', (config, data) => { console.log(`DoFinally,config=${JSON.stringify(config)},data=${JSON.stringify(data)}`);}); s.start({ base: '/cgi/cms/', loading: true}); /*胜利返回输入：transformRequest拦截器：Origin:{"base":"/cgi/cms/","loading":true};transformRequest拦截器：after:{"base":"/cgi/cms/","loading":true,"__transformRequest":true};展现ajax-loading发送申请配置：{"base":"/cgi/cms/","loading":true,"__transformRequest":true}transformResponse拦截器：Origin:{"base":"/cgi/cms/","loading":true,"__transformRequest":true};transformResponse拦截器：After:{"code":0,"data":{"list":["X50 Pro","IQOO Neo"],"user":"jack"},"message":"申请胜利","__transformResponse":true}列表数据：["X50 Pro","IQOO Neo"]用户信息："jack"DoFinally,config={"base":"/cgi/cms/","loading":true,"__transformRequest":true},data={"code":0,"data":{"list":["X50 Pro","IQOO Neo"],"user":"jack"},"message":"申请胜利","__transformResponse":true}*/下面的代码，咱们能够持续优化：把每个流程点都形象成一个独立插件，最初再串联起来。如解决loading展现的独立成LoadingPlugin.js，返回预处理transformResponse独立成TransformResponsePlugin.js，这样咱们可能失去这么一个构造：
这个构造就和赫赫有名的Webpack组织插件的模式基本一致了。接下来咱们看看tapable在Webpack中的利用，看一看为什么tapable可能称为Webpack基石。
4.3 tapable在 Webpack中的利用
- Webpack中，所有皆插件（Hook）。
- Webpack通过tapable将这些插件串起来，组成固定流程。
- tapable解耦了流程工作和具体实现，同时提供了弱小的扩大能力：拿到Hook，就能插入本人的逻辑。（咱们平时写Webpack插件，就是找到对应的Hook去，而后注册咱们本人的钩子函数。这样就不便地把咱们自定义逻辑，插入到了Webpack工作流程中了）。
如果你须要弱小的流程治理能力，能够思考基于tapable去做架构设计。
五、小结
- tapable是一个流程管理工具。
- 提供了10种类型Hook，能够很不便地让咱们去实现简单的业务流程。
- tapable外围原理是基于配置，通过new Function形式，实时动静生成函数表达式去执行，从而实现逻辑
- tapable通过串联流程节点来实现流程管制，保障了流程的精确有序。
- 每个流程节点能够任意注册钩子函数，从而提供了弱小的扩大能力。
- tapable是Webpack基石，它撑持了Webpack宏大的插件零碎，又保障了这些插件的有序运行。
- 如果你也正在做一个简单的流程零碎（工作零碎），能够思考用tapable来治理你的流程。
作者：vivo-Ou Fujun