如何配置 .babelrc 以支持 ES6 模块导入和异步/等待？

Question

期望的行为

我正在尝试将代码从一个文件导入另一个文件：

lib.js

// generate unique id
export const guid = () => {
    const s4 = () => {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
}

// get current date as ISO string  
export const currentDateTimeISOString = () => {
    var iso_string = new Date().toISOString();
    return iso_string;
}

// convert boolean string to boolean
export const stringToBoolean = (val) => {
    var a = {
        'true': true,
        'false': false
    };
    return a[val];
}

app_es6.js

import { guid, currentDateTimeISOString, stringToBoolean } from './src/js/lib';  

实际行为

构建后出现错误：

export const guid = () => {
^^^^^^

SyntaxError: Unexpected token export

我的尝试

我用谷歌搜索了这个错误并遇到了各种解决方案。

最新的方法似乎是：

npm install babel-register babel-preset-env --save-dev  

source

我目前在package.json 中有以下babel 相关的开发依赖项：

"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",

而.babelrc 是：

{
    "presets": [
        [
            "env",
            {
                "targets":
                {
                    "node": "current"
                }
            }
        ]
    ]
}

我最近把.babelrc改成了上面的in order to handle async/await usage，以前是：

{
    "presets": [
        "env",
        "stage-0"
    ]
}

我在package.json 中的构建脚本是：

"build-server-file": "babel app_es6.js --out-file app.js",

我担心实施一个过时的解决方案或破坏代码库另一部分的功能（即，如果我恢复到我以前的.babelrc 版本，那么 async/await 将抛出错误）。我也读过stage-x is depreciated。

问题

在 Node.js 环境中导入/导出 ES6 模块的最新方法是什么，同时仍支持 async/await 的 .babelrc 要求？

Answer 1

其实我也遇到了同样的问题，我通过一个名为transform-runtime的babel插件修复了它，而我的.babelrc文件变成了下面这样：

{
  "presets": [
    "es2015",
    "es2016",
    "es2017",
    "react",
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    [
      "transform-runtime",
      {
        "helpers": true,
        "polyfill": true,
        "regenerator": true
      }
    ]
  ],
  "env": {
    "development": {
      "compact": false
    }
  }
}

有关此插件的更多信息，请阅读this link。

Answer 2

您使用的是哪个版本的节点？

您可以轻松地将您的 node 更新到版本 >= 10v 以使用官方 ES6 功能支持。

Answer 3

看起来您正在尝试运行 node.js“服务器”。

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node @babel/plugin-transform-async-to-generator

使用 @babel/ 命名空间会将你从 babel 6 升级到当前最新版本 babel 7。该插件进行异步转换

1. 设置.babelrc 或现在使用7，特别是如果您使用带有自己的babel 配置的node_modules，您可以像这样使用babel.config.js：

module.exports = {
      presets: [ '@babel/preset-env'],
      plugins: [
        @babel/plugin-transform-async-to-generator
      ]
    };

1. 将您的 package.json 构建脚本更新为类似以下内容：

 "scripts": {
  "build": "babel src --out-dir dist",
  "start": "node dist/app_es6.js"
 }

您想将/lib/ 文件夹编译成/dist/ 文件夹。这是您在社区中看到的最常见的模式。

当你正在寻找一个 es6 web 应用程序时，我不建议将所有内容编译为 commonjs (cjs)，因为这会破坏 webpack（通过 babel-loader）执行 tree-shaking。它仅在您使用 import/exports 并将 babel 设置为 cjs 而不是默认的 ems 时才有效，这将使一切变为 require/module.exports。

Answer 4

注意SyntaxError 是从lib.js 中抛出的，而不是app.js——这几乎肯定是那个文件没有被转换的结果。

你正在使用的 babel 命令，babel app_es6.js --out-file app.js 正在处理 app_es6.js；但是，lib.js 没有受到影响，这可能是在require()ing 文件时仍然看到 ESM export 语法的原因。

我设置了一个基本要点，更新了我对您当前设置的了解，以使这项工作按照您的预期方式（我认为）：https://gist.github.com/knksmith57/a554defde2d3d7cf64c4f453565352a0

诀窍是处理整个源目录，而不仅仅是您的入口点文件。

tl;博士：

1. 处理整个源目录，不仅仅是入口点
2. 告诉preset-env 使用cjs（commonjs 的别名）作为目标模块类型
3. 启用插件以将 async 函数转换为生成器函数（在 babel 7.x 中，即 @babel/plugin-transform-async-to-generator）
4. 查看该要点以获得完整的工作示例

如果您在将我的示例反向移植到 babel 6.x 时遇到问题，请告诉我，我可以抽出时间跟进。

希望这会有所帮助！