如何配置 .babelrc 以支持 ES6 模块导入和 async/await？

Question

期望的行为

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

库.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  

来源

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

"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为上述以处理 async/await 用法，它曾经是：

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

我的构建脚本package.json是：

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

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

题

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

Answer 1

请注意， 是SyntaxError从内部抛出的lib.js，而不是- 这几乎肯定是该文件未转换app.js的结果。

您正在使用的 babel 命令babel app_es6.js --out-file app.js正在处理app_es6.js；然而，lib.js它并没有受到影响，这可能就是为什么您在读取文件时仍然看到 ESMexport语法的原因。require()

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

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

长话短说：

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

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

希望这可以帮助！