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

对象的spread属性不是ES6的一部分。目前，截至2017年12月，它是ECMAScript第3阶段提案的一部分。你可以have a look at the proposal here。

您需要一个babel预设，其中包含尚未正式使用该语言的功能。 babel-preset-env不包含这些功能。

要解决您的问题，您可以使用类似babel-preset-stage-3的内容并添加＆＃34; stage-3＆＃34;到.babelrc。

中的预设列表

旁注：

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

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

Answer 2

您可能希望将这些插件添加到.babelrc。这个 Github 问题有很多解决方案unexpected token (rest spread operator)。我现在正在尝试这些。

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

Babel无法使用spread运算符编译ES6对象克隆

2 个答案: