如何正确使用ESJ"导出默认值"与CommonJS"require"？

Question

我一直在通过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()上面的上一个()示例的一些摆弄之后,我意识到ES6 export default语法导出一个具有名为property的对象,该对象default包含我的代码(Button函数).

我通过.default在require调用后附加来修复损坏的代码示例,如下所示:

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

...但我认为它看起来有点笨拙并且容易出错(我必须知道哪个模块使用ES6语法,哪个使用旧版本module.exports).

这让我想到了一个问题:从使用CommonJS语法的代码导入ES6代码的正确方法是什么？

Answer 1

要export default与Babel一起使用,您可以执行以下操作之一:

1. require("myStuff").default
2. npm install babel-plugin-add-module-exports --save-dev

或者3:

//myStuff.js
var thingToExport = {};
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = thingToExport;