发布于 由admin

JavaScript内核与高级编程之：`JavaScript`的`Webpack Tapable`：其插件系统的底层架构和事件流。

大家好！今天咱们聊聊Webpack里一个挺有意思的东西，叫Tapable。这玩意儿就像Webpack的心脏，它的插件系统全靠它跳动。

开场白：Webpack插件系统的幕后英雄

Webpack牛不牛？牛！各种loader，plugin，把前端项目安排的明明白白。但你有没有想过，Webpack的插件机制是怎么实现的？那么多插件，Webpack是怎么让它们按照正确的顺序执行，并且互相传递信息的？答案就是：Tapable。

Tapable就像一个神奇的调度员，它定义了一套规则，让Webpack在编译过程中的各个关键节点（hooks）“埋伏”好，然后插件就可以注册到这些hook上，等待被触发。当Webpack执行到这些节点时，就会通知注册到该hook上的所有插件，让它们各司其职。

这就像你去参加一个聚会，聚会组织者（Tapable）提前告诉你，几点几分会安排什么活动（hooks），你可以选择参加哪些活动（注册插件），并且按照组织者的安排来参与。

第一部分：Tapable的核心概念

Tapable本身就是一个类，它提供了一系列方法来创建和管理hooks。先来认识一下它的几个核心概念：

  1. Hook: 可以理解为Webpack编译过程中的一个“事件”或者“节点”。比如，compilation hook, beforeCompile hook，emit hook等等。Webpack会在这些特定的时刻触发对应的hook。你可以把它想象成一个预先定义好的“插槽”，等待插件来“插入”。

  2. Tap: 插件向hook注册的回调函数。当hook被触发时，所有注册到该hook上的tap（回调函数）会被依次执行。Tap包含了回调函数本身，以及执行的优先级等信息。

  3. Tapable Instance: Webpack内部会创建Tapable的实例，并且在这些实例上定义各种hook。Compiler和Compilation对象就是Tapable的实例。

  4. Hook Types: Tapable提供几种不同的Hook类型，它们决定了插件回调函数的执行方式和参数传递。常见的Hook类型有：

    • SyncHook: 同步执行所有tap。
    • AsyncSeriesHook: 异步串行执行所有tap。
    • AsyncParallelHook: 异步并行执行所有tap。
    • SyncBailHook: 同步执行tap，一旦有tap返回非undefined值，就停止执行后续tap。
    • SyncWaterfallHook: 同步执行tap，每个tap的返回值会作为下一个tap的输入参数。
    • AsyncSeriesWaterfallHook: 异步串行执行tap，每个tap的返回值会作为下一个tap的输入参数。
    • AsyncParallelBailHook: 异步并行执行tap，一旦有tap返回非undefined值，就停止执行后续tap。

第二部分：Hook的类型和用法

接下来，咱们详细说说这几种Hook类型，以及它们的使用场景。

  • SyncHook

    这是最简单的Hook类型，同步执行所有tap，没有返回值。

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

const hook = new SyncHook(['arg1', 'arg2']); // 构造函数参数定义了回调函数接受的参数名称

hook.tap('MyPlugin', (arg1, arg2) => {
    console.log('SyncHook - MyPlugin:', arg1, arg2);
});

hook.tap('AnotherPlugin', (arg1, arg2) => {
    console.log('SyncHook - AnotherPlugin:', arg1, arg2);
});

hook.call('Hello', 'World'); // 触发hook，并传递参数
// 输出:
// SyncHook - MyPlugin: Hello World
// SyncHook - AnotherPlugin: Hello World

    SyncHook适用于那些不需要异步操作，也不需要修改输入输出的场景。例如，记录日志，收集一些统计信息等。

  • AsyncSeriesHook

    异步串行执行tap，每个tap执行完毕后才会执行下一个tap。通常使用promise或者callback来控制异步流程。

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

const hook = new AsyncSeriesHook(['arg1', 'arg2']);

hook.tapPromise('MyPlugin', (arg1, arg2) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('AsyncSeriesHook - MyPlugin:', arg1, arg2);
            resolve();
        }, 1000);
    });
});

hook.tapAsync('AnotherPlugin', (arg1, arg2, callback) => {
    setTimeout(() => {
        console.log('AsyncSeriesHook - AnotherPlugin:', arg1, arg2);
        callback();
    }, 500);
});

hook.callAsync('Hello', 'World', () => {
    console.log('AsyncSeriesHook - Done');
});

// 输出(大约1.5秒后):
// AsyncSeriesHook - MyPlugin: Hello World
// AsyncSeriesHook - AnotherPlugin: Hello World
// AsyncSeriesHook - Done

    AsyncSeriesHook适用于需要按照特定顺序执行异步操作的场景。例如，依次执行多个编译步骤，每个步骤依赖于前一个步骤的结果。

  • AsyncParallelHook

    异步并行执行tap，所有tap同时执行。

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

const hook = new AsyncParallelHook(['arg1', 'arg2']);

hook.tapPromise('MyPlugin', (arg1, arg2) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('AsyncParallelHook - MyPlugin:', arg1, arg2);
            resolve();
        }, 1000);
    });
});

hook.tapAsync('AnotherPlugin', (arg1, arg2, callback) => {
    setTimeout(() => {
        console.log('AsyncParallelHook - AnotherPlugin:', arg1, arg2);
        callback();
    }, 500);
});

hook.callAsync('Hello', 'World', () => {
    console.log('AsyncParallelHook - Done');
});

// 输出(大约1秒后):
// AsyncParallelHook - AnotherPlugin: Hello World
// AsyncParallelHook - MyPlugin: Hello World
// AsyncParallelHook - Done

    AsyncParallelHook适用于那些不需要顺序，可以并行执行的异步操作。例如，同时执行多个资源优化任务。

  • SyncBailHook

    同步执行tap，一旦有tap返回非undefined值，就立即停止执行后续tap，并将该返回值作为整个hook的返回值。

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

const hook = new SyncBailHook(['arg1', 'arg2']);

hook.tap('MyPlugin', (arg1, arg2) => {
    console.log('SyncBailHook - MyPlugin:', arg1, arg2);
    return 'Bailed!';
});

hook.tap('AnotherPlugin', (arg1, arg2) => {
    console.log('SyncBailHook - AnotherPlugin:', arg1, arg2); // 不会被执行
});

const result = hook.call('Hello', 'World');
console.log('SyncBailHook - Result:', result);

// 输出:
// SyncBailHook - MyPlugin: Hello World
// SyncBailHook - Result: Bailed!

    SyncBailHook适用于需要在满足特定条件时提前终止执行的场景。例如，检查文件是否存在，如果不存在则跳过后续处理。

  • SyncWaterfallHook

    同步执行tap，每个tap的返回值会作为下一个tap的第一个参数。

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

const hook = new SyncWaterfallHook(['arg1', 'arg2']);

hook.tap('MyPlugin', (arg1, arg2) => {
    console.log('SyncWaterfallHook - MyPlugin:', arg1, arg2);
    return arg1 + ' Modified';
});

hook.tap('AnotherPlugin', (arg1, arg2) => {
    console.log('SyncWaterfallHook - AnotherPlugin:', arg1, arg2);
    return arg1 + ' Again';
});

const result = hook.call('Hello', 'World');
console.log('SyncWaterfallHook - Result:', result);

// 输出:
// SyncWaterfallHook - MyPlugin: Hello World
// SyncWaterfallHook - AnotherPlugin: Hello Modified
// SyncWaterfallHook - Result: Hello Modified Again

    SyncWaterfallHook适用于需要对数据进行链式处理的场景。例如，依次对资源进行转换，压缩，优化等。

  • AsyncSeriesWaterfallHook

    异步串行执行tap，每个tap的返回值会作为下一个tap的第一个参数。使用promise或者callback来控制异步流程。

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

const hook = new AsyncSeriesWaterfallHook(['arg1', 'arg2']);

hook.tapPromise('MyPlugin', (arg1, arg2) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('AsyncSeriesWaterfallHook - MyPlugin:', arg1, arg2);
            resolve(arg1 + ' Modified');
        }, 500);
    });
});

hook.tapAsync('AnotherPlugin', (arg1, arg2, callback) => {
    setTimeout(() => {
        console.log('AsyncSeriesWaterfallHook - AnotherPlugin:', arg1, arg2);
        callback(null, arg1 + ' Again');
    }, 250);
});

hook.callAsync('Hello', 'World', (err, result) => {
    console.log('AsyncSeriesWaterfallHook - Result:', result);
});

// 输出(大约0.75秒后):
// AsyncSeriesWaterfallHook - MyPlugin: Hello World
// AsyncSeriesWaterfallHook - AnotherPlugin: Hello Modified
// AsyncSeriesWaterfallHook - Result: Hello Modified Again

  • AsyncParallelBailHook

    异步并行执行tap，一旦有tap返回非undefined值，就立即停止执行后续tap，并将该返回值传递给最终的回调函数。

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

const hook = new AsyncParallelBailHook(['arg1', 'arg2']);

hook.tapPromise('MyPlugin', (arg1, arg2) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('AsyncParallelBailHook - MyPlugin:', arg1, arg2);
            resolve();
        }, 500);
    });
});

hook.tapAsync('AnotherPlugin', (arg1, arg2, callback) => {
    setTimeout(() => {
        console.log('AsyncParallelBailHook - AnotherPlugin:', arg1, arg2);
        callback(null, 'Bailed!');
    }, 250);
});

hook.callAsync('Hello', 'World', (err, result) => {
    console.log('AsyncParallelBailHook - Result:', result);
});

// 输出(大约0.25秒后):
// AsyncParallelBailHook - AnotherPlugin: Hello World
// AsyncParallelBailHook - Result: Bailed!

第三部分：在Webpack插件中使用Tapable

Webpack的Compiler和Compilation对象都继承自Tapable，因此它们都拥有创建和管理hooks的能力。你可以通过plugin方法来注册插件，并且在插件的apply方法中，使用compiler.hooks或compilation.hooks来访问和注册hooks。

下面是一个简单的Webpack插件示例：

class MyWebpackPlugin {
    constructor(options) {
        this.options = options || {};
    }

    apply(compiler) {
        // 在 compilation hook 注册 tap
        compiler.hooks.compilation.tap('MyWebpackPlugin', (compilation) => {
            // 在 optimizeAssets hook 注册 tap，这个hook在资源优化阶段触发
            compilation.hooks.optimizeAssets.tapAsync(
                'MyWebpackPlugin',
                (assets, callback) => {
                    console.log('MyWebpackPlugin - Optimizing assets...');

                    // 遍历所有 assets，修改文件名
                    Object.keys(assets).forEach(assetName => {
                        if (assetName.endsWith('.js')) {
                            const newAssetName = assetName.replace('.js', '.min.js');
                            assets[newAssetName] = assets[assetName];
                            delete assets[assetName];
                        }
                    });

                    console.log('MyWebpackPlugin - Assets optimized.');
                    callback();
                }
            );
        });

        // 在 beforeCompile hook 注册 tap
        compiler.hooks.beforeCompile.tapAsync('MyWebpackPlugin', (params, callback) => {
            console.log('MyWebpackPlugin - Before compiling...');
            // 可以修改 params，影响编译过程
            callback();
        });

        // 在 done hook 注册 tap
        compiler.hooks.done.tap('MyWebpackPlugin', (stats) => {
            console.log('MyWebpackPlugin - Compilation done.');
        });
    }
}

module.exports = MyWebpackPlugin;

在这个例子中，我们创建了一个名为MyWebpackPlugin的插件，它在compilation、optimizeAssets、beforeCompile和done这几个hook上注册了tap。当Webpack执行到这些hook时，我们的插件就会被触发，执行相应的逻辑。

第四部分：深入理解事件流

Webpack的编译过程非常复杂，涉及到很多hook。理解这些hook的触发顺序和作用，对于编写高效的插件至关重要。

下面是一些常用的Webpack hook，以及它们的触发时机：

Hook Name Trigger Time Description
beforeRun 在Webpack开始运行之前 可以在这里做一些准备工作，例如清理目录。
run 在Webpack开始编译之前 可以在这里修改Compiler配置。
beforeCompile 在每次编译之前 可以在这里修改Compilation参数。
compile 在开始编译之后 可以在这里监听 Compilation 的各种事件。
compilation 在每次创建新的Compilation对象时 这是最重要的hook之一，可以在这里监听 Compilation 的各种事件，例如optimizeAssets、optimizeModules等。
make 在Compilation对象创建之后，开始构建依赖图之前 可以在这里添加自定义的模块工厂。
afterCompile 在每次编译完成之后 可以在这里做一些清理工作。
emit 在将编译好的资源输出到磁盘之前 可以在这里修改输出的资源。
afterEmit 在将编译好的资源输出到磁盘之后 可以在这里做一些发布相关的操作。
done 在整个编译过程完成之后 可以在这里做一些统计工作，或者发送通知。
failed 在编译过程中发生错误时 可以在这里处理错误，例如发送错误报告。
optimizeAssets 在资源优化阶段 可以在这里对资源进行压缩，混淆等操作。
optimizeModules 在模块优化阶段 可以在这里对模块进行排序，去重等操作。

理解这些hook的触发时机，可以帮助你选择合适的hook来注册插件，从而实现你的需求。

第五部分：Tapable的源码分析（简化版）

Tapable的源码并不复杂，但它实现了一些精妙的设计模式。这里我们简单分析一下SyncHook的实现原理。

class SyncHook {
    constructor(args) {
        this._args = args || [];
        this.taps = [];
    }

    tap(name, fn) {
        this.taps.push({
            name: name,
            fn: fn
        });
    }

    call(...args) {
        for (const tap of this.taps) {
            tap.fn(...args);
        }
    }
}

这段代码非常简单：

  • constructor：初始化taps数组，用于存储注册的tap。
  • tap：将tap对象（包含名称和回调函数）添加到taps数组中。
  • call：遍历taps数组，依次执行每个tap的回调函数，并将参数传递给回调函数。

虽然SyncHook的实现很简单，但它体现了Tapable的核心思想：通过维护一个tap列表，并在特定的时刻依次执行这些tap。其他的Hook类型，例如AsyncSeriesHook和AsyncParallelHook，则是在此基础上增加了异步处理的逻辑。

总结：Tapable的重要性

Tapable是Webpack插件系统的基石。理解Tapable的工作原理，可以帮助你：

  • 编写更高效的Webpack插件。
  • 更好地理解Webpack的编译过程。
  • 解决Webpack插件相关的问题。
  • 甚至可以基于Tapable构建自己的插件系统。

希望今天的讲解能够帮助你更好地理解Webpack的Tapable。 祝大家编程愉快！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注