如何正确使用 ES6 "export default" 和 CommonJS "require"？

Question

我一直在努力 Webpack tutorial。在其中一节中，它给出了包含一行本质的代码示例来解决这个问题：

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

在该教程的下一节中，标题为 "Code splitting"，上面定义的 class 按需加载，如下所示：

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 语法导出了一个 object，其中属性命名为 default ，其中包含我的代码（Button 函数）。

我确实通过在 require 调用后附加 .default 修复了损坏的代码示例，如下所示：

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

...但我认为它看起来有点笨拙，它是 error-prone（我必须知道哪个模块使用 ES6 语法，哪个模块使用旧的 module.exports）。

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

Answer 1

要将 export default 与 Babel 一起使用，您可以执行以下操作之一：

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

或 3:

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

Answer 2

如果有人使用 gulp + browserify + babelify 来捆绑在客户端使用的 js。

尝试以下代码 [gulpfile.js]：

browserify({
  entries: "./ui/qiyun-ui/javascripts/qiyun-ui.src.js",
  standalone: "qyUI" // To UMD
})
.transform(babelify, {
  presets: ["env"],
  plugins: ["add-module-exports"] // export default {} => module.exports = exports['default'];
})
.bundle()

不要忘记安装这个包： https://www.npmjs.com/package/babel-plugin-add-module-exports

如何正确使用 ES6 "export default" 和 CommonJS "require"？

How to correctly use ES6 "export default" with CommonJS "require"?

javascript

commonjs

ecmascript-6

webpack

es6-module-loader