34

我一直在学习 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在 require 调用之后附加来修复损坏的代码示例，如下所示：

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

...但我认为它看起来有点笨拙并且容易出错（我必须知道哪个模块使用 ES6 语法，以及哪个使用 good old module.exports）。

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

4

2 回答 2

27

要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;
于 2016-03-13T17:44:56.993 回答
-1

如果有人使用 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

于 2018-01-09T05:38:05.557 回答