前不久写了一篇webpack基本原理和AST用法的文章，本来想接着写webpack plugin的原理的，但是发现webpack plugin高度依赖tapable这个库，不清楚tapable而直接去看webpack plugin始终有点雾里看花的意思。所以就先去看了下tapable的文档和源码，发现这个库非常有意思，是增强版的发布订阅模式。发布订阅模式在源码世界实在是太常见了，我们已经在多个库源码里面见过了：

  1. redux的subscribe和dispatch
  2. Node.js的EventEmitter
  3. redux-saga的take和put

这些库基本都自己实现了自己的发布订阅模式，实现方式主要是用来满足自己的业务需求，而tapable并没有具体的业务逻辑，是一个专门用来实现事件订阅或者他自己称为hook(钩子)的工具库，其根本原理还是发布订阅模式，但是他实现了多种形式的发布订阅模式，还包含了多种形式的流程控制。

tapable暴露多个API，提供了多种流程控制方式，连使用都是比较复杂的，所以我想分两篇文章来写他的原理：

  1. 先看看用法，体验下他的多种流程控制方式
  2. 通过用法去看看源码是怎么实现的

本文就是讲用法的文章，知道了他的用法，大家以后如果有自己实现hook或者事件监听的需求，可以直接拿过来用，非常强大！

本文例子已经全部上传到GitHub，大家可以拿下来做个参考：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Engineering/tapable-usage

tapable是webpack的核心模块，也是webpack团队维护的，是webpack plugin的基本实现方式。他的主要功能是为使用者提供强大的hook机制，webpack plugin就是基于hook的。

下面是官方文档中列出来的主要API，所有API的名字都是以Hook结尾的：

  1. const {
  2. 	SyncHook,
  3. 	SyncBailHook,
  4. 	SyncWaterfallHook,
  5. 	SyncLoopHook,
  6. 	AsyncParallelHook,
  7. 	AsyncParallelBailHook,
  8. 	AsyncSeriesHook,
  9. 	AsyncSeriesBailHook,
  10. 	AsyncSeriesWaterfallHook
  11.  } = require("tapable");

这些API的名字其实就解释了他的作用，注意这些关键字：Sync, Async, Bail, Waterfall, Loop, Parallel, Series。下面分别来解释下这些关键字：

Sync：这是一个同步的hook

Async：这是一个异步的hook

Bail：Bail在英文中的意思是保险，保障的意思，实现的效果是，当一个hook注册了多个回调方法，任意一个回调方法返回了不为undefined的值，就不再执行后面的回调方法了，就起到了一个“保险丝”的作用。

Waterfall：Waterfall在英语中是瀑布的意思，在编程世界中表示顺序执行各种任务，在这里实现的效果是，当一个hook注册了多个回调方法，前一个回调执行完了才会执行下一个回调，而前一个回调的执行结果会作为参数传给下一个回调函数。

Loop：Loop就是循环的意思，实现的效果是，当一个hook注册了回调方法，如果这个回调方法返回了true就重复循环这个回调，只有当这个回调返回undefined才执行下一个回调。

Parallel：Parallel是并行的意思，有点类似于Promise.all，就是当一个hook注册了多个回调方法，这些回调同时开始并行执行。

Series：Series就是串行的意思，就是当一个hook注册了多个回调方法，前一个执行完了才会执行下一个。

Parallel和Series的概念只存在于异步的hook中，因为同步hook全部是串行的。

下面我们分别来介绍下每个API的用法和效果。

同步API就是这几个：

  1. const {
  2. 	SyncHook,
  3. 	SyncBailHook,
  4. 	SyncWaterfallHook,
  5. 	SyncLoopHook,
  6.  } = require("tapable");

前面说了，同步API全部是串行的，所以这几个的区别就在流程控制上。

SyncHook是一个最基础的hook，其使用方法和效果接近我们经常使用的发布订阅模式，注意tapable导出的所有hook都是类，基本用法是这样的：

  1. const hook = new SyncHook(["arg1", "arg2", "arg3"]);

因为SyncHook是一个类，所以使用new来生成一个实例，构造函数接收的参数是一个数组["arg1", "arg2", "arg3"]，这个数组有三项，表示生成的这个实例注册回调的时候接收三个参数。实例hook主要有两个实例方法：

  1. tap：就是注册事件回调的方法。
  2. call：就是触发事件，执行回调的方法。

下面我们扩展下官方文档中小汽车加速的例子来说明下具体用法：

  1. const { SyncHook } = require("tapable");
  3. // 实例化一个加速的hook
  4. const accelerate = new SyncHook(["newSpeed"]);
  6. // 注册第一个回调，加速时记录下当前速度
  7. accelerate.tap("LoggerPlugin", (newSpeed) =>
  8.   console.log("LoggerPlugin", `加速到${newSpeed}`)
  9. );
  11. // 再注册一个回调，用来检测是否超速
  12. accelerate.tap("OverspeedPlugin", (newSpeed) => {
  13.   if (newSpeed > 120) {
  14.     console.log("OverspeedPlugin", "您已超速！！");
  15.   }
  16. });
  18. // 再注册一个回调，用来检测速度是否快到损坏车子了
  19. accelerate.tap("DamagePlugin", (newSpeed) => {
  20.   if (newSpeed > 300) {
  21.     console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  22.   }
  23. });
  25. // 触发一下加速事件，看看效果吧
  26. accelerate.call(500);

然后运行下看看吧，当加速事件出现的时候，会依次执行这三个回调：

image-20210309160302799

上面这个例子主要就是用了tap和call这两个实例方法，其中tap接收两个参数，第一个是个字符串，并没有实际用处，仅仅是一个注释的作用，第二个参数就是一个回调函数，用来执行事件触发时的具体逻辑。

  1. accelerate.tap("LoggerPlugin", (newSpeed) =>
  2.   console.log("LoggerPlugin", `加速到${newSpeed}`)
  3. );

上述这种写法其实与webpack官方文档中对于plugin的介绍非常像了，因为webpack的plguin就是用tapable实现的，第一个参数一般就是plugin的名字：

image-20210309154641835

而call就是简单的触发这个事件，在webpack的plguin中一般不需要开发者去触发事件，而是webpack自己在不同阶段会触发不同的事件，比如beforeRun, run等等，plguin开发者更多的会关注这些事件出现时应该进行什么操作，也就是在这些事件上注册自己的回调。

上面的SyncHook其实就是一个简单的发布订阅模式，SyncBailHook就是在这个基础上加了一点流程控制，前面我们说过了，Bail就是个保险，实现的效果是，前面一个回调返回一个不为undefined的值，就中断这个流程。比如我们现在将前面这个例子的SyncHook换成SyncBailHook，然后在检测超速的这个插件里面加点逻辑，当它超速了就返回错误，后面的DamagePlugin就不会执行了：

  1. const { SyncBailHook } = require("tapable");    // 使用的是SyncBailHook
  3. // 实例化一个加速的hook
  4. const accelerate = new SyncBailHook(["newSpeed"]);
  6. accelerate.tap("LoggerPlugin", (newSpeed) =>
  7.   console.log("LoggerPlugin", `加速到${newSpeed}`)
  8. );
  10. // 再注册一个回调，用来检测是否超速
  11. // 如果超速就返回一个错误
  12. accelerate.tap("OverspeedPlugin", (newSpeed) => {
  13.   if (newSpeed > 120) {
  14.     console.log("OverspeedPlugin", "您已超速！！");
  16.     return new Error('您已超速！！');
  17.   }
  18. });
  20. accelerate.tap("DamagePlugin", (newSpeed) => {
  21.   if (newSpeed > 300) {
  22.     console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  23.   }
  24. });
  26. accelerate.call(500);

然后再运行下看看：

image-20210309161001682

可以看到由于OverspeedPlugin返回了一个不为undefined的值，DamagePlugin被阻断，没有运行了。

SyncWaterfallHook也是在SyncHook的基础上加了点流程控制，前面说了，Waterfall实现的效果是将上一个回调的返回值作为参数传给下一个回调。所以通过call传入的参数只会传递给第一个回调函数，后面的回调接受都是上一个回调的返回值，最后一个回调的返回值会作为call的返回值返回给最外层：

  1. const { SyncWaterfallHook } = require("tapable");
  3. const accelerate = new SyncWaterfallHook(["newSpeed"]);
  5. accelerate.tap("LoggerPlugin", (newSpeed) => {
  6.   console.log("LoggerPlugin", `加速到${newSpeed}`);
  8.   return "LoggerPlugin";
  9. });
  11. accelerate.tap("Plugin2", (data) => {
  12.   console.log(`上一个插件是: ${data}`);
  14.   return "Plugin2";
  15. });
  17. accelerate.tap("Plugin3", (data) => {
  18.   console.log(`上一个插件是: ${data}`);
  20.   return "Plugin3";
  21. });
  23. const lastPlugin = accelerate.call(100);
  25. console.log(`最后一个插件是：${lastPlugin}`);

然后看下运行效果吧：

image-20210309162008465

SyncLoopHook是在SyncHook的基础上添加了循环的逻辑，也就是如果一个插件返回true就会一直执行这个插件，直到他返回undefined才会执行下一个插件：

  1. const { SyncLoopHook } = require("tapable");
  3. const accelerate = new SyncLoopHook(["newSpeed"]);
  5. accelerate.tap("LoopPlugin", (newSpeed) => {
  6.   console.log("LoopPlugin", `循环加速到${newSpeed}`);
  8.   return new Date().getTime() % 5 !== 0 ? true : undefined;
  9. });
  11. accelerate.tap("LastPlugin", (newSpeed) => {
  12.   console.log("循环加速总算结束了");
  13. });
  15. accelerate.call(100);

执行效果如下：

image-20210309163514680

所谓异步API是相对前面的同步API来说的，前面的同步API的所有回调都是按照顺序同步执行的，每个回调内部也全部是同步代码。但是实际项目中，可能需要回调里面处理异步情况，也可能希望多个回调可以同时并行执行，也就是Parallel。这些需求就需要用到异步API了，主要的异步API就是这些：

  1. const {
  2. 	AsyncParallelHook,
  3. 	AsyncParallelBailHook,
  4. 	AsyncSeriesHook,
  5. 	AsyncSeriesBailHook,
  6. 	AsyncSeriesWaterfallHook
  7.  } = require("tapable");

既然涉及到了异步，那肯定还需要异步的处理方式，tapable支持回调函数和Promise两种异步的处理方式。所以这些异步API除了用前面的tap来注册回调外，还有两个注册回调的方法：tapAsync和tapPromise，对应的触发事件的方法为callAsync和promise。下面分别来看下每个API吧：

AsyncParallelHook从前面介绍的命名规则可以看出，他是一个异步并行执行的Hook，我们先用tapAsync的方式来看下怎么用吧。

还是那个小汽车加速的例子，只不过这个小汽车加速没那么快了，需要一秒才能加速完成，然后我们在2秒的时候分别检测是否超速和是否损坏，为了看出并行的效果，我们记录下整个过程从开始到结束的时间：

  1. const { AsyncParallelHook } = require("tapable");
  3. const accelerate = new AsyncParallelHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. // 注意注册异步事件需要使用tapAsync
  8. // 接收的最后一个参数是done，调用他来表示当前任务执行完毕
  9. accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
  10.   // 1秒后加速才完成
  11.   setTimeout(() => {
  12.     console.log("LoggerPlugin", `加速到${newSpeed}`);
  14.     done();
  15.   }, 1000);
  16. });
  18. accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
  19.   // 2秒后检测是否超速
  20.   setTimeout(() => {
  21.     if (newSpeed > 120) {
  22.       console.log("OverspeedPlugin", "您已超速！！");
  23.     }
  24.     done();
  25.   }, 2000);
  26. });
  28. accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
  29.   // 2秒后检测是否损坏
  30.   setTimeout(() => {
  31.     if (newSpeed > 300) {
  32.       console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  33.     }
  35.     done();
  36.   }, 2000);
  37. });
  39. accelerate.callAsync(500, () => {
  40.   console.log("任务全部完成");
  41.   console.timeEnd("total time"); // 记录总共耗时
  42. });

上面代码需要注意的是，注册回调要使用tapAsync，而且回调函数里面最后一个参数会自动传入done，你可以调用他来通知tapable当前任务已经完成。触发任务需要使用callAsync，他最后也接收一个函数，可以用来处理所有任务都完成后需要执行的操作。所以上面的运行结果就是：

image-20210309171527773

从这个结果可以看出，最终消耗的时间大概是2秒，也就是三个任务中最长的单个任务耗时，而不是三个任务耗时的总额，这就实现了Parallel并行的效果。

现在都流行Promise，所以tapable也是支持的，执行效果是一样的，只是写法不一样而已。要用tapPromise，需要注册的回调返回一个promise，同时触发事件也需要用promise，任务运行完执行的处理可以直接使用then，所以上述代码改为：

  1. const { AsyncParallelHook } = require("tapable");
  3. const accelerate = new AsyncParallelHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. // 注意注册异步事件需要使用tapPromise
  8. // 回调函数要返回一个promise
  9. accelerate.tapPromise("LoggerPlugin", (newSpeed) => {
  10.   return new Promise((resolve) => {
  11.     // 1秒后加速才完成
  12.     setTimeout(() => {
  13.       console.log("LoggerPlugin", `加速到${newSpeed}`);
  15.       resolve();
  16.     }, 1000);
  17.   });
  18. });
  20. accelerate.tapPromise("OverspeedPlugin", (newSpeed) => {
  21.   return new Promise((resolve) => {
  22.     // 2秒后检测是否超速
  23.     setTimeout(() => {
  24.       if (newSpeed > 120) {
  25.         console.log("OverspeedPlugin", "您已超速！！");
  26.       }
  27.       resolve();
  28.     }, 2000);
  29.   });
  30. });
  32. accelerate.tapPromise("DamagePlugin", (newSpeed) => {
  33.   return new Promise((resolve) => {
  34.     // 2秒后检测是否损坏
  35.     setTimeout(() => {
  36.       if (newSpeed > 300) {
  37.         console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  38.       }
  40.       resolve();
  41.     }, 2000);
  42.   });
  43. });
  45. // 触发事件使用promise，直接用then处理最后的结果
  46. accelerate.promise(500).then(() => {
  47.   console.log("任务全部完成");
  48.   console.timeEnd("total time"); // 记录总共耗时
  49. });

这段代码的逻辑和运行结果和上面那个是一样的，只是写法不一样：

image-20210309172537951

既然tapable支持这两种异步写法，那这两种写法可以混用吗？我们来试试吧：

  1. const { AsyncParallelHook } = require("tapable");
  3. const accelerate = new AsyncParallelHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. // 来一个promise写法
  8. accelerate.tapPromise("LoggerPlugin", (newSpeed) => {
  9.   return new Promise((resolve) => {
  10.     // 1秒后加速才完成
  11.     setTimeout(() => {
  12.       console.log("LoggerPlugin", `加速到${newSpeed}`);
  14.       resolve();
  15.     }, 1000);
  16.   });
  17. });
  19. // 再来一个async写法
  20. accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
  21.   // 2秒后检测是否超速
  22.   setTimeout(() => {
  23.     if (newSpeed > 120) {
  24.       console.log("OverspeedPlugin", "您已超速！！");
  25.     }
  26.     done();
  27.   }, 2000);
  28. });
  30. // 使用promise触发事件
  31. // accelerate.promise(500).then(() => {
  32. //   console.log("任务全部完成");
  33. //   console.timeEnd("total time"); // 记录总共耗时
  34. // });
  36. // 使用callAsync触发事件
  37. accelerate.callAsync(500, () => {
  38.   console.log("任务全部完成");
  39.   console.timeEnd("total time"); // 记录总共耗时
  40. });

这段代码无论我是使用promise触发事件还是callAsync触发运行的结果都是一样的，所以tapable内部应该是做了兼容转换的，两种写法可以混用：

image-20210309173217034

由于tapAsync和tapPromise只是写法上的不一样，我后面的例子就全部用tapAsync了。

前面已经看了SyncBailHook，知道带Bail的功能就是当一个任务返回不为undefined的时候，阻断后面任务的执行。但是由于Parallel任务都是同时开始的，阻断是阻断不了了，实际效果是如果有一个任务返回了不为undefined的值，最终的回调会立即执行，并且获取Bail任务的返回值。我们将上面三个任务执行时间错开，分别为1秒，2秒，3秒，然后在2秒的任务触发Bail就能看到效果了：

  1. const { AsyncParallelBailHook } = require("tapable");
  3. const accelerate = new AsyncParallelBailHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
  8.   // 1秒后加速才完成
  9.   setTimeout(() => {
  10.     console.log("LoggerPlugin", `加速到${newSpeed}`);
  12.     done();
  13.   }, 1000);
  14. });
  16. accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
  17.   // 2秒后检测是否超速
  18.   setTimeout(() => {
  19.     if (newSpeed > 120) {
  20.       console.log("OverspeedPlugin", "您已超速！！");
  21.     }
  23.     // 这个任务的done返回一个错误
  24.     // 注意第一个参数是node回调约定俗成的错误
  25.     // 第二个参数才是Bail的返回值
  26.     done(null, new Error("您已超速！！"));
  27.   }, 2000);
  28. });
  30. accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
  31.   // 3秒后检测是否损坏
  32.   setTimeout(() => {
  33.     if (newSpeed > 300) {
  34.       console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  35.     }
  37.     done();
  38.   }, 3000);
  39. });
  41. accelerate.callAsync(500, (error, data) => {
  42.   if (data) {
  43.     console.log("任务执行出错：", data);
  44.   } else {
  45.     console.log("任务全部完成");
  46.   }
  47.   console.timeEnd("total time"); // 记录总共耗时
  48. });

可以看到执行到任务2时，由于他返回了一个错误，所以最终的回调会立即执行，但是由于任务3之前已经同步开始了，所以他自己仍然会运行完，只是已经不影响最终结果了：

image-20210311142451224

AsyncSeriesHook是异步串行hook，如果有多个任务，这多个任务之间是串行的，但是任务本身却可能是异步的，下一个任务必须等上一个任务done了才能开始：

  1. const { AsyncSeriesHook } = require("tapable");
  3. const accelerate = new AsyncSeriesHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
  8.   // 1秒后加速才完成
  9.   setTimeout(() => {
  10.     console.log("LoggerPlugin", `加速到${newSpeed}`);
  12.     done();
  13.   }, 1000);
  14. });
  16. accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
  17.   // 2秒后检测是否超速
  18.   setTimeout(() => {
  19.     if (newSpeed > 120) {
  20.       console.log("OverspeedPlugin", "您已超速！！");
  21.     }
  22.     done();
  23.   }, 2000);
  24. });
  26. accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
  27.   // 2秒后检测是否损坏
  28.   setTimeout(() => {
  29.     if (newSpeed > 300) {
  30.       console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  31.     }
  33.     done();
  34.   }, 2000);
  35. });
  37. accelerate.callAsync(500, () => {
  38.   console.log("任务全部完成");
  39.   console.timeEnd("total time"); // 记录总共耗时
  40. });

每个任务代码跟AsyncParallelHook是一样的，只是使用的Hook不一样，而最终效果的区别是：AsyncParallelHook所有任务同时开始，所以最终总耗时就是耗时最长的那个任务的耗时；AsyncSeriesHook的任务串行执行，下一个任务要等上一个任务完成了才能开始，所以最终总耗时是所有任务耗时的总和，上面这个例子就是1 + 2 + 2，也就是5秒：

image-20210311144738884

AsyncSeriesBailHook就是在AsyncSeriesHook的基础上加上了Bail的逻辑，也就是中间任何一个任务返回不为undefined的值，终止执行，直接执行最后的回调，并且将这个返回值传给最终的回调：

  1. const { AsyncSeriesBailHook } = require("tapable");
  3. const accelerate = new AsyncSeriesBailHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
  8.   // 1秒后加速才完成
  9.   setTimeout(() => {
  10.     console.log("LoggerPlugin", `加速到${newSpeed}`);
  12.     done();
  13.   }, 1000);
  14. });
  16. accelerate.tapAsync("OverspeedPlugin", (newSpeed, done) => {
  17.   // 2秒后检测是否超速
  18.   setTimeout(() => {
  19.     if (newSpeed > 120) {
  20.       console.log("OverspeedPlugin", "您已超速！！");
  21.     }
  23.     // 这个任务的done返回一个错误
  24.     // 注意第一个参数是node回调约定俗成的错误
  25.     // 第二个参数才是Bail的返回值
  26.     done(null, new Error("您已超速！！"));
  27.   }, 2000);
  28. });
  30. accelerate.tapAsync("DamagePlugin", (newSpeed, done) => {
  31.   // 2秒后检测是否损坏
  32.   setTimeout(() => {
  33.     if (newSpeed > 300) {
  34.       console.log("DamagePlugin", "速度实在太快，车子快散架了。。。");
  35.     }
  37.     done();
  38.   }, 2000);
  39. });
  41. accelerate.callAsync(500, (error, data) => {
  42.   if (data) {
  43.     console.log("任务执行出错：", data);
  44.   } else {
  45.     console.log("任务全部完成");
  46.   }
  47.   console.timeEnd("total time"); // 记录总共耗时
  48. });

这个执行结果跟AsyncParallelBailHook的区别就是AsyncSeriesBailHook被阻断后，后面的任务由于还没开始，所以可以被完全阻断，而AsyncParallelBailHook后面的任务由于已经开始了，所以还会继续执行，只是结果已经不关心了。

image-20210311145241190

Waterfall的作用是将前一个任务的结果传给下一个任务，其他的跟AsyncSeriesHook一样的，直接来看代码吧：

  1. const { AsyncSeriesWaterfallHook } = require("tapable");
  3. const accelerate = new AsyncSeriesWaterfallHook(["newSpeed"]);
  5. console.time("total time"); // 记录起始时间
  7. accelerate.tapAsync("LoggerPlugin", (newSpeed, done) => {
  8.   // 1秒后加速才完成
  9.   setTimeout(() => {
  10.     console.log("LoggerPlugin", `加速到${newSpeed}`);
  12.     // 注意done的第一个参数会被当做error
  13.     // 第二个参数才是传递给后面任务的参数
  14.     done(null, "LoggerPlugin");
  15.   }, 1000);
  16. });
  18. accelerate.tapAsync("Plugin2", (data, done) => {
  19.   setTimeout(() => {
  20.     console.log(`上一个插件是: ${data}`);
  22.     done(null, "Plugin2");
  23.   }, 2000);
  24. });
  26. accelerate.tapAsync("Plugin3", (data, done) => {
  27.   setTimeout(() => {
  28.     console.log(`上一个插件是: ${data}`);
  30.     done(null, "Plugin3");
  31.   }, 2000);
  32. });
  34. accelerate.callAsync(500, (error, data) => {
  35.   console.log("最后一个插件是:", data);
  36.   console.timeEnd("total time"); // 记录总共耗时
  37. });

运行效果如下：

image-20210311150510851

本文例子已经全部上传到GitHub，大家可以拿下来做个参考：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Engineering/tapable-usage

  1. tapable是webpack实现plugin的核心库，他为webpack提供了多种事件处理和流程控制的Hook。
  2. 这些Hook主要有同步(Sync)和异步(Async)两种，同时还提供了阻断(Bail)，瀑布(Waterfall)，循环(Loop)等流程控制，对于异步流程还提供了并行(Paralle)和串行(Series)两种控制方式。
  3. tapable其核心原理还是事件的发布订阅模式，他使用tap来注册事件，使用call来触发事件。
  4. 异步hook支持两种写法：回调和Promise，注册和触发事件分别使用tapAsync/callAsync和tapPromise/promise。
  5. 异步hook使用回调写法的时候要注意，回调函数的第一个参数默认是错误，第二个参数才是向外传递的数据，这也符合node回调的风格。

文章的最后，感谢你花费宝贵的时间阅读本文，如果本文给了你一点点帮助或者启发，请不要吝啬你的赞和GitHub小星星，你的支持是作者持续创作的动力。

欢迎关注我的公众号进击的大前端第一时间获取高质量原创~

“前端进阶知识”系列文章：https://juejin.im/post/5e3ffc85518825494e2772fd

“前端进阶知识”系列文章源码GitHub地址： https://github.com/dennis-jiang/Front-End-Knowledges

QR1270

版权声明：本文为dennisj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dennisj/p/14538668.html