Eu tenho trabalhadoTutorial do Webpack. Em uma das seções, ele fornece o exemplo de código que contém uma linha de essência para esta pergunta:

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

Na próxima seção do referido tutorial, intitulada "Divisão de código", a classe definida acima é carregada sob demanda, assim:

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

Infelizmente, esse código gera uma exceção:

Uncaught TypeError: Button is not a function

Agora eu sei que odireito Uma maneira de incluir o módulo ES6 seria simplesmenteimport Button from './Components/Button'; na parte superior do arquivo, mas usar uma construção como essa em qualquer outro lugar do arquivo faz de babel um panda triste:

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

Após algumas brincadeiras com as anteriores (require.ensure()) exemplo acima, percebi que o ES6export default sintaxe exporta um objeto que possui a propriedade denominadadefault, que contém meu código (oButton função).

Corrigi o exemplo de código quebrado anexando.default depois de exigir a chamada, assim:

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

... mas acho que parece um pouco desajeitado e propenso a erros (eu precisaria saber qual módulo usa a sintaxe ES6 e qual usa bons e velhosmodule.exports)

O que me leva à minha pergunta:qual é a maneira correta de importar o código ES6 do código que usa a sintaxe CommonJS?