Babel / Rollup 错误转译和捆绑 ES2017

Posted 2023-03-07

【中文标题】Babel / Rollup 错误转译和捆绑 ES2017

【英文标题】：Babel / Rollup errors transpiling and bundling 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。

【参考方案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 选项正在由转译器自动插入。