我可以使用Babel转换为ES5，但保留导入/导出而不是commonjs吗？

Question

我想创建一个npm库，该库使用ES导入/导出而不是commonjs交付模块（例如lodash-es这样做）。 如果我没记错的话，提供的代码必须是ES5，并且具有导入/导出功能。

我不知道如何配置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模块的想法？

Answer 1

根据Rollup文档 ，您似乎确实应该转换一个仅具有import / export ，但已经转换出所有其他非ES5语法的版本。 Webpack文档说类似的话。 这种格式假定您的用户使用的是Rollup或Webpack之类的工具，它们本身就支持import / export语句，但随后可以将它们转换为与ES5兼容的语法，而无需通过Babel运行您的库。

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