转译 es6 模块以在浏览器中运行

Question

我有一个使用 es6 模块的应用程序的简单示例，我想将它们转换为 es5（我不想在浏览器中运行模块，尽管我知道它们的支持率为 90%+在此刻）。

我正在兜圈子，遇到同样的错误和问题。
这是我的设置和我想要实现的目标：

//add.js
export function add(x, y) {
  return x + y;
}

//multiply.js
export function multiply(x, y) {
  return x * y;
}

然后我运行 babel 以使用 @babel/preset-env 预设输出一个 bundle.js 文件。

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

输出如下：

"use strict";

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

function add(x, y) {
  return x + y;
}
"use strict";

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

function multiply(x, y) {
  return x * y;
}

当我在浏览器中运行 html 文件时，控制台会记录以下错误：
bundle.js:3 Uncaught ReferenceError: exports is not defined

我的问题是：
babel 输出的是什么？
它们是 commonjs 模块吗？
如何让 es6 模块在浏览器中运行？

Answer 1

"esmodules": true" 错误。

当指定"esmodules": true" 时，浏览器目标将被忽略并且脚本不会被转译为 es5。输出取决于您的 target 值。现代浏览器原生处理 es6 模块，最好的方法是转译不同于旧版浏览器（ie11）的现代浏览器并加载特定的脚本，例如

// low transpiled (loads only in modern browser)
<script type="module" src="/assets/scripts/main.js"></script>

// full transpiled (loads only in legacy browser) --> polyfill this bundle
<script nomodule src="/assets/scripts/main.legacy.js" defer></script> 

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript/babel-config.js
const modern = {
  presets: [
    ["@babel/preset-env", {
      // define transpile level
      targets: {
        browsers: [
          "> 1% in EU",
          "not ie 11",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false,
  cacheDirectory: path.join(CACHE_PATH, 'babel-loader')
};

const legacy = {
  presets: [
    ["@babel/preset-env", {
      // define transpile level
      targets: {
        browsers: [
          "> 1% in CH",
          "ie >= 11",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false,
  cacheDirectory: path.join(CACHE_PATH, 'babel-loader')
};

请查看babel documentation了解更多信息。