Babel无法用扩展运算符编译ES6对象克隆

Question

我使用grunt-babel来编译我的ES6代码。但是，当我尝试使用Warning: dist/app.js: Unexpected token (321:9) Use --force to continue.复制和扩展对象时，它会返回{...obj}。下面的代码在Chrome v61的控制台上运行得很好，但是Babel并不喜欢它。有什么问题吗？

let a = { a: 12 };
let b = { ...a, b: 15 };

我正在使用环境预置。(babel-core v.6.26.0和babel-预设-env诉1.6.1)

Answer 1

对象的扩散属性不是ES6的一部分。目前，截至2017年12月，这是ECMAScript第三阶段提案的一部分。你可以看一下这里的建议。

您需要一个babel预置，其中包括尚未正式在语言中的功能。babel-preset-env不包括这些特性。

为了解决您的问题，您可以使用类似巴贝尔-预置-舞台-3的内容，并将"stage-3“添加到.babelrc中的预置列表中。

附带说明：

ES6中对象的扩展语法的一个替代方法是使用Object.assign。

let b = Object.assign({}, a, { b: 15 });

Answer 2

您可能希望将这些插件添加到您的.babelrc中。这个Github问题有很多解决方案意外令牌(rest扩展操作符)。我现在正在试用这些。

{
  "presets": ["react", "es2015"],
  "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}

npm install --save-dev babel-plugin-transform-es2015-destructuring

npm install --save-dev babel-plugin-transform-object-rest-spread