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 };

我使用的ENV預設。 （ babel-core v.6.26.0和babel-preset-env v.1.6.1 ）

Answer 1

對象的傳播屬性不是ES6的一部分。 目前，截至2017年12月，它是ECMAScript第三階段提案的一部分。 您可以在這里查看提案 。

您需要一個babel預設，其中包括尚未正式使用該語言的功能。 babel-preset-env不包含這些功能。

為了解決您的問題，您可以使用babel-preset-stage-3之類的東西 ，並將“ stage-3”添加到.babelrc中的預設列表中。

邊注：

ES6中對象的傳播語法的替代方法是使用Object.assign

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

Answer 2

您可能希望將這些插件添加到.babelrc 。 這個Github問題有很多解決方案意外的令牌（剩余散布算子） 。 我現在正在嘗試這些。

{
  "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