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

fix some typos and translations #235

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
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
116 changes: 66 additions & 50 deletions translations/zh-Hans/plugin-handbook.md
Original file line number Diff line number Diff line change
Expand Up @@ -1482,14 +1482,15 @@ FunctionDeclaration(path) {

### <a id="toc-replacing-a-parent"></a>替换父节点

只需使用parentPath:` path.parentPath </>调用<code> replaceWith </>即可</p>
只需在 parentPath:`path.parentPath` 下调用 `replaceWith` 即可

<pre><code class="js">BinaryExpression(path) {
```js
BinaryExpression(path) {
path.parentPath.replaceWith(
t.expressionStatement(t.stringLiteral("Anyway the wind blows, doesn't really matter to me, to me."))
);
}
`</pre>
```

```diff
function square(n) {
Expand Down Expand Up @@ -1551,14 +1552,15 @@ FunctionDeclaration(path) {

### <a id="toc-pushing-a-variable-declaration-to-a-parent-scope"></a>提升变量声明至父级作用域

有时你可能想要推送一个` VariableDeclaration </>,这样你就可以分配给它。</p>
有时你可能想要推送一个 `VariableDeclaration`,这样你就可以分配给它。

<pre><code class="js">FunctionDeclaration(path) {
```js
FunctionDeclaration(path) {
const id = path.scope.generateUidIdentifierBasedOnNode(path.node.id);
path.remove();
path.scope.parent.push({ id, init: path.node });
}
`</pre>
```

```diff
- function square(n) {
Expand Down Expand Up @@ -1617,9 +1619,10 @@ FunctionDeclaration(path) {
}
```

这些选项会通过`状态</>对象传递给插件访问者:</p>
这些选项会通过 `状态` 对象传递给插件访问者:

<pre><code class="js">export default function({ types: t }) {
```js
export default function({ types: t }) {
return {
visitor: {
FunctionDeclaration(path, state) {
Expand All @@ -1629,7 +1632,7 @@ FunctionDeclaration(path) {
}
}
}
`</pre>
```

这些选项是特定于插件的,您不能访问其他插件中的选项。

Expand Down Expand Up @@ -1699,15 +1702,16 @@ export default function({ types: t }) {

# <a id="toc-building-nodes"></a>构建节点

编写转换时,通常需要构建一些要插入的节点进入AST。 如前所述,您可以使用` babel-types </>包中的<a href="#builders">builder </>方法。</p>
编写转换时,通常需要构建一些要插入的节点进入AST。 如前所述,您可以使用 `babel-types` 包中的 <a href="#builders">builder</a>方法。

<p>构建器的方法名称就是您想要的节点类型的名称,除了第一个字母小写。 例如,如果您想建立一个<code> MemberExpression </>您可以使用<code> t.memberExpression(...)</>.</p>
构建器的方法名称就是您想要的节点类型的名称,除了第一个字母小写。 例如,如果您想建立一个 `MemberExpression` 您可以使用 `t.memberExpression(...)`。

<p>这些构建器的参数由节点定义决定。 有一些正在做的工作,以生成易于阅读的文件定义,但现在他们都可以在<a href="https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions">此处</a>找到。.</p>
这些构建器的参数由节点定义决定。 有一些正在做的工作,以生成易于阅读的文件定义,但现在他们都可以在 <a href="https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions">此处</a> 找到。

<p>节点定义如下所示:</p>
节点定义如下所示:

<pre><code class="js">defineType("MemberExpression", {
```js
defineType("MemberExpression", {
builder: ["object", "property", "computed"],
visitor: ["object", "property"],
aliases: ["Expression", "LVal"],
Expand All @@ -1726,7 +1730,7 @@ export default function({ types: t }) {
}
}
});
`</pre>
```

在这里你可以看到关于这个特定节点类型的所有信息,包括如何构建它,遍历它,并验证它。

Expand All @@ -1736,10 +1740,13 @@ export default function({ types: t }) {
生成器: ["object", "property", "computed"],
```

> 请注意,有时在节点上可以定制的属性比``构建器</>数组包含的属性更多。 这是为了防止生成器有太多的参数。 在这些情况下,您需要手动设置属性。 一个例子是<class> ClassMethod </>.</p>
</blockquote>
> 请注意,有时在节点上可以定制的属性比 `构建器` 数组包含的属性更多。
> 这是为了防止生成器有太多的参数。
> 在这些情况下,您需要手动设置属性。
> 一个例子是 [`ClassMethod`](https://github.com/babel/babel/blob/bbd14f88c4eea88fa584dd877759dd6b900bf35e/packages/babel-types/src/definitions/es2015.js#L238-L276)。

<pre><code class="js">// Example
```js
// Example
// because the builder doesn't contain `async` as a property
var node = t.classMethod(
"constructor",
Expand All @@ -1749,11 +1756,11 @@ var node = t.classMethod(
)
// set it manually after creation
node.async = true;
``</pre>
>
> You can see the validation for the builder arguments with the `fields` object.
>
> ```js
```

You can see the validation for the builder arguments with the `fields` object.

```js
fields: {
object: {
validate: assertNodeType("Expression")
Expand Down Expand Up @@ -1926,7 +1933,8 @@ flags on visitor objects indicating that it's already performed that processing,
it's better to store the visitor in a variable and pass the same object each
time.</p>

<pre><code class="js">const nestedVisitor = {
```js
const nestedVisitor = {
Identifier(path) {
// ...
}
Expand All @@ -1937,7 +1945,7 @@ const MyVisitor = {
path.traverse(nestedVisitor);
}
};
`</pre>
```

如果您在嵌套的访问者中需要一些状态,像这样:

Expand Down Expand Up @@ -2010,7 +2018,8 @@ const MyVisitor = {

我们忽略了类可以嵌套的事实,使用遍历的话,上面我们也会得到一个嵌套的`构造函数</>:</p>

<pre><code class="js">class Foo {
```js
class Foo {
constructor() {
class Bar {
constructor() {
Expand All @@ -2019,7 +2028,7 @@ const MyVisitor = {
}
}
}
`</pre>
```

## <a id="toc-unit-testing"></a>单元测试

Expand All @@ -2028,7 +2037,7 @@ const MyVisitor = {
首先我们需要一个babel插件,我们将把它放在src / index.js中。

```js
<br />module.exports = function testPlugin(babel) {
module.exports = function testPlugin(babel) {
return {
visitor: {
Identifier(path) {
Expand All @@ -2046,7 +2055,8 @@ const MyVisitor = {
接下来,用`` npm install --save-dev babel-core jest </>安装我们的依赖关系,
那么我们可以开始写我们的第一个测试:快照。 快照测试允许我们直观地检查我们的babel插件的输出。 我们给它一个输入,告诉它一个快照,并将其保存到一个文件。 我们检查快照到git中。 这允许我们来看看我们什么时候影响了我们任何试用例子测试的输出。 它也给出了使用差异在拉请求的时候。 当然,您可以用任何测试框架来做到这一点,但是要更新一下快照就像<code>jest -u </>一样简单.</p>

<pre><code class="js">// src/__tests__/index-test.js
```js
// src/__tests__/index-test.js
const babel = require('babel-core');
const plugin = require('../');

Expand All @@ -2059,21 +2069,22 @@ it('works', () => {
const {code} = babel.transform(example, {plugins: [plugin]});
expect(code).toMatchSnapshot();
});
``</pre>
```

这给了我们一个快照文件在`` src / __ tests __ / __ snapshots __ / index-test.js.snap </>.</p>
这给了我们一个快照文件 `src/__tests__/__snapshots__/index-test.js.snap`。

<pre><code class="js">exports[`test works 1`] = `
```js
exports[`test works 1`] = `
"
var bar = 1;
if (bar) console.log(bar);"
`;
``</pre>
```

如果我们在插件中将“bar”更改为“baz”并再次运行,则可以得到以下结果:
如果我们在插件中将 “bar” 更改为 “baz” 并再次运行,则可以得到以下结果:

```diff
接收到的值与存储的快照1不匹配。
Received value does not match stored snapshot 1.

- Snapshot
+ Received
Expand All @@ -2086,26 +2097,33 @@ if (bar) console.log(bar);"
+if (baz) console.log(baz);"
```

我们看到我们对插件代码的改变如何影响了我们插件的输出 如果输出看起来不错,我们可以运行`jest -u </>来更新快照。</p>
我们看到我们对插件代码的改变如何影响了我们插件的输出如果输出看起来不错,我们可以运行 `jest -u` 来更新快照。

<h3>AST 测试</h3>
### AST 测试

<p>除了快照测试外,我们还可以手动检查AST。 这是一个简单但是脆弱的例子。 对于更多涉及的情况,您可能希望利用Babel-遍历。 它允许您用<code>访问者</>键指定一个对象,就像您使用插件本身。</p>
除了快照测试外,我们还可以手动检查AST。
这是一个简单但是脆弱的例子。
对于更多涉及的情况,您可能希望利用Babel-遍历。
它允许您指定一个带有 `visitor` 字段的对象,就像您使用插件本身。

<pre><code class="js">it('contains baz', () => {
```js
it('contains baz', () => {
const {ast} = babel.transform(example, {plugins: [plugin]});
const program = ast.program;
const declaration = program.body[0].declarations[0];
assert.equal(declaration.id.name, 'baz');
// or babelTraverse(program, {visitor: ...})
});
`</pre>
```

### Exec Tests
### 执行测试

在这里,我们将转换代码,然后评估它的行为是否正确。 请注意,我们在测试中没有使用``assert</>。 这确保如果我们的插件做了奇怪的操作,如意外删除断言线,但测试仍然失败。</p>
在这里,我们将转换代码,然后评估它的行为是否正确。
请注意,我们在测试中没有使用 `assert`。
这确保如果我们的插件做了奇怪的操作,如意外删除断言线,但测试仍然失败。

<pre><code class="js">it('foo is an alias to baz', () => {
```js
it('foo is an alias to baz', () => {
var input = `
var foo = 1;
// test that foo was renamed to baz
Expand All @@ -2119,13 +2137,15 @@ if (bar) console.log(bar);"
var res = f();
assert(res === 1, 'res is 1');
});
``</pre>
```

Babel核心使用类似的方法</>去获取快照和执行测试。</p>
Babel 核心使用 [类似的方法](https://github.com/babel/babel/blob/7.0/CONTRIBUTING.md#writing-tests) 去获取快照和执行测试。

### [`babel-plugin-tester`](https://github.com/kentcdodds/babel-plugin-tester)

这个包使测试插件更容易。 如果您熟悉ESLint的[ RuleTester](http://eslint.org/docs/developer-guide/working-with-rules#rule-unit-tests)您应该对这是熟悉的。 您可以看看[the docs](https://github.com/kentcdodds/babel-plugin-tester/blob/master/README.md)去充分了解可能的情况,但这里有一个简单的例子:
这个包使测试插件更容易。
如果您熟悉 ESLint 的 [RuleTester](http://eslint.org/docs/developer-guide/working-with-rules#rule-unit-tests) 您应该对这是熟悉的。
您可以看看 [the docs](https://github.com/kentcdodds/babel-plugin-tester/blob/master/README.md) 去充分了解可能的情况,但这里有一个简单的例子:

```js
import pluginTester from 'babel-plugin-tester';
Expand Down Expand Up @@ -2155,7 +2175,3 @@ pluginTester({
},
});
```

* * *

> ***对于将来的更新,请跟随 @thejameskyle </>和 @babeljs </> 的Twitter。</em></strong></p> </blockquote>