跳至主内容

6.19.0 发布

· 1 分钟阅读
Henry Zhu
非官方测试版翻译

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

object-rest-spread 现已支持独立使用，并新增了多个插件选项 API！

v6.19.0 版本摘要 (2016-11-16)​

🚀 新特性​

#4755 使 object-rest-spread 可作为独立插件使用 (@hzoo)

此项重构修复了长期存在的问题：object-rest-spread 插件需要依赖另外两个插件才能正确编译 RestProperty。

考虑到插件应保持独立性的前提，此修复至关重要；同时对于 babel-preset-env 的使用也意义重大，因为新环境已原生支持解构语法。

输入

JavaScript
const { a, ...b } = c;

输入

JavaScript
const { a } = c; // remove the `...b`
const b = _objectWithoutProperties(c, ["a"]); // use the helper

可以看到解构语法在各种场景中的灵活应用！

RestProperty

function a({ b, ...c }) {} // Parameters
JavaScript
const { a, ...b } = c; // VariableDeclaration
JavaScript
export var { a, ...b } = c; // ExportNamedDeclaration
JavaScript
try {} catch ({a, ...b}) {} // CatchClause
JavaScript
({a, ...b} = c); // AssignmentExpression
JavaScript
for ({a, ...b} of []) {} // ForXStatement

SpreadProperty

JavaScript
var a = { ...b, ...c } // ObjectExpression

#4544 为 "transform-class-properties" 新增 spec 选项 (@motiz88)

类属性将使用 Object.defineProperty 替代简单的 this.x = y 赋值。 静态字段即使未初始化也会设置 value: undefined。

用法

JavaScript
{
  "plugins": [
    ["transform-class-properties", {
      "spec": true
    }]
  ]
}

输入

JavaScript
class Foo {
  static bar;
  baz = 'guy';
}

输入

JavaScript
var Foo = function Foo() {
  _classCallCheck(this, Foo);
  this.baz = 'guy';
};

使用 "spec": true 时的输出

JavaScript
var Foo = function Foo() {
  babelHelpers.classCallCheck(this, Foo);
  _initialiseProps.call(this);
};

Object.defineProperty(Foo, "bar", {
  enumerable: true,
  writable: true,
  value: undefined
});

var _initialiseProps = function () {
  Object.defineProperty(this, "bar", {
    enumerable: true,
    writable: true,
    value: foo
  });
};

#4836 新增路径工具方法 path.isAncestor 和 path.isDescendant (@boopathi)

我们在 path.findParent 基础上新增了两个类似的"层级关系"路径方法：

用法

JavaScript
let programPath, numberPath;
traverse(ast, {
  Program(path) { programPath = path; },
  NumberPath(path) { numberPath = path; },
});

programPath.isAncestor(numberPath); // true
numberPath.isDescendant(programPath); // true

#4835 在 traverse 下新增独立的 clearCache 和 clearPath API (@boopathi)

用法

JavaScript
traverse.clearCache(); // clears both path's and scope cache
traverse.clearCache.clearPath();
traverse.clearCache.clearScope();

#4827 为 babel-generator 新增 jsonCompatibleStrings 选项 (@kangax)

用法

JavaScript
{
  "generatorOpts": {
    "jsonCompatibleStrings": true // defaults to false
  }
}

设置为 true 时，生成器将使用 jsesc 并开启 "json": true 选项。这会使输出变为 "\u00A9" 而非 "©"；

#3547 为 babel-generator 新增 flowCommaSeparator 选项 (@sampepose)

用法

JavaScript
{
  "generatorOpts": {
    "flowCommaSeparator": true // defaults to false
  }
}

当前 Flow 对象类型支持两种语法（, 和 ;）。逗号分隔符符合更主流的代码风格，并与 JavaScript 的对象定义方式一致，使书写更符合直觉。

JavaScript
var a: { param1: number; param2: string }
var a: { param1: number, param2: string }

#3553 新增 t.isNodesEquivalent 方法 (@hzoo)

用法

JavaScript
assert(t.isNodesEquivalent(parse("1 + 1"), parse("1+1")) === true);

#4789 在 transform-es2015-modules-systemjs 中支持 stage-2 阶段的 import() 上下文导入语法 (@guybedford)

建议添加 stage-2 预设，或显式引入 babel-plugin-syntax-dynamic-import（默认未启用）。

JavaScript
export function lazyLoadOperation () {
  return import('./x')
  .then(function (x) {
    x.y();
  });
}

🐛 错误修复​

#4830 使用 minified 选项时将打印更短的 NumericLiteral 形式。(@shinew)

输入

JavaScript
5e1;
5e4;

输出

JavaScript
50;
5e4;

#4832 修复 transform-es2015-modules-systemjs 确保模块迭代一致性。(@guybedford)

JavaScript
import "2"; // should be imported first
import "1"; // second

#4813 修复解构变量的 binding 类型在 transform-react-constant-elements 中的处理问题。(@STRML)

修复了解构参数被错误提升的问题。

输入

JavaScript
function render({ text }) {
  return () => (<Component text={text} />);
}

输出

JavaScript
function render(_ref) {
  let text = _ref.text;
  var _ref2 = <Component text={text} />;
  return () => _ref2;
}

🌏 贡献者：10 人​

完整变更日志请查看 GitHub！