tapable钩子函数介绍

const {
	SyncHook,                    // 同步钩子 从上到下顺序执行
	SyncBailHook,                // 同步早退钩子 从上到下顺序执行，遇到返回值不是undefined的注册函数时停止执行
	SyncWaterfallHook,           // 同步瀑布钩子 从上到下执行，依次将返回值传递给下一个函数
	SyncLoopHook,                // 同步循环钩子 从上到下执行，某个函数可能会执行好几遍，当返回值是undefined会继续执行下个函数
	AsyncParallelHook,           // 异步并发钩子 异步并行
	AsyncParallelBailHook,       // 异步并发可早退钩子 异步并行熔断
	AsyncSeriesHook,             // 异步顺序钩子   异步串行
	AsyncSeriesBailHook,         // 异步顺序可早退钩子 异步串行熔断
	AsyncSeriesWaterfallHook     // 异步顺序瀑布钩子   异步串行值传递【瀑布】
 } = require("tapable");
复制代码

import { SyncHook } from 'tapable';

const hook = new SyncHook(); // 创建钩子对象
hook.tap('logPlugin', () => console.log('注册了')); // tap方法注册钩子回调
hook.call(); // call方法调用钩子，打印出‘被勾了’三个字
复制代码

import { SyncBailHook } from 'tapable';

const hook = new SyncBailHook();
hook.tap('SyncBailHook1', () => console.log(`钩子1`));
hook.tap('SyncBailHook2', () => {console.log(`钩子2`) ; return 1});
hook.tap('SyncBailHook3', () => console.log(`钩子3`));

hook.call(); // 会打印‘钩子1’‘钩子2’‘钩子3’
复制代码

import { SyncWaterfallHook  } from 'tapable';

const hook = new SyncWaterfallHook(["newSpeed"]);
hook.tap('SyncWaterfallHook1', (speed) => { console.log(`增加到${speed}`); return speed + 100; });
hook.tap('SyncWaterfallHook2', (speed) => { console.log(`增加到${speed}`); return speed + 50; });
hook.tap('SyncWaterfallHook3', (speed) => { console.log(`增加到${speed}`); });

hook.call(50); // 打印‘增加到50’‘增加到150’‘增加到200’
复制代码

import { SyncLoopHook } from 'tapable';

let index = 0;
const hook = new SyncLoopHook();
hook.tap('startPlugin1', () => {
    console.log(`执行`);
    if (index < 5) {
        index++;
        return 1;
    }
}); 

hook.tap('startPlugin2', () => {
    console.log(`执行2`);
});

hook.call(); // 打印‘执行’6次，打印‘执行2’一次。
复制代码

import { AsyncParallelHook } from 'tapable';

const hook = new AsyncParallelHook();
hook.tapAsync('calculateRoutesPlugin1', (callback) => {
    setTimeout(() => {
        console.log('异步事件1');
        callback();
    }, 1000);
});

hook.tapAsync('calculateRoutesPlugin2', (callback) => {
    setTimeout(() => {
        console.log('异步事件2');
        callback();
    }, 2000);
});

hook.callAsync(() => { console.log('最终的回调'); }); // 会在1s的时候打印‘异步事件1’。2s的时候打印‘异步事件2’。紧接着打印‘最终的回调’
复制代码

import { AsyncParallelBailHook } from 'tapable';

const hook = new AsyncParallelBailHook();
hook.tapAsync('calculateRoutesPlugin1', (callback) => {
    setTimeout(() => {
        console.log('异步事件1');
        callback(1);
    }, 1000);
});

hook.tapAsync('calculateRoutesPlugin2', (callback) => {
    setTimeout(() => {
        console.log('异步事件2');
        callback();
    }, 2000);
});

hook.callAsync((result) => { console.log('最终的回调',result); }); // 会在1s的时候打印‘异步事件1’,紧接着打印‘最终的回调’,2s的时候打印‘异步事件2’。
复制代码

import { AsyncSeriesHook } from 'tapable';

const hook = new AsyncSeriesHook();
hook.tapPromise('calculateRoutesPlugin1', () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步事件1');
            resolve();
        }, 1000);
    });
});

hook.tapPromise('calculateRoutesPlugin2', () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步事件2');
            resolve();
        }, 2000);
    });
});

hook.then(() => { console.log('最终的回调'); });
// 1s过后，打印异步事件1，再过2s（而不是到了第2s，而是到了第3s），打印异步事件2，再立马打印最终的回调。
复制代码

import { AsyncSeriesBailHook } from 'tapable';

const hook = new AsyncSeriesBailHook();
hook.tapPromise('calculateRoutesPlugin1', () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步事件1');
            resolve(1);
        }, 1000);
    });
});

hook.tapPromise('calculateRoutesPlugin2', () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步事件2');
            resolve();
        }, 2000);
    });
});

hook.then(() => { console.log('最终的回调'); });
// 1s过后，打印异步事件1，立马打印最终的回调，不会再执行异步事件2了。
复制代码

import { AsyncSeriesWaterfallHook } from 'tapable';

const hook = new AsyncSeriesWaterfallHook(['args']);
hook.tapPromise('calculateRoutesPlugin1', (result) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步事件1', result);

            resolve(result+1);
        }, 1000);
    });
});

hook.tapPromise('calculateRoutesPlugin2', (result) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步事件2', result);
            resolve(result+2);
        }, 2000);
    });
});

hook.promise(12).then((result) => { console.log('最终的回调' + result); });
// // 1s过后，打印异步事件1 12，再过2s打印异步事件2 13，然后立马打印最终的回调 15。