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

Posted 2023-02-22

【中文标题】Babel 无法使用扩展运算符编译 ES6 对象克隆

【英文标题】：Babel fails to compile ES6 object cloning with spread operator

【发布时间】：2018-05-19 15:09:57

【问题描述】：

我使用 grunt-babel 来编译我的 ES6 代码。但是当我尝试使用...obj 复制和扩展对象时，它会返回Warning: dist/app.js: Unexpected token (321:9) Use --force to continue.。以下代码在 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）

【问题讨论】：

什么版本的Babel，你用的什么babel预设，你是怎么编译的？您留下了很多未回答的问题...

是的，同样的问题。我暂时使用Object.assign(, ) 工作，但想知道一个解决方案。

babel-core v.6.26.0 和 babel-preset-env v.1.6.1

【参考方案1】：

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

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

要解决您的问题，您可以使用 babel-preset-stage-3 之类的内容，并将“stage-3”添加到您的 .babelrc 中的预设列表中。

旁注：

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

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

【讨论】：

您的意思是不允许展开操作？但我可以做到k = ...a 就好了。只有两个对象的组合会造成问题。

@NanduKalidindi 同样，这取决于您使用的预设。

我正在使用 env 预设（这些示例中的第二个 JSON babeljs.io/docs/plugins/preset-env）

@micobg 当前（2017 年 12 月），babel-preset-env 中不包含扩展运算符

... is not an operator。剩余参数、扩展参数和剩余/扩展元素都是 ES6 的一部分。只有休息/传播 properties 不是。 @micobg：preset-env 仅包含已正式发布的功能的转换。

【参考方案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