我可以使用Babel将代码转换为ES5，但保留import/export语法而不是转换为commonjs吗？

Question

我想创建一个npm库，使用ES导入/导出模块（例如像lodash-es一样），而不是commonjs。如果我没错的话，提供的代码必须是ES5并具有import/export。

我不知道如何配置Babel来实现这一点。我期望选项targets.esmodules能解决问题。

当我在calc.js中编写以下代码时：

// calc.js
export function add (a, b) {
    const result = a + b
    return result
}

以及Babel配置文件.babelrc：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

运行Babel时:

babel calc.js

输出结果为：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.add = add;

function add(a, b) {
  var result = a + b;
  return result;
}

这里涉及的是CommonJS (exports.add)。选项 targets.esmodules 似乎没有任何作用。我应该如何让Babel生成一个ES模块 (export function add)？或者我是否误解了在npm上传递ES模块的想法？

- Jos de Jong

---

如果我没记错的话，交付的代码必须是ES5并且具有导入/导出功能。- 你可能弄错了。任何理解import/export的环境也都理解所有其他ES6语法，因此这个要求真的很奇怪。 - Bergi

谢谢。这也是我的假设，但我收到了一些关于 mathjs 的问题报告。JS 项目通常不会从依赖项转译代码，只会从项目本身的源代码进行转译。因此，当我发布需要转译的库时，就会出现问题。查看 redux，es 文件夹包含 es import/export，并且代码已经被转译为 ES5（没有 =>、const 等）。lodash-es 也是如此。如何使用 Babel 实现这一点？ - Jos de Jong

Answer 1

根据Rollup文档，您应该转译仅包含import/export的版本，并将所有非ES5语法转译出来。Webpack文档也有类似的说法。这种格式假定您的用户正在使用像Rollup或Webpack这样的工具，这些工具本地支持import/export语句，但是可能会将它们转译为ES5兼容的语法，而无需运行您的库通过Babel。

看起来特别是Redux使用Rollup的format选项实现了这一点，然后在他们的.babelrc文件中使用了"modules": false选项告诉Babel不要转译模块语句。我不清楚Lodash是如何处理的，因为查看他们的源代码，我没有在存储库中找到任何构建脚本。

- lobati

---

太好了，这真的是缺少的链接，感谢Robert找出来！我现在有一个工作中的概念证明，使用Babel配置 {"presets": [["@babel/preset-env", { "modules": false }]]}。 - Jos de Jong