Tapable：Webpack 的事件流核心引擎

已于 2025-03-21 10:06:36 修改
阅读量867 收藏 11
点赞数 30
CC 4.0 BY-SA版权
分类专栏： 前端框架 文章标签： webpack 前端 node.js
于 2025-03-21 01:31:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vv_bug/article/details/146410041

Tapable

最近想做一个前端小工具，考虑全部做成插件式的 ，由核心代码去调用整合所有的插件，之前有研究过 Webpack 的源码，觉得 Webpack 的插件系统写的还是很牛的，这得益于它官方的核心事件库 Tapable。

之前研究 Webpack源码的时候并没有深入研究 Tabable，正好可以补上，下面跟着我的节奏一起撸一下 Tabable 源码！

简介

Tapable 库是一个事件流机制的核心工具，它提供了多种 Hook 类型，用于管理插件和自定义事件流。

一、同步 Hooks

SyncHook

同步串行执行所有注册的回调函数，不关心返回值。

示例
const SyncHook = require("../lib/SyncHook");

const syncHook = new SyncHook(["name", "age"], "user");
syncHook.tap("syncHook_tap1", function (name, age) {
	console.log("syncHook_tap1", name, age);
});
// syncHook.tap({ name: "syncHook_tap2",before: "syncHook_tap1" }, function (name, age) {
// 	console.log("syncHook_tap2", name, age);
// });
syncHook.tap({ name: "syncHook_tap2",stage: -1 }, function (name, age) {
	console.log("syncHook_tap2", name, age);
});
syncHook.call("yasin", 18);
分析
  1. new SyncHook([“name”, “age”], “user”) 执行后，最后 call 方法的生成如下：
function call(name, age) { // 传进去的 ["name", "age"] 参数被当成了动态方法的参数名称
  "use strict";
  var _context;
  var _x = this._x;
  var _fn0 = _x[0];
  _fn0(name, age);
  var _fn1 = _x[1];
  _fn1(name, age);
}
  1. 默认顺序是先执行 tab 方法先执行：tab1->tab2
  2. 可用加 before 参数改变默认顺序，例如 { name: “syncHook_tap2”,before: “syncHook_tap1” }：tab2->tab1
  3. 可用加 stage 参数改变默认顺序，表示权重，默认 0（越小越前执行），例如 { name: “syncHook_tap2”,stage: -1 }：tab2->tab1
作用

  • 事件通知（如日志记录）

    const { SyncHook } = require('tapable');

const hook = new SyncHook(['arg']);
hook.tap('Logger1', (arg) => console.log('Logger1:', arg));
hook.tap('Logger2', (arg) => console.log('Logger2:', arg));

hook.call('Hello'); // 依次输出 Logger1: Hello 和 Logger2: Hello

SyncBailHook

同步串行执行回调，若某个回调返回 非 undefined，则停止后续回调。

示例
const SyncBailHook = require("../lib/SyncBailHook");

const synBailHook = new SyncBailHook(["name", "age"], "user");
synBailHook.tap("synBailHook_tap1", function (name, age) {
  console.log("synBailHook_tap1", name, age);
});
// syncHook.tap({ name: "syncHook_tap2",before: "syncHook_tap1" }, function (name, age) {
//  console.log("syncHook_tap2", name, age);
// });
synBailHook.tap({ name: "synBailHook_tap2",stage: -1 }, function (name, age) {
  console.log("synBailHook_tap2", name, age);
});
synBailHook.call("yasin", 18);
分析

  1. new SyncBailHook([“name”, “age”], “user”) 执行后，最后 call 方法的生成如下：

    function call(name, age) {
  "use strict";
  var _context;
  var _x = this._x;
  var _fn0 = _x[0];
  var _result0 = _fn0(name, age);
  if(_result0 !== undefined) {
    return _result0;
  } else {
    var _fn1 = _x[1];
    var _result1 = _fn1(name, age);
    if(_result1 !== undefined) {
      return _result1;
      ;
    } else {
    }
  }
}

    有人说，那么 tab 方法调用次数多了会变成什么样呢？

    ...
synBailHook.tap({ name: "synBailHook_tap3"}, function (name, age) {
	console.log("synBailHook_tap3", name, age);
});
synBailHook.tap({ name: "synBailHook_tap4"}, function (name, age) {
	console.log("synBailHook_tap4", name, age);
});
synBailHook.call("yasin", 18);

    最后生成的 call 方法为：

    function call(name, age) {
  "use strict";
  var _context;
  var _x = this._x;
  var _fn0 = _x[0];
  var _result0 = _fn0(name, age);
  if(_result0 !== undefined) {
    return _result0;
    ;
  } else {
    var _fn1 = _x[1];
    var _result1 = _fn1(name, age);
    if(_result1 !== undefined) {
      return _result1;
      ;
    } else {
      var _fn2 = _x[2];
      var _result2 = _fn2(name, age);
      if(_result2 !== undefined) {
        return _result2;
        ;
      } else {
        var _fn3 = _x[3];
        var _result3 = _fn3(name, age);
        if(_result3 !== undefined) {
          return _result3;
          ;
        } else {
        }
      }
    }
  }
}

    看吧，就是这么简单粗暴，但是很高效！

    其它的参数什么的就跟 SyncHook 差不多了。

作用

  • 安全检查（如权限验证）

    const { SyncBailHook } = require('tapable');

const hook = new SyncBailHook(['user']);
hook.tap('CheckAdmin', (user) => {
  if (user.role !== 'admin') return false; // 终止后续执行
});
hook.tap('LogAccess', (user) => console.log(`${user.name} accessed.`));

const result = hook.call({ name: 'Alice', role: 'user' }); 
// 仅执行 CheckAdmin，返回 false，LogAccess 不会执行

SyncWaterfallHook

同步串行执行回调，前一个回调的返回值会作为参数传给下一个回调。

示例
const SyncWaterfallHook = require("../lib/SyncWaterfallHook");

const syncWaterfallHook = new SyncWaterfallHook(["name", "age"], "user");
syncWaterfallHook.tap("syncWaterfallHook_tap1", function (name, age) {
	console.log("syncWaterfallHook_tap1", name, age);
});
// syncHook.tap({ name: "syncHook_tap2",before: "syncHook_tap1" }, function (name, age) {
// 	console.log("syncHook_tap2", name, age);
// });
syncWaterfallHook.tap({ name: "syncWaterfallHook_tap2",stage: -1 }, function (name, age) {
	console.log("syncWaterfallHook_tap2", name, age);
});
syncWaterfallHook.tap({ name: "syncWaterfallHook_tap3"}, function (name, age) {
	console.log("syncWaterfallHook_tap3", name, age);
});
syncWaterfallHook.tap({ name: "syncWaterfallHook_tap4"}, function (name, age) {
	console.log("syncWaterfallHook_tap4", name, age);
});
syncWaterfallHook.call("yasin", 18);
分析

  1. new SyncWaterfallHook([“name”, “age”], “user”) 执行后，最后 call 方法的生成如下：

    function call(name, age) {
  "use strict";
  var _context;
  var _x = this._x;
  var _fn0 = _x[0];
  var _result0 = _fn0(name, age);
  if(_result0 !== undefined) {
    name = _result0;
  }
  var _fn1 = _x[1];
  var _result1 = _fn1(name, age);
  if(_result1 !== undefined) {
    name = _result1;
  }
  var _fn2 = _x[2];
  var _result2 = _fn2(name, age);
  if(_result2 !== undefined) {
    name = _result2;
  }
  var _fn3 = _x[3];
  var _result3 = _fn3(name, age);
  if(_result3 !== undefined) {
    name = _result3;
  }
  return name;
}

    从源码我们可以看出，我们虽然传入了 age、name 两个参数，但是但凡有一个钩子函数返回了非 undefine 的值的时候，就会将前一个回调的返回值会作为参数传给下一个回调。

    比如我们修改一下 syncWaterfallHook_tap3 钩子函数：

    const SyncWaterfallHook = require("../lib/SyncWaterfallHook");

const syncWaterfallHook = new SyncWaterfallHook(["name", "age"], "user");
syncWaterfallHook.tap("syncWaterfallHook_tap1", function (name, age) {
	console.log("syncWaterfallHook_tap1", name, age);
});
syncWaterfallHook.tap({ name: "syncWaterfallHook_tap2",stage: -1 }, function (name, age) {
	console.log("syncWaterfallHook_tap2", name, age);
});
syncWaterfallHook.tap({ name: "syncWaterfallHook_tap3"}, function (name, age) {
	console.log("syncWaterfallHook_tap3", name, age);
	return "我被 tab3 函数改改成了小白";
});
syncWaterfallHook.tap({ name: "syncWaterfallHook_tap4"}, function (name, age) {
	console.log("syncWaterfallHook_tap4", name, age);
});
syncWaterfallHook.call("yasin", 18);

    执行结果：

    syncWaterfallHook_tap2 yasin 18
syncWaterfallHook_tap1 yasin 18
syncWaterfallHook_tap3 yasin 18
syncWaterfallHook_tap4 我被 tab3 函数改改成了小白 18

    可以看到，name 参数被 tab3 钩子函数的 return 值改掉了，不过从源码也可以看出，SyncWaterfallHook 也只能修改第一个 name 参数的值，并不会修改 age 的值。

作用

  • 数据处理管道（如字符串处理链）

    const { SyncWaterfallHook } = require('tapable');

const hook = new SyncWaterfallHook(['text']);
hook.tap('Trim', (text) => text.trim());
hook.tap('UpperCase', (text) => text.toUpperCase());

const result = hook.call('  hello  '); // 输出 "HELLO"

SyncLoopHook

同步循环执行回调，若某个回调返回 true，则重复执行，直到返回 undefined。

示例
const SyncLoopHook = require("../lib/SyncLoopHook");

const syncLoopHook = new SyncLoopHook(["name", "age"], "user");
syncLoopHook.tap("syncLoopHook_tap1", function (name, age) {
	console.log("syncLoopHook_tap1", name, age);
});
syncLoopHook.tap({ name: "syncLoopHook_tap2",stage: -1 }, function (name, age) {
	console.log("syncLoopHook_tap2", name, age);
});
syncLoopHook.tap({ name: "syncLoopHook_tap3"}, function (name, age) {
	console.log("syncLoopHook_tap3", name, age);
	// return "我被 tab3 函数改改成了小白";
});
syncLoopHook.tap({ name: "syncLoopHook_tap4"}, function (name, age) {
	console.log("syncLoopHook_tap4", name, age);
});
syncLoopHook.call("yasin", 18);
分析

  1. 看一下 SyncLoopHook 构造的 call 函数：

    (function anonymous(name, age
) {
  "use strict";
  var _context;
  var _x = this._x;
  var _loop;
  do {
    _loop = false;
    var _fn0 = _x[0];
    var _result0 = _fn0(name, age);
    if(_result0 !== undefined) {
      _loop = true;
    } else {
      var _fn1 = _x[1];
      var _result1 = _fn1(name, age);
      if(_result1 !== undefined) {
        _loop = true;
      } else {
        var _fn2 = _x[2];
        var _result2 = _fn2(name, age);
        if(_result2 !== undefined) {
          _loop = true;
        } else {
          var _fn3 = _x[3];
          var _result3 = _fn3(name, age);
          if(_result3 !== undefined) {
            _loop = true;
          } else {
            if(!_loop) {
            }
          }
        }
      }
    }
  } while (_loop);

})

    可以看到，就是一个 do{}while() 语句，遇到有 return true 的钩子函数的时候就一直循环执行所有钩子函数。

作用

  • 轮询直到条件满足（如重试机制）

    const { SyncLoopHook } = require('tapable');

let retries = 0;
const hook = new SyncLoopHook();
hook.tap('Retry', () => {
  retries++;
  return retries < 3 ? true : undefined; // 重试 3 次后停止
});

hook.call(); // 回调执行 3 次

二、异步 Hooks

AsyncSeriesHook

异步串行执行回调，按注册顺序执行，需手动调用 callback 或返回 Promise。

示例
const AsyncSeriesHook = require("../lib/AsyncSeriesHook");

const asyncSeriesHook = new AsyncSeriesHook(["name", "age"], "user");
asyncSeriesHook.tapAsync("asyncSeriesHook_tap1", function (name, age, callback) {
	console.log("asyncSeriesHook_tap1", name, age);
	setTimeout(callback,1000);
});
asyncSeriesHook.tapAsync({
	name: "asyncSeriesHook_tap2",
	stage: -1
}, function (name, age, callback) {
	console.log("asyncSeriesHook_tap2", name, age);
	setTimeout(callback,1000);
});
asyncSeriesHook.tapAsync({name: "asyncSeriesHook_tap3"}, function (name, age, callback) {
	console.log("asyncSeriesHook_tap3", name, age);
	setTimeout(callback,1000);
});
asyncSeriesHook.tapAsync({name: "asyncSeriesHook_tap4"}, function (name, age, callback) {
	console.log("asyncSeriesHook_tap4", name, age);
	setTimeout(()=>callback("我是 tap4，任务完成！"),1000);
});
asyncSeriesHook.callAsync("yasin", 18, (result) => {
	console.log("result->", result);
});

执行结果

asyncSeriesHook_tap2 yasin 18
asyncSeriesHook_tap1 yasin 18
asyncSeriesHook_tap3 yasin 18
asyncSeriesHook_tap4 yasin 18
result-> 我是 tap4，任务完成！

（因为 tab2 的 stage 被我们修改成了 -1，所以它最先执行）每个 tab 钩子函数间隔 1s 顺序执行函数，直到 tab4 最后一个钩子返回了 result 的值。

分析

  1. 看一下 SyncLoopHook 构造的 callAsync 函数：

    (function anonymous(name, age, _callback
) {
  "use strict";
  var _context;
  var _x = this._x;

  function _next2() {
    var _fn3 = _x[3];
    _fn3(name, age, (function (_err3) {
      if(_err3) {
        _callback(_err3);
      } else {
        _callback();
      }
    }));
  }

  function _next1() {
    var _fn2 = _x[2];
    _fn2(name, age, (function (_err2) {
      if(_err2) {
        _callback(_err2);
      } else {
        _next2();
      }
    }));
  }

  function _next0() {
    var _fn1 = _x[1];
    _fn1(name, age, (function (_err1) {
      if(_err1) {
        _callback(_err1);
      } else {
        _next1();
      }
    }));
  }

  var _fn0 = _x[0];
  _fn0(name, age, (function (_err0) {
    if(_err0) {
      _callback(_err0);
    } else {
      _next0();
    }
  }));

})

    从源码我们可以看出：

    • 只有上一个 tab 钩子函数调用的 callback 函数，下一个 tab 钩子函数才会执行。
    • 只要有一个 tab 钩子函数调用了 callback 函数，并且传递了值，整个链路就直接结束了。

  2. 将 tab3、tab4 钩子函数改成 tabPromise 方法：

    const AsyncSeriesHook = require("../lib/AsyncSeriesHook");

const asyncSeriesHook = new AsyncSeriesHook(["name", "age"], "user");
asyncSeriesHook.tapAsync("asyncSeriesHook_tap1", function (name, age, callback) {
	console.log("asyncSeriesHook_tap1", name, age);
	setTimeout(callback, 1000);
});
asyncSeriesHook.tapAsync({
	name: "asyncSeriesHook_tap2",
	stage: -1
}, function (name, age, callback) {
	console.log("asyncSeriesHook_tap2", name, age);
	setTimeout(callback, 1000);
});
asyncSeriesHook.tapPromise({name: "asyncSeriesHook_tap3"}, function (name, age) {
	console.log("asyncSeriesHook_tap3", name, age);
	return new Promise((resolve)=>{
		setTimeout(resolve, 1000);
	})
});
asyncSeriesHook.tapPromise({name: "asyncSeriesHook_tap4"}, function (name, age) {
	console.log("asyncSeriesHook_tap4", name, age);
	return new Promise((resolve, reject)=>{
		setTimeout(()=>reject("我是 tap4，任务完成！"), 1000);
	})
});
asyncSeriesHook.callAsync("yasin", 18, (result) => {
	console.log("result->", result);
});

    执行结果跟前面 tabAsync 函数一致：

    asyncSeriesHook_tap2 yasin 18
asyncSeriesHook_tap1 yasin 18
asyncSeriesHook_tap3 yasin 18
asyncSeriesHook_tap4 yasin 18
result-> 我是 tap4，任务完成！

    来看一下生成的 callAsync 函数：

    (function anonymous(name, age, _callback
) {
  "use strict";
  var _context;
  var _x = this._x;

  function _next2() {
    var _fn3 = _x[3];
    var _hasResult3 = false;
    var _promise3 = _fn3(name, age);
    if(!_promise3 || !_promise3.then)
      throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise3 + ')');
    _promise3.then((function (_result3) {
      _hasResult3 = true;
      _callback();
    }), function (_err3) {
      if(_hasResult3) throw _err3;
      _callback(_err3);
    });
  }

  function _next1() {
    var _fn2 = _x[2];
    var _hasResult2 = false;
    var _promise2 = _fn2(name, age);
    if(!_promise2 || !_promise2.then)
      throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise2 + ')');
    _promise2.then((function (_result2) {
      _hasResult2 = true;
      _next2();
    }), function (_err2) {
      if(_hasResult2) throw _err2;
      _callback(_err2);
    });
  }

  function _next0() {
    var _fn1 = _x[1];
    _fn1(name, age, (function (_err1) {
      if(_err1) {
        _callback(_err1);
      } else {
        _next1();
      }
    }));
  }

  var _fn0 = _x[0];
  _fn0(name, age, (function (_err0) {
    if(_err0) {
      _callback(_err0);
    } else {
      _next0();
    }
  }));

})

    可以看到，只是把 callback 函数缓存了 Promise.then，其它的都差不多，当某个 tab 钩子函数调用了 Promise.reject 后，整个过程就会立即终止，并返回 reject 的结果至 callAsync 函数。

作用

  • 异步任务队列（如按顺序读取文件）。

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

const hook = new AsyncSeriesHook(['file']);
hook.tapAsync('ReadFile', (file, callback) => {
  setTimeout(() => {
    console.log(`Read ${file}`);
    callback();
  }, 500);
});
hook.tapAsync('ProcessFile', (file, callback) => {
  setTimeout(() => {
    console.log(`Process ${file}`);
    callback();
  }, 300);
});

hook.callAsync('data.txt', () => console.log('All done!'));
// 输出顺序：Read data.txt → Process data.txt → All done!

AsyncParallelHook

异步并行执行所有回调，所有回调完成后触发最终回调。

示例
const AsyncParallelHook = require("../lib/AsyncParallelHook");

const asyncParallelHook = new AsyncParallelHook(["name", "age"], "user");
asyncParallelHook.tapAsync("asyncParallelHook_tap1", function (name, age, callback) {
	console.log("asyncParallelHook_tap1", name, age);
	setTimeout(callback, 1000);
});
asyncParallelHook.tapAsync({
	name: "asyncParallelHook_tap2",
	stage: -1
}, function (name, age, callback) {
	console.log("asyncParallelHook_tap2", name, age);
	setTimeout(callback, 1000);
});
asyncParallelHook.tapPromise({name: "asyncParallelHook_tap3"}, function (name, age) {
	console.log("asyncParallelHook_tap3", name, age);
	return new Promise((resolve)=>{
		setTimeout(resolve, 1000);
	})
});
asyncParallelHook.tapPromise({name: "asyncParallelHook_tap4"}, function (name, age) {
	console.log("asyncParallelHook_tap4", name, age);
	return new Promise((resolve, reject)=>{
		setTimeout(()=>reject("我是 tap4，任务完成！"), 1000);
	})
});
asyncParallelHook.callAsync("yasin", 18, (result) => {
	console.log("result->", result);
});
分析

  1. 看一下 AsyncParallelHook 构造的 callAsync 函数：

    (function anonymous(name, age, _callback
) {
  "use strict";
  var _context;
  var _x = this._x;
  do {
    var _counter = 4; // 定义总共有多少个 tab 钩子函数
    var _done = (function () {
      _callback();
    });
    if(_counter <= 0) break;
    var _fn0 = _x[0];
    _fn0(name, age, (function (_err0) {
      if(_err0) { // 如果有一个 tab 钩子函数调用的 callback 并传递了值
        if(_counter > 0) {
          _callback(_err0); // 直接结束整个过程
          _counter = 0;
        }
      } else { // 调用 callback 没有传值，当前 tab 钩子函数结束，如果所有钩子函数都执行完成，就直接结束整个流程
        if(--_counter === 0) _done();
      }
    }));
    if(_counter <= 0) break;
    var _fn1 = _x[1];
    _fn1(name, age, (function (_err1) {
      if(_err1) {
        if(_counter > 0) {
          _callback(_err1);
          _counter = 0;
        }
      } else {
        if(--_counter === 0) _done();
      }
    }));
    if(_counter <= 0) break;
    var _fn2 = _x[2];
    var _hasResult2 = false;
    var _promise2 = _fn2(name, age);
    if(!_promise2 || !_promise2.then)
      throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise2 + ')');
    _promise2.then((function (_result2) {
      _hasResult2 = true;
      if(--_counter === 0) _done();
    }), function (_err2) {
      if(_hasResult2) throw _err2;
      if(_counter > 0) {
        _callback(_err2);
        _counter = 0;
      }
    });
    if(_counter <= 0) break;
    var _fn3 = _x[3];
    var _hasResult3 = false;
    var _promise3 = _fn3(name, age);
    if(!_promise3 || !_promise3.then)
      throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise3 + ')');
    _promise3.then((function (_result3) {
      _hasResult3 = true;
      if(--_counter === 0) _done();
    }), function (_err3) {
      if(_hasResult3) throw _err3;
      if(_counter > 0) {
        _callback(_err3);
        _counter = 0;
      }
    });
  } while (false);
})
    1. 定义总共有多少个 tab 钩子函数 _counter = 4
    2. 如果有一个 tab 钩子函数调用的 callback 并传递了值
    3. 调用 callback 没有传值，当前 tab 钩子函数结束
    4. 如果所有钩子函数都执行完成，就直接结束整个流程
作用

  • 并行请求（如同时发起多个 API 请求）。

    const { AsyncParallelHook } = require('tapable');

const hook = new AsyncParallelHook(['url']);
hook.tapAsync('Request1', (url, callback) => {
  setTimeout(() => {
    console.log('Request1 to', url);
    callback();
  }, 1000);
});
hook.tapAsync('Request2', (url, callback) => {
  setTimeout(() => {
    console.log('Request2 to', url);
    callback();
  }, 500);
});

hook.callAsync('/api', () => console.log('All requests done!'));
// 输出顺序：Request2 → Request1 → All requests done!（按完成时间）

AsyncSeriesWaterfallHook

异步并行执行所有回调，所有回调完成后触发最终回调。

示例
const AsyncSeriesWaterfallHook = require("../lib/AsyncSeriesWaterfallHook");

const asyncSeriesWaterfallHook = new AsyncSeriesWaterfallHook(["name", "age"], "user");
asyncSeriesWaterfallHook.tapAsync("asyncSeriesWaterfallHook_tap1", function (name, age, callback) {
	console.log("asyncSeriesWaterfallHook_tap1", name, age);
	setTimeout(callback, 1000);
});
asyncSeriesWaterfallHook.tapAsync({
	name: "asyncSeriesWaterfallHook_tap2",
	stage: -1
}, function (name, age, callback) {
	console.log("asyncSeriesWaterfallHook_tap2", name, age);
	setTimeout(callback, 1000);
});
asyncSeriesWaterfallHook.tapPromise({name: "asyncSeriesWaterfallHook_tap3"}, function (name, age) {
	console.log("asyncSeriesWaterfallHook_tap3", name, age);
	return new Promise((resolve)=>{
		setTimeout(()=>resolve("我叫小白，我的名称被 tab3 修改了"), 1000);
	})
});
asyncSeriesWaterfallHook.tapPromise({name: "asyncSeriesWaterfallHook_tap4"}, function (name, age) {
	console.log("asyncSeriesWaterfallHook_tap4", name, age);
	return new Promise((resolve, reject)=>{
		setTimeout(()=>reject("我是 tap4，任务完成！"), 1000);
	})
});
asyncSeriesWaterfallHook.callAsync("yasin", 18, (result) => {
	console.log("result->", result);
});

执行结果：

asyncSeriesWaterfallHook_tap2 yasin 18
asyncSeriesWaterfallHook_tap1 yasin 18
asyncSeriesWaterfallHook_tap3 yasin 18
asyncSeriesWaterfallHook_tap4 我叫小白，我的名称被 tab3 修改了 18
result-> 我是 tap4，任务完成！
分析

  1. 看一下 AsyncSeriesWaterfallHook 构造的 callAsync 函数：

    (function anonymous(name, age, _callback
) {
  "use strict";
  var _context;
  var _x = this._x;

  function _next2() {
    var _fn3 = _x[3];
    var _hasResult3 = false;
    var _promise3 = _fn3(name, age);
    if(!_promise3 || !_promise3.then)
      throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise3 + ')');
    _promise3.then((function (_result3) {
      _hasResult3 = true;
      if(_result3 !== undefined) {
        name = _result3;
      }
      _callback(null, name);
    }), function (_err3) {
      if(_hasResult3) throw _err3;
      _callback(_err3);
    });
  }

  function _next1() {
    var _fn2 = _x[2];
    var _hasResult2 = false;
    var _promise2 = _fn2(name, age);
    if(!_promise2 || !_promise2.then)
      throw new Error('Tap function (tapPromise) did not return promise (returned ' + _promise2 + ')');
    _promise2.then((function (_result2) {
      _hasResult2 = true;
      if(_result2 !== undefined) {
        name = _result2;
      }
      _next2();
    }), function (_err2) {
      if(_hasResult2) throw _err2;
      _callback(_err2);
    });
  }

  function _next0() {
    var _fn1 = _x[1];
    _fn1(name, age, (function (_err1, _result1) {
      if(_err1) {
        _callback(_err1);
      } else {
        if(_result1 !== undefined) {
          name = _result1;
        }
        _next1();
      }
    }));
  }

  var _fn0 = _x[0];
  _fn0(name, age, (function (_err0, _result0) {
    if(_err0) {
      _callback(_err0);
    } else {
      if(_result0 !== undefined) {
        name = _result0;
      }
      _next0();
    }
  }));

})
    1. tab 钩子函数按顺序异步执行
    2. 有一个 tab 钩子函数调用了 callback(“错误信息”, “本次 tab 的结果”)，第一个参数如果有值的话，整个过程直接结束，并返回错误信息结果。
    3. 有一个 tab 钩子函数调用了 Promise.reject，整个过程直接结束，并返回错误信息结果。
    4. 有一个 tab 钩子函数调用了 callback(undefined, “本次 tab 的结果”)，第一个参数没有值，第二个参数有值，就会把第二个参数的值带给下一个 tab 钩子函数直至整个过程结束。
    5. 有一个 tab 钩子函数调用了 Promise.resolve(xxx)，就会 xxx 的值带给下一个 tab 钩子函数直至整个过程结束。
作用

  • 并行请求（如同时发起多个 API 请求）

    const { AsyncParallelHook } = require('tapable');

const hook = new AsyncParallelHook(['url']);
hook.tapAsync('Request1', (url, callback) => {
  setTimeout(() => {
    console.log('Request1 to', url);
    callback();
  }, 1000);
});
hook.tapAsync('Request2', (url, callback) => {
  setTimeout(() => {
    console.log('Request2 to', url);
    callback();
  }, 500);
});

hook.callAsync('/api', () => console.log('All requests done!'));
// 输出顺序：Request2 → Request1 → All requests done!（按完成时间）

三、总结

Hook 类型执行方式返回值处理典型场景
SyncHook同步串行忽略返回值事件通知、日志记录
SyncBailHook同步串行非 undefined 终止后续条件检查、权限拦截
SyncWaterfallHook同步串行传递返回值数据加工链
SyncLoopHook同步循环true 触发循环轮询、重试
AsyncSeriesHook异步串行按顺序完成所有任务依赖异步任务（如文件处理）
AsyncParallelHook异步并行所有任务并行完成独立异步任务（如并发请求）
AsyncSeriesWaterfallHook异步串行传递异步返回值异步数据依赖处理

通过组合这些 Hook，可以灵活控制 Webpack 插件或自定义工具的事件流逻辑。
VX扫码关注我，获取更多作者动态：
请添加图片描述

Webpack源码浅析
content6的博客
02-05 1533
compliation就像是生产一部手机，生产的过程基本一致，但生产的手机可能是小米手机也可能是魅族手机。生命周期，之后根据webpack config文件的output配置的path属性，将文件输出到指定的文件夹。compilation代表的是一次编译作业，每一次的编译都可能不同；的加持，代码编写非常灵活，node中流行的callback回调机制（说的就是回调地狱），webpack使用的炉火纯青。至此，从入口文件开始，webpack收集完整了该模块的信息和依赖项，接下来就是如何进一步打包封装模块了。
webpack面试题
fmk1023的博客
03-15 337
1.你知道webpack的作用是什么吗？
tapable详解
风火一回，一生不毁
01-25 3934
tapable详解 tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。 1.安装tapable yarn add tapable 2. 常用hooks import { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, A
一文介绍 Tapable 的特性和使用，助力理解 webpack 插件架构！
梦是太匆
06-25 1235
Tapable 提供的这些钩子，支持同步、异步、熔断、循环、waterfall 等功能特性，以此支撑起 webpack 复杂的编译功能，在理解这些内容之后，我们对 webpack 插件架构的设计会有进一步的理解和使用。
tapable最详细源码分析及手写实现
qq_35385241的博客
04-12 1321
tapable整体介绍 tapable 是一个类似于 Node.js 中的 EventEmitter的库，但更专注于自定义事件的触发和处理。 const { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, AsyncSeriesBailHook, AsyncSeriesWaterfallHook， Asyn
Webpack 核心模块 tapable 解析
weixin_34313182的博客
10-16 428
原文出自：https://www.pandashen.com 前言 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader（加载器）和 plugin（插件）是由 Webpack 开发者和社区开发者共同贡献的，而目前又没有比较系统的开发文...
构建全栈Web应用模板：React、Webpack与Python Flask
Webpack利用其内部的Tapable事件流机制，通过插件对这一系列事件进行监听、拦截和修改，从而控制整个构建流程。 ### Flask相关知识点 Flask是一个用Python编写的轻量级Web框架，它被设计得足够灵活，便于开发者在...
webpack生命周期钩子函数
最新发布
02-11
Webpack 的核心是一个事件流引擎，通过 `Tapable` 库实现了一套丰富的钩子系统。这些钩子分为同步和异步两种类型，在不同的时间点触发相应的回调函数。为了利用这些钩子，通常会创建一个继承自 `Compiler` 或者 `...
Webpack应用开发与模块打包实践指南
Webpack利用内部的Tapable库来发布和订阅事件，从而允许插件进行各种类型的自定义操作。此外，Webpack还支持热模块替换（HMR），它可以在不刷新整个页面的情况下替换、添加或删除模块。 ### 配置Webpack Webpack的...
webpack的tabable
04-28
webpack的tabable流程
24 浅谈Tapable
sinat_41212418的博客
12-09 614
浅谈Tapable Tapable是Webpack中的核心工具，Webpack中许多对象扩展自Tapable类。这个类暴露Tap，TapAsync和TapPromise等方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。 插件类型 通过使用Tapable中提供的不同钩子（Hook）和Tap（Tap，TapAsync，TabPromise）方法，插件可以有着多种不同的方式运行，Compiler hooks分别记录了使用哪些Tapable钩子，指出哪些Tap方法可用。 例如，
Tapable实现原理
油墨香^-^的博客
03-08 340
tapable 对外暴露 9 种 hook 钩子，核心方法是注册、执行、拦截器tapable 实现方式就是根据钩子类型以及注册类型来拼接字符串传入 Function 构造函数创建一个新的 Function 对象webpack 通过 tapable 来对整个构建步骤进行了流程化的管理。实现了对每个构建步骤都能进行灵活定制化需求。如有意见，欢迎一键素质三连，宝～。
前端模块化-理解Tapable与Webpack中的Hooks
逍遥的前端笔记
08-08 515
本文详细介绍了Tapable库及其在Webpack中的应用，涵盖了核心概念、Hook类型及其用途，并通过代码示例展示了各种Hook的实现和使用方法。
深入Webpack之Tapable详解
Cosalneo的博客
03-16 1780
Tapable是什么 官网的解释：是 webpack 的一个核心工具，但也可用于其他地方， 以提供类似的插件接口。 在 Webpack 中的许多对象都扩展自 Tapable 类。 它对外暴露了 tap ，tapAsync 和 tapPromise 等方法， 插件可以使用这些方法向 Webpack 中注入自定义构建的步骤，这些步骤将在构建过程中触发。 Webpack本质上是基于事件流的。Webpack 的生命周期是通过 Tapable 提供的钩子类来实现的。Webpack 的插件体系也是基于 Tapable
webpack源码
woyebuzhidao321的博客
07-03 702
一、打包后文件分析 /** * 01 打包后的文件就是一个函数自调用，当前函数调用时传入一个对象 * 02 这个对象我们为了方便将之称为是模块定义，它就是一个键值对 * 03 这个键名就是当前被加载模块的文件名与某个目录的拼接（） * 04 这个键值就是一个函数，和 node.js 里的模块加载有一些类似，会将被加载模块中的内容包裹于一个函数中 * 05 这个函数在将来某个时间点上会被调用，同时会接收到一定的参数，利用这些参数就可以实现模块的加载操作 * * 06 针对于上述的代码就相当于是
Tapable，看这一篇就够了
油墨香^-^的博客
03-08 377
Webpack 在前端工程化中可谓是大名鼎鼎，在Webpack编译过程中存在两个核心对象。在 Webpack 的世界中，围绕着两个配套的生态 Loader 以及 Plugin 两种机制。。在文章中会带你一步一步从使用到原理去学习 Tapable，一篇文章带你彻底掌握 Tapable。。
由浅入深学习Tapable
ZhangYu_010228的博客
08-12 945
他们通过注入插件的方式，来监听webpack的所有生命周期，插件的注入离不开各种各样的Hook，而他们的Hook是如何得到的呢？的机制与Event类似，它可以用来定义各种各样的钩子，相当于Event中的事件注册，但是与Event不同的是，Event中各个事件之间相互不关联，互不影响，但是tapable注册的事件之间可以是有关系的，这种关系通过。Tapable的每个子类都是一个用于注册和触发事件的钩子，我们可以查看一下SyncHook实例身上有哪些属性，找到它注册事件和触发事件的属性。的核心就是这些钩子类。
Tapable 0.2.8 入门
weixin_30664615的博客
02-26 151
【原文：Tapable 0.2.8 入门】 tapable是webpack的核心框架（4.0以上版本的API已经发生了变化），是一个基于事件流的框架，或者叫做发布订阅模式，或观察者模式，webpack的整个生命周期及其开放的自定义插件系统都离不开tapable的支持，研究其运行原理是阅读webpack源代码的第一步。 Tapable是一个小型库，允许你添加和应用插件到一个ja...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值