为什么在这种情况下 babel 会转译导入和导出？

【问题标题】：Why babel transpiles import and export in this case?为什么在这种情况下 babel 会转译导入和导出？
【发布时间】：2020-02-13 01:18:39
【问题描述】：

我有这个babel.config.js：

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
  ["@babel/preset-react"],
];

如果以上所有目标都支持import/export，为什么它会将 es6 import/export 转换为以下内容：

var _styles = require("@material-ui/styles");

var _core = require("@material-ui/core");

exports.default = _default;

【问题讨论】：

标签： javascript ecmascript-6 babeljs es6-modules

【解决方案1】：

因为你需要明确告诉 Babel 以 ES 模块为目标。它无法从您的目标浏览器列表中推断出来。

看看@babel-env documention，这就是您将支持 esmodules 的方式。

"@babel/env",
  {
    "targets": {
      "esmodules": true
    }
  }

请注意：指定 esmodules 目标时，浏览器目标将被忽略。

【讨论】：

添加 targets: {esmodules: true} 仍然可以转换 import/export。但是我尝试了modules: false，就像babeljs.io/docs/en/babel-preset-env#modules一样，给了我正确的结果。
我认为，targets.esmodules=true 也不会忽略单个浏览器目标。只是属性targets.browsers 将被忽略。