【笔记】Tapable学习笔记

发表于 更新于 阅读次数：

前言

Just a little module for plugins.（Github）

下载依赖

1
npm install tapable

同步钩子

SyncHook同步基础钩子

  • 所有事件函数同步串行执行，返回值会被丢弃
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const { SyncHook } = require("tapable");

class Plugin {
  constructor() {
    this.hooks = {
      key: new SyncHook(["payload"]),
    };

    this.hooks.key.tap("<event_name>", (payload) => {
      console.log(payload);
    });

    this.hooks.key.tap("<event_name>", (payload) => {
      console.log(payload);
    });
  }
}

module.exports = Plugin;
1
2
3
const Plugin = require("./Plugin");

new Plugin().hooks.key.call("<payload>");

SyncBailHook同步熔断钩子

  • 所有事件函数同步串行执行，任意事件函数返回值不为undefined则终止整个钩子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const { SyncBailHook } = require("tapable");

class Plugin {
  constructor() {
    this.hooks = {
      key: new SyncBailHook(["payload"]),
    };

    this.hooks.key.tap("<event_name>", (payload) => {
      console.log(payload);
      return null;
    });

    this.hooks.key.tap("<event_name>", (payload) => {
      // 不会执行
    });
  }
}

module.exports = Plugin;
1
2
3
const Plugin = require("./Plugin");

new Plugin().hooks.key.call("<payload>");

SyncLoopHook同步循环钩子

  • 所有事件函数同步串行执行，任意事件函数返回值为true则重新执行整个钩子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { SyncBailHook } = require("tapable");

class Plugin {
  constructor() {
    this.hooks = {
      key: new SyncBailHook(["payload"]),
    };

    this.hooks.key.tap("<event_name>", (payload) => {
      console.log(payload);
    });
  }
}

module.exports = Plugin;
1
2
3
const Plugin = require("./Plugin");

new Plugin().hooks.key.call("<payload>");

AsyncWaterfallHook同步瀑布钩子

  • 所有事件函数同步串行执行，任意事件函数返回值不为undefined则将返回值传递给下一个事件，作为下一个事件的第一个参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const { AsyncWaterfallHook } = require("tapable");

class Plugin {
  constructor() {
    this.hooks = {
      key: new AsyncWaterfallHook(["payload"]),
    };

    this.hooks.key.tap("<event_name>", (payload) => {
      console.log(payload);
      return null;
    });

    this.hooks.key.tap("<event_name>", (payload) => {
      console.log(payload);
    });
  }
}

module.exports = Plugin;
1
2
3
const Plugin = require("./Plugin");

new Plugin().hooks.key.call("<payload>");

异步钩子

AsyncParallelHook异步并行钩子

  • 所有事件函数异步并行执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const { AsyncParallelHook } = require("tapable");

class Plugin {
  constructor() {
    this.hooks = {
      key: new AsyncParallelHook(["payload"]),
    };

    this.hooks.key.tapAsync("<event_name>", (payload) => {
      console.log(payload);
    });

    this.hooks.key.tapAsync("<event_name>", (payload) => {
      console.log(payload);
    });
  }
}

module.exports = Plugin;
1
2
3
const Plugin = require("./Plugin");

new Plugin().hooks.key.callAsync("<payload>");

AsyncSeriesHook

  • 所有事件函数异步串行执行，上一个事件函数执行了callback()下一个事件函数才会执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { AsyncSeriesHook } = require("tapable");

class Plugin {
  constructor() {
    this.hooks = {
      key: new AsyncSeriesHook(["payload"]),
    };

    this.hooks.key.tapAsync("<event_name>", (payload, callback) => {
      console.log(payload);
      callback();
    });

    this.hooks.key.tapAsync("<event_name>", (payload, callback) => {
      console.log(payload);
      callback();
    });
  }
}

module.exports = Plugin;
1
2
3
4
5
const Plugin = require("./Plugin");

new Plugin().hooks.key.callAsync("<payload>", function () {
  console.log("done");
});

完成