Транспортировка модулей 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, чтобы вывести файл bundle.js с использованием предустановки @babel/preset-env.

// .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?
Являются ли они общими js модулями?
Как можно Я получаю модули es6 для запуска в браузере?

Answer 1

"esmodules": true" неверно.

при указании "esmodules": true" цели браузеров будут игнорироваться, а скрипты не будут перенесены в es5. вывод зависит от ваших значений target. современные браузеры обрабатывают собственные модули es6, лучший способ - это перенести современные браузеры, отличные от устаревшего браузера (ie11), и загрузить скрипты, указанные c например,

// 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 для получения дополнительной информации.