Skip to content
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

api/tapable.md #449

Merged
merged 2 commits into from
Mar 1, 2018
Merged
Changes from all commits
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
40 changes: 22 additions & 18 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` 还允许你通过回调函数的参数,访问事件的“触发者(emittee)”或“提供者(producer)”。

`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,10 +55,14 @@ 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__

``` js
this.apply*("emit",options) // will fetch all plugins under 'emit' name and run them.
this.apply*("emit",options) // 将获取 'emit' 名称下的所有插件并运行它们。
```

***

> 原文:https://webpack.js.org/api/tapable/