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

Question

我使用 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)

- micobg

---

你使用的是哪个版本的Babel，使用了哪些Babel预设，编译方式是怎样的？你留下了很多问题没有回答... - elclanrs

是的，我遇到了同样的问题。我暂时使用 Object.assign({}, ) 解决了它，但我想知道一个更好的解决方案。 - Nandu Kalidindi

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

Answer 1

对象的展开属性不是ES6的一部分，截止到2017年12月，它是ECMAScript提案的第3个阶段。您可以在此处查看该提案。

您需要一个包含尚未正式发布的功能的Babel预设。 babel-preset-env 不包括这些功能。

要解决您的问题，您可以使用类似于babel-preset-stage-3的东西，并将“ stage-3”添加到您的.babelrc中的预设列表中。 附注： ES6中对象的展开语法的替代方法是使用Object.assign。

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

- nbkhope

---

你的意思是说展开操作不被允许吗？但是我可以很好地执行 k = {...a}。只有两个对象的组合才会出现问题。 - Nandu Kalidindi

@NanduKalidindi 再次强调，这取决于您使用的预设。 - Dave Newton

@micobg 目前（2017年12月），展开运算符未包含在 babel-preset-env 中。 - nbkhope

...不是运算符。顺便提一下，剩余参数、展开参数和剩余/展开元素都是ES6的一部分。只有剩余/展开属性不是。@micobg：preset-env仅包含已正式发布的功能的转换。 - Felix Kling

@FelixKling非常感谢您指出这一点。我已经更正了答案。请告诉我们是否还有其他问题。 - nbkhope

Answer 2

我之前使用的是过时的ChromeHeadless版本，因为Puppeteer v1的原因，而升级到v16（适用于node 16）后，消除了"Unexpected token '.'"错误。

- Michelle Norris

Answer 3

你可能想要将这些插件添加到你的.babelrc中。这个Github问题有很多解决方案意外的令牌（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

- Nandu Kalidindi