Babel / Rollup 错误转译和捆绑 ES2017答案

【问题标题】：Babel / Rollup errors transpiling and bundling ES2017Babel / Rollup 错误转译和捆绑 ES2017
【发布时间】：2017-02-15 13:23:15
【问题描述】：

使用 Rollup 和 Babel 将 ES2017 JavaScript（特别是 async/await 函数）转换为 ES5 时出错：

使用“babel”插件转换 \src\index.js 时出错：选项 {"modules":false} 传递给 \node_modules\babel-preset-es2017\lib\index.js 不接受选项。

我的.babelrc 文件：

{
  "presets": [
    "es2017"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}

当然，如果我将 presets 从 es2017 更改为 es2015 并注释掉 async/await 代码，错误就会消失。

请注意，虽然应用程序使用ES2017 功能（即async/await），但它会作为 NPM 包（作为ES6 (ES2015) 模块）发布，然后转换为通用ES5 (ES2009)。

如何克服这个错误并让我的 ES2017 愉快地转换为 ES5？

【问题讨论】：

ES2017 不是 ES7。

标签： javascript babeljs rollupjs ecmascript-2017

【解决方案1】：

在您的.babelrc 文件中定位es2015：

"presets": [
    "es2015"
 ],

并通过首先添加Rollup Async functions plugin 来预处理es2017 特征，其中：

用可以运行的生成器函数替换异步函数捆绑期间的现代浏览器或大多数版本的 node.js

添加到您的项目中：

npm install --save-dev rollup-plugin-async

然后将async 预处理插入到您的rollup.config.js 插件数组中，在babel() 之前：

import async from 'rollup-plugin-async';

...

plugins: [
        async(),
        babel(babelrc())
],

在this Rollup Github issues thread 中发现了关键见解，其中@Victorystick 证实（截至2016 年10 月10 日）：

Rollup 目前仅针对 ES6，尽管它可能会得到扩展很快到 ES7。目前，如果你使用 >ES6 特性，它们需要转译为 Rollup 处理它们

由于 async/await 很可能在 ECMAScript 的下一版本 ES2017（又名 ES8）中被标准化，因此在 Babel 运行之前，您需要一个额外的插件来处理它们。

注意：
YMMV，但我后来在 Windows 7 上使用 rollup-plugin-async 收到了 AsyncHelper not found run time Errors，所以我的解决方案是（npm uninstall --save-dev rollup-plugin-async 和）回滚使用 async/await 以支持在我的代码库中使用 ES6 Promises。

【讨论】：

【解决方案2】：

看来你提供的实际配置是：

{
  "presets": [
    "es2017", {modules: false}
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}

您应该删除babel-preset-es2017 的{modules: false} 选项，该选项不接受任何内容，因为它适用于babel-preset-es2015。

【讨论】：

但是怎么做呢？ {modules:false} 选项正在由转译器自动插入。