Skip to content

api/tapable.md #449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 1, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
api/tapable.md
  • Loading branch information
initial-wu committed Feb 25, 2018
commit b755d826a6f39ba4bb24d4c76a9e37d216851861
32 changes: 16 additions & 16 deletions src/content/api/tapable.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@ contributors:
- e-cloud
---

[Tapable](https://github.com/webpack/tapable) is a small library that allows you to add and apply plugins to a javascript module. It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation. However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.
[Tapable](https://github.com/webpack/tapable) 是一个小型的库,允许你对一个 javascript 模块添加和应用插件。它可以被继承或混入到其他模块中。类似于 NodeJS`EventEmitter` 类,用于自定义事件的发射和处理。除此之外,`Tapable` 还允许你通过回调函数的参数访问事件的“触发者”或“提供者”。

`Tapable` has four groups of member functions:
`Tapable` 有四组成员函数:

- `plugin(name:string, handler:function)`: This allows a custom plugin to register into a **Tapable instance**'s event. This acts similar to the `on()` method of the `EventEmitter`, which is used for registering a handler/listener to do something when the signal/event happens.
- `apply(…pluginInstances: (AnyPlugin|function)[])`: `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the _Tapable_ instance's registry.
- `applyPlugins*(name:string, …)`: The _Tapable_ instance can apply all the plugins under a particular hash using these functions. This group of methods act like the `emit()` method of the `EventEmitter`, controlling event emission meticulously using various strategies.
- `mixin(pt: Object)`: a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
- `plugin(name:string, handler:function)`:允许将一个自定义插件注册到 **Tapable 实例** 的事件中。它的行为和 `EventEmitter` 的 `on()` 方法相似,用来注册一个处理器/监听者来在信号/事件发生时做一些事情。
- `apply(…pluginInstances: (AnyPlugin|function)[])``AnyPlugin` 应该是一个拥有 `apply` 方法的类(也可以是一个对象,但是不常见),或者只是一个包含注册代码的函数。这个方法 **应用** 插件的定义,从而将真正的事件监听者可以注册到 _Tapable_ 实例的注册列表中。
- `applyPlugins*(name:string, …)`: _Tapable_ 实例可以在指定的 hash 下使用这些函数应用所有的插件。这一组方法的行为和 `EventEmitter` 的 `emit()` 方法相似,使用多种策略细致地控制事件地发射。
- `mixin(pt: Object)`:一个简单地方法,使用混入而不是继承的方式扩展 `Tapable` 的原型。

The different `applyPlugins*` methods cover the following use cases:
不同的 `applyPlugins*` 方法覆盖了以下使用场景:

- Plugins can run serially.
- Plugins can run in parallel.
- Plugins can run one after the other but taking input from the previous plugin (waterfall).
- Plugins can run asynchronously.
- Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return _the return of that plugin_. This sounds like `once()` of `EventEmitter` but is totally different.
- 连续地执行插件。
- 并行地执行插件。
- 一个接一个地执行插件,从上一个插件获取输入(瀑布流)。
- 异步地执行插件。
- 在允许时停止执行插件:也就是说,一旦一个插件返回了一个非 `undefined` 值,跳出执行流,返回 _这个插件的返回值_。听起来像是 `EventEmitter` 的 `once()` 方法,但是完全不同。


## Example

One of webpack's _Tapable_ instances, [Compiler](/api/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/compilation) instance. When the Compilation instance runs, it creates the required bundles.
webpack中的 _Tapable_ 实例之一,[Compiler](/api/compiler),负责编译 webpack 配置对象并返回一个 [Compilation](/api/compilation) 实例。Compilation 实例执行时创建所需的 bundles

See below for a simplified version of how this looks using `Tapable`:
接下来看一个简化版的 `Tapable` 的使用方式:

__node_modules/webpack/lib/Compiler.js__

Expand All @@ -44,7 +44,7 @@ function Compiler() {
Compiler.prototype = Object.create(Tapable.prototype);
```

Now to write a plugin on the compiler,
现在在这个 compiler 上写一个插件

__my-custom-plugin.js__

Expand All @@ -55,7 +55,7 @@ CustomPlugin.prototype.apply = function(compiler) {
}
```

The compiler executes the plugin at the appropriate point in its lifecycle by
compiler 在生命周期中适当的时候执行这个插件

__node_modules/webpack/lib/Compiler.js__

Expand Down