6.16.0 版本发布

2016年9月28日 · 1 分钟阅读

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。发现错误？报告问题 →

Happy Birthday Babel 🎂 !

Happy 2nd birthday @babeljs
— Sebastian McKenzie (@sebmck) September 28, 2016

. ; :```` : :; ````;,```` ````;,```` ::, ````:,: :,:````` :,,: ````:.,,```` ````:.,,```` ````:..,.```` ````,,..: ,,..:````` ```.,.`,: :.`.,````` :..,````` ```.,..: :..,.```` ````:..,. ```.,...: .:...,.``` .:...,. ::,,,.,,,:` `:,,,.,,,:, `:,,,.,,,:: :,,.......,: :,.......,,, :,.......,,: :,........., ;++`............;++` ,.........,: :.````````.. '+'+'```````````,+'++` ..````````.: ;,````````.,.+'''',`````````.,''++' ,.````````,: ;,.` ``.,++'''',.`` ``.,''''+,,.`` `.,: :,.`` ..+''''+,. .,'''++;,. ``.,: `:,.`` ..+''''',. .,''''+',. ``.,: +,..`` ..+++''+,. .,+''++;,. ``..:, ,:+,. ..++++++,. .,+++++.,. .,+,` ,,.'',. .,`;+++',. .,+++'.`,. .,+.,: `,,.`++,. .,``...`,. .,...,. .,+..,: ,,..``'+,.``` ```.,``````,.``` ```.,``````,.``` ```.,+```.,: :,.```.,+,.``` ```.,``````,.``` ```.,``````,.``` ```.,'.```.., :,..,,.``` ```.,``````,.``` ```.,``````,.``` ```.,.``````., ,,.```````.,.``` ```.,``````,.``` ```.,``````,.``` ```.,```````..: ,.`````````,.``` ```.,``````,.``` ```.,``````,.``` ```.,````````.,: :,.```````` ,.``` ```.,``````,.``` ```.,``````,.``` ```., ````````., ,.```````.''+'``` ```., ,. .,,.``` ``,''+'```````.,. ,.```````+'''';`` ```., `````,.``` ``..,,. ``+'''';```````,: ,.``````'+''''+ .,``````,. ..,``````,. '+''''+```````.: ,.``````+'''''':`````.., `````,..`````..,,``````,..`````+'''''',``````,: ,.``````+'''''+'.```..,````````,.....,,,...``.+'''''+'`````.,, :.``````+'''''+'......```` ```.......``` `````......+'''''+'`````., :.`````.+++++'+:.....````.''+' ```....```.''+' ````.....+++++'+:`````., ,,.````.:+++++'``````````+'''';``````````+'''';`````````,+++++'..````., .,.````..,;';,.`````````'+''''+ '+''''+ `````````.:';:..`````.: ,.....```````````+'''''', +'''''',```````````....: ,.`````````````````````+'''''+' +'''''+'.,, ,.`````````````````````+'''''+'````````+'''''+'.,. :.+++++'+:``` ````+++++'+:````````````````````.,` :..````````````````````,+++++'```` ````,+++++'., ,,..:';,.``` ````.:';,.., .,. ````````````` ```````````````.: `,.```````````````````` ``````` `````` ` ````````````````..: ,..``````````````````` ````````````````````.,: ,...`````````````````````` ``` ```````````````````````````.,, :....````````````````````````````````````````````````````````````.,. :,.....`````````````````````````````````````````````````````````.., :,......`````````````````````````````````````````````````````.....: ,,........```````````````````````````````````````````````````.....: .,........```````````````````````````````````````````````````....,: ,..........```````````````````````````````````````````````......,: :...........`````````````````````````````````````````````.......,: :,...........````````````````````````````````````````````.......,, :,..........``````````````````````````````````````````..........,` :,............````````````````````````````````````````..........: :,............````````````````````````````````````````.........,: .,..............```````````````````````````````````............,: `,,..............``````````````````````````````````............,: :,...........`..````````````````````````````````..............,: :,..............````````````````````````````````..............:. ,,,...........................,: :,.............````````````````````````````````............,:, :,.............````````````````````````````..............,,: .:,............```````````````````````````..............,:: .:,,..........````````````````````````````............,:: :,,..........````````````````````````.............,,:, ,:,,.........``````````````````````............,,:; ::,,........``````````````````.............,,:: ,::,,........``````..``............,,,:;` :::,,,........`.............,,,:::. ,:::,,,,..............,,,,,:::: .::::::,,,,,,,::::::,`

真是难以相信已经过去两年了！非常感谢 Sebastian 创建了这个了不起的项目！

我们取得了长足发展：

200+ 位贡献者
自 6.0.0 版本以来已有约 113 次发布，总发布次数达 512 次
上个月 babel-core 下载量约 450 万次
在 npm 上搜索 babel-plugin 有 1400+ 条结果
700+ 条关于 babel-preset 的结果在 npm 上
我们的 Slack 上有 4500+ 位用户

衷心感谢大家使用我们的项目并为社区做出贡献！

如果你最近没关注，我们已经移回 Github Issues 了！这要归功于 @danez

和大多数开源项目一样，Babel 仅由少数人利用业余时间维护。我们将努力降低贡献门槛，支持多种贡献方式（不仅仅是主代码库）。

Evan Czaplicki 在《写代码是最简单的部分》中提出的观点，无论项目大小都适用。贡献的很大一部分就在于讨论、使用和撰写关于项目的内容。

为此，我们应该设立一个精心维护、内容最新的资源页面，或许还可以创办简报，来分享大家用 Babel 创造的精彩成果（新插件、新工具或创新想法）。

希望能更多与 TC-39 合作，就像我们处理 tc39/ecma262#current-proposals 和 stage-x 预设/插件那样。我们应当尝试用 Babel 运行 test262。

我们还发布了 Babili 代码压缩工具，并开始开发 babel-preset-env（Babel 的 "autoprefixer"）。

Babel 的未来一片光明！

👓 规范兼容性

#3473 通过 #4576 实现了对异步生成器函数和 for-await 语句的支持。(@zenparsing)

此变更实现了异步迭代提案（当前处于 Stage 2，计划在本次 TC-39 会议推进至 Stage 3），包含以下特性：

将异步生成器函数（async function* g() { }）转换为包装的生成器函数，类似现有的 async-to-generator 转换

JavaScript
async function* agf() {
  await 1;
  yield 2;
}

将 for-await 语句转换为包含 yield 表达式的 for 循环

JavaScript
async function f() {
  for await (let x of y) {
    g(x);
  }
}

使用示例

JavaScript
async function* genAnswers() {
  var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
  var total = 0;
  for await (let val of stream) {
    total += await val;
    yield total;
  }
}

function forEach(ai, fn) {
  return ai.next().then(function (r) {
    if (!r.done) {
      fn(r);
      return forEach(ai, fn);
    }
  });
}

var output = 0;
return forEach(genAnswers(), function(val) { output += val.value })
.then(function () {
  assert.equal(output, 42);
});

#4500 支持计算类属性。(@motiz88)

解析器支持已在 babylon@6.11.0 版本中通过 babel/babylon#121 添加。

JavaScript
// Example
class Foo {
  [x]
  ['y']
}

class Bar {
  [p]
  [m] () {}
}

#3702 Flow：生成精确的对象类型注解。 (@bhosmer)

解析器支持已在 babylon@6.10.0 版本中通过 babel/babylon#104 添加。

JavaScript
// Example
var a : {| x: number, y: string |} = { x: 0, y: 'foo' };

🚀 新特性

#3561 babel-core：添加用于不同解析器或生成器的选项。 (@hzoo)

Babel 现在也将接受选项：parserOpts 和 generatorOpts（作为对象）。

parserOpts 会将所有属性传递给默认的 babylon 解析器。你也可以传递 parser 选项来替换为不同的解析器。

这将允许传递 babylon's 的任意选项：

JavaScript
{
  "parserOpts": {
    "allowImportExportEverywhere": true,
    "allowReturnOutsideFunction": true,
    "sourceType": "module",
    "plugins": ["flow"]
  }
}

你也可以传递 parserOpts.parser 和 generatorOpts.generator。这将使 Babel 能够使用 recast。

Recast 被用于 jscodeshift，这是一个用于创建 codemods 的工具。你可能已经听说过它，因为 React 团队也发布过一些 codemod 来帮助在 React 版本之间进行转换。

recast

JSON
{
  "parserOpts": {
    "parser": "recast"
  },
  "generatorOpts": {
    "generator": "recast"
  }
}

Babel 作为一个编译器包含三个步骤：解析、转换和生成。

从高层次来看，该过程如下：

解析：接收一个字符串（输入代码）并将其转换为 JSON
转换（插件）：接收 JSON 并生成一个不同的 JSON 结构）
代码生成：将 JSON 转换回字符串（输出代码）

Babel 的最后一步是代码生成。传统上，代码生成器并不需要关心代码的格式（空格、引号等），因为输出代码是经过"编译"的版本，通常会放入 dist 目录，最终会被压缩处理。

但如果你想编写一个在源代码上运行并输出到源代码的 Babel 插件（使用 babel src -d src 而不是 babel src -d lib）呢？你会希望生成的差异（diff）是可读的，并且插件只修改必要的内容，同时遵循你的代码风格指南。

这是因为你想编写一个转换源代码本身的插件。一个用例是名为 lebab 的项目，它实际上是 Babel 的反向操作（以前叫做 5to6）。目前，它还不是一个 Babel 插件，因此我们希望帮助支持这种用例。

一旦 benjamn/recast#299 和 benjamn/ast-types#162 被合并，你也应该能够使用 Babel 制作自己的 codemod！

#4542 新增预设组织结构快捷方式支持。(@nkt)

JavaScript
{
  presets: ["@org/babel-preset-name"], // actual package
  presets: ["@org/name"] // shorthand name
}

#4491 为对象剩余展开添加 useBuiltIns 选项。(@hzoo)

useBuiltIns - 不使用 Babel 的辅助函数，直接转换为调用原生方法（默认禁用）。

JavaScript
{
  "plugins": [
    ["transform-object-rest-spread", { "useBuiltIns": true }]
  ]
}

// source
z = { x, ...y };
// compiled
z = Object.assign({ x }, y);

#4561 babel-code-frame: 新增 linesBefore 和 linesAfter 选项。(@hzoo)

babel-code-frame 是我们在 Babel 中报告错误时使用的独立工具包。

现在可通过选项指定错误位置上下方的显示行数

JavaScript
  1 | class Foo {
> 2 |   constructor()
    |                ^
  3 | }

#3695 通过 #4566 允许预设使用 ES6 默认导出 (@johanssj)

我们之前使用 CommonJS 导出方式创建预设

babel.config.js
module.exports = {
  plugins: [
    require("babel-plugin-syntax-trailing-function-commas")
  ]
};

现在您也可以使用 export default 语法

JavaScript
import syntaxTrailingCommas from "...";
export default {
  plugins: [
    syntaxTrailingCommas
  ]
};

💅 优化改进

#4572, #4579 改进语法高亮配色方案。(@lydell)

优化前

优化后

🐛 重要修复

#3686 修复 typeof Symbol.prototype 的行为。(@brainlock)

JavaScript
// `typeof Symbol.prototype` should be 'object'
typeof Symbol.prototype === 'object'

#4507 仅当 babel-cli 选项与默认值不同时才进行设置。(@danez)

修复默认值无法被覆盖的问题。该问题导致 comments: false 等选项无法正确生效。

#4524 修复箭头函数和函数命名的默认导出问题。(@danharper)

// this wasn't exporting correctly before
export default ({ onClick }) => {
  return <div onClick={() => onClick()}></div>;
}

#4518 修复未命名类的默认导出问题。(@danez)

JavaScript
export default class {};
// wasn't correctly transforming to
exports["default"] = class {}
// with the es3-transforms

#4521 修复箭头函数中 typeParameters 的剥离问题。(@danez)

JavaScript
// <X> wasn't stripped out
const find = <X> (f: (x:X) => X, xs: Array<X>): ?X => (
  xs.reduce(((b, x) => b ? b : f(x) ? x : null), null)
)

#4552 修复解构赋值与函数调用的执行顺序问题。(@danez)

我们发现当赋值操作右侧存在函数调用或成员表达式时无法进行优化，因为这些调用或成员表达式（可能是具有副作用的 getter）可能改变被赋值的变量。

JavaScript
[x, y] = [a(), obj.x];
// was transforming to
x = a();
y = obj.x;
// now transforms to
var _ref = [a(), obj.x];
x = _ref[0];
y = _ref[1];

#4587 防止 flow-strip-types/flow-comments 移除完整的 ClassProperty。(@danharper)

完整更新日志请查看 GitHub！

👓 规范兼容性​

🚀 新特性​

💅 优化改进​

🐛 重要修复​

👓 规范兼容性

🚀 新特性

💅 优化改进

🐛 重要修复