什么是 tapable-proxy?
tapable-proxy 是一个 Tapable 钩子的代理包装工具，它可以通过该工具，更方便地添加和删除钩子，并且可以提供一些常用的钩子的封装，使 Tapable 的使用更加简便。
使用方法
安装
使用 npm 命令进行安装：
npm install tapable-proxy --save
引入
在项目中使用引入 Tapable 和 tapable-proxy：
import Tapable from 'tapable'; import TapableProxy from 'tapable-proxy';
或者可以使用 CommonJS 的方式：
const Tapable = require('tapable');
const TapableProxy = require('tapable-proxy');基本使用
tapable-proxy 提供了两个类：Hook 和 Plugin，Hook 代表了一个钩子，类似于 Tapable 中的 Hook，Plugin 则代表了一个插件。
const { Hook, Plugin } = TapableProxy;下面我们来看一下如何使用它们。
Hook
创建一个 Hook，首先我们需要定义一个钩子名称：
const myHook = new Hook('myHook');我们可以通过 tap 方法向钩子添加一个函数：
myHook.tap('myPlugin1', () => {
console.log('myPlugin1');
});
myHook.tap('myPlugin2', () => {
console.log('myPlugin2');
});通过 call 方法触发这个钩子，它会按照添加的函数的顺序依次执行：
myHook.call();
输出结果为：
myPlugin1 myPlugin2
Plugin
我们还需要使用 Plugin 来添加和删除钩子。
首先创建一个 Plugin：
const myPlugin = new Plugin('myHook');使用 apply 方法添加一个函数：
myPlugin.apply(() => {
console.log('hello world');
});现在，我们再次触发钩子：
myHook.call();
此时，输出结果为：
hello world myPlugin1 myPlugin2
我们也可以使用 remove 方法来从钩子上删除一个函数：
myPlugin.remove();
再次触发钩子：
myHook.call();
此时，输出结果为：
myPlugin1 myPlugin2
常用的钩子封装
tapable-proxy 还提供了一些常用钩子和插件的封装。
AsyncSeriesHook
AsyncSeriesHook 是一个用于异步串行调用的钩子，tapable-proxy 中提供了它的封装：
const { AsyncSeriesHookProxy } = TapableProxy;
const myAsyncSeriesHook = new AsyncSeriesHookProxy('myAsyncSeriesHook');
myAsyncSeriesHook.tap('myPlugin1', async () => {
console.log('myPlugin1');
return Promise.resolve();
});
myAsyncSeriesHook.tap('myPlugin2', async () => {
console.log('myPlugin2');
return Promise.resolve();
});
myAsyncSeriesHook.callAsync(() => {
console.log('callback');
});上面的例子中，我们使用 AsyncSeriesHookProxy 封装了一个 AsyncSeriesHook。
使用 tap 方法向钩子添加函数，使用 callAsync 方法触发钩子。
最后一个参数是回调函数，当钩子全部执行完毕后，会调用该回调函数。
SyncHook
SyncHook 是一个用于同步调用的钩子，tapable-proxy 中提供了它的封装：
const { SyncHookProxy } = TapableProxy;
const mySyncHook = new SyncHookProxy('mySyncHook');
mySyncHook.tap('myPlugin1', () => {
console.log('myPlugin1');
});
mySyncHook.tap('myPlugin2', () => {
console.log('myPlugin2');
});
mySyncHook.call();使用 SyncHookProxy 封装了一个 SyncHook。
使用 tap 方法向钩子添加函数，使用 call 方法触发钩子。
其他钩子
以上只是 tapable-proxy 封装的两个常用钩子，除此之外，tapable-proxy 还提供了以下钩子的封装：
- AsyncParallelHook
- AsyncParallelBailHook
- AsyncSeriesLoopHook
- AsyncSeriesWaterfallHook
- SyncBailHook
你可以通过阅读 tapable-proxy 的文档，学习更多的钩子的使用方法。
深度学习
在实际开发中，我们经常需要使用 Tapable 工具去扩展和修改 webpack 的行为。而 tapable-proxy 更是能帮助我们更加便捷地使用 Tapable 工具。
使用 tapable-proxy，你可以简化 Tapable 的 API，并且使用它提供的封装好的钩子。
通过使用 tapable-proxy，你可以将更多精力放在扩展和修改 webpack 的行为上，而不用像使用 Tapable 的时候那样需要关注各种 API 的使用方法。
结语
通过本文的介绍，你学习了如何使用 tapable-proxy 来更方便地使用 Tapable 工具，并且了解了 tapable-proxy 提供的一些常用的钩子的封装示例。
希望本文能对你的前端开发提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53e1a