Я работал черезWebpack учебник, В одном из разделов приведен пример кода, который содержит одну строчку сути этого вопроса:

export default class Button { /* class code here */ }

В следующем разделе упомянутого учебника под названием «Разделение кода» определенный выше класс загружается по требованию, например так:

require.ensure([], () => {
    const Button = require("./Components/Button");
    const button = new Button("google.com");
    // ...
});

К сожалению, этот код вызывает исключение:

Uncaught TypeError: Button is not a function

Теперь я знаю, чтоправо способ включить модуль ES6 будет простоimport Button from './Components/Button'; в верхней части файла, но использование такой конструкции где-либо еще в файле делает babel грустной пандой:

SyntaxError: index.js: 'import' and 'export' may only appear at the top level

После некоторого возни с предыдущим (require.ensure()) Пример выше, я понял, что ES6export default Синтаксис экспортирует объект с именемdefault, который содержит мой код (Button функция).

Я исправил пример неработающего кода, добавив.default после звонка, вот так:

const Button = require("./Components/Button").default;

... но я думаю, что это выглядит немного неуклюже и подвержено ошибкам (я должен был бы знать, какой модуль использует синтаксис ES6, а какой использует старый добрыйmodule.exports).

Что подводит меня к моему вопросу:Как правильно импортировать код ES6 из кода, который использует синтаксис CommonJS?