tapable 创建钩子

前端精髓

共 1629字,需浏览 4分钟

 ·

2022-01-03 13:19


tapable 是一个类似于 nodejs 的 EventEmitter 的库, 主要是控制钩子函数的发布与订阅,控制着 webpack 的插件系 webpack 的本质就是一系列的插件运行。


tapable 包导出了很多 Hook 钩子类,这些 Hook 钩子类可用于为 webpack 插件创建钩子。


const {    SyncHook,    SyncBailHook,    SyncWaterfallHook,    SyncLoopHook,    AsyncParallelHook,    AsyncParallelBailHook,    AsyncSeriesHook,    AsyncSeriesBailHook,    AsyncSeriesWaterfallHook } = require("tapable");


所有 Hook 钩子构造函数都接受一个可选参数,该参数是一个字符串列表。


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


在 webpack 源码中,Compiler 构造函数中定义了 hooks 属性暴露了所有的钩子:


class Compiler {    constructor() {        this.hooks = {            done: new AsyncSeriesHook(["stats"]),            afterDone: new SyncHook(["stats"]),            emit: new AsyncSeriesHook(["compilation"]),        };    }    /* ... */}


现在可以使用这些 Hook 钩子了:

const compiler = new Compiler();
// 使用tap方法添加一个订阅函数compiler.hooks.afterDone.tap("WarningLampPlugin", () => { console.log('Warning')});

钩子类型

每一个钩子都可以 tap 一个或者多个函数, 他们如何运行,取决于他们的钩子类型。


基本的钩子, (钩子类名没有 waterfall, Bail, 或者 Loop 的 ), 这个钩子只会简单的调用每个 tap 进去的函数。


Waterfall, 一个 waterfall 钩子,也会调用每个 tap 进去的函数,不同的是,他会从每一个函数传一个返回的值到下一个函数。


Bail, Bail 钩子允许更早的退出,当任何一个 tap 进去的函数,返回任何值,bail 类会停止执行其他的函数执行.(类似 Promise.race())。


此外,钩子可以是同步的,也可以是异步的,Sync, AsyncSeries 和 AsyncParallel,从名字就可以看出,哪些是可以绑定异步函数的。


Sync, 一个同步钩子只能tap同步函数, 不然会报错。


AsyncSeries, 一个 async-series 钩子,可以 tap 同步钩子,基于回调的钩子和一个基于promise 的钩子(使用 myHook.tap(),myHook.tapAsync() 和 myHook.tapPromise().),他会按顺序的调用每个方法。


AsyncParallel, 一个 async-parallel 钩子跟上面的 async-series 一样,不同的是他会把异步钩子并行执行(并行执行就是把异步钩子全部一起开启,不按顺序执行)。


浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报