Tapable 库

Tapable 同步 hook

SyncHook

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

class Compiler {
    constructor() {
        this.hooks = {
                // 1. 创建同步hook
                syncHook: new SyncHook(['name', 'age'])
        };
        // 2. 监听事件
        this.hooks.syncHook.tap('event1', (name, age) => {
                console.log('事件监听', name, age);
        });
    }
}

const compiler = new Compiler();
// 3. 调用监听事件
compiler.hooks.syncHook.call('hcj', 23);

SyncBailHook

SyncBailHook: 当一个回调事件返回值为 true，之后监听的回调事件就不会执行

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

class Compiler {
    constructor() {
        this.hooks = {
            bailHook: new SyncBailHook(['name', 'age'])
        };

        this.hooks.bailHook.tap('event1', (name, age) => {
            console.log('事件监听', name, age);
            // 当前监听事件返回了 true，那么下面的事件就不会继续监听了
            return true;
        });

        this.hooks.bailHook.tap('event1', (name, age) => {
            console.log('事件监听', name, age);
        });
    }
}

const compiler = new Compiler();
compiler.hooks.bailHook.call('hcj', 23);

SyncLoopHook

SyncLoopHook: 如果监听的事件回调返回值为 true，就会一直循环这个回调函数

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

let count = 0;
class Compiler {
    constructor() {
        this.hooks = {
            loopHook: new SyncLoopHook(['name', 'age'])
        };

        this.hooks.loopHook.tap('event1', (name, age) => {
            console.log('事件监听01', name, age);
            if (count <= 5) {
                console.log('count', count);
                count++;
                // 如果这个事件返回值为true就会一直循环这个事件
                return true;
            }
            // 如果这个事件返回值为false那么就不会继续循环
        });

        this.hooks.loopHook.tap('event1', (name, age) => {
            console.log('事件监听02', name, age);
        });
    }
}

const compiler = new Compiler();
compiler.hooks.loopHook.call('hcj', 23);

SyncWaterfallHook

SyncWaterfallHook：会将上一个回调函数的返回值作为下一个回调函数的第一个参数（直接覆盖）

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

class Compiler {
    constructor() {
        this.hooks = {
            waterfallHook: new SyncWaterfallHook(['name', 'age'])
        };
        this.hooks.waterfallHook.tap('event1', (name, age) => {
            console.log('事件监听01', name, age);
            return '我会作为下个事件的第一个参数'
        });

        this.hooks.waterfallHook.tap('event1', (name, age) => {
            console.log('事件监听02', name, age);
        });
    }
}

const compiler = new Compiler();
compiler.hooks.waterfallHook.call('hcj', 23);

Tapable 异步 Hook

AsyncParallelHook

AsyncParallelHook: 并行执行，不会等待上一个事件回调执行完成，才会执行下一个事件回调

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

class Compiler {
    constructor() {
        this.hooks = {
            parallelHook: new AsyncParallelHook(['name', 'age'])
        };

        // 这两个回调事件会并行执行
        this.hooks.parallelHook.tapAsync('event1', (name, age) => {
            setTimeout(() => {
                    console.log('事件监听01', name, age);
            }, 3000);
        });

        this.hooks.parallelHook.tapAsync('event1', (name, age) => {
            setTimeout(() => {
                    console.log('事件监听01', name, age);
            }, 3000);
        });
    }
}

const compiler = new Compiler();
compiler.hooks.parallelHook.callAsync('hcj', 23);

AsyncSeriesHook

AsyncSeriesHook: 串行执行，会等待上一个事件回调执行完成后，执行下一个事件回调。所有事件的最后一个参数是一个回调函数，用于执行下一个事件

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

class Compiler {
    constructor() {
        this.hooks = {
            seriesHook: new AsyncSeriesHook(['name', 'age'])
        };

        this.hooks.seriesHook.tapAsync('event1', (name, age, callback) => {
            setTimeout(() => {
                console.log('事件监听01', name, age);
                // 调用 callback 执行下一个事件
                callback();
            }, 2000);
        });

        this.hooks.seriesHook.tapAsync('event1', (name, age, callback) => {
            // 这个回调会等待
            setTimeout(() => {
                console.log('事件监听02', name, age);
                callback();
            }, 2000);
        });
    }
}

const compiler = new Compiler();
compiler.hooks.seriesHook.callAsync('hcj', 23, () => {
    // 最后一个 callback 调用会执行这个回调
    console.log('所有事件执行完成');
});