我可以使用Babel将文件传输到ES5，但是可以保留导入/导出，而不是普通的吗？

Question

我想要创建一个npm库，它使用ES导入/导出来交付模块，而不是使用公共ES(例如，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;
}

这就是常识(exports.add)。targets.esmodules选项似乎没有效果。如何让Babel生成es模块(export function add)？还是我误解了在npm上提供ES模块的想法？

Answer 1

看起来，基于卷车文档，您确实应该转换一个只有import/export的版本，但是已经转移出了所有其他的非ES5语法。Webpack博士也说了类似的话。这种格式假定您的用户正在使用诸如Rollup或Webpack之类的工具，这些工具本机支持import/export语句，但可能会将它们转换为与ES5兼容的语法，而无需通过Babel运行库。

它看起来特别像Redux，把它从选项中拿出来，然后在他们的.babelrc文件选项中告诉Babel不要传输模块语句。我不清楚Lodash是如何管理它的，因为查看它们的源代码，我在回购程序中没有看到任何构建脚本。