【笔记】Tapable学习笔记
57uv6Z6g
·
2026-08-12
·
via 6Jyc5p+a
前言
Just a little module for plugins.（Github）
下载依赖
同步钩子
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");
});
|
完成
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
