Question

我一直在研究Webpack tutorial。在其中一个部分中，它给出了代码示例，其中包含一行本质问题：

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';，但在文件的任何其他位置使用类似的构造巴贝尔悲伤的熊猫：

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

在摆弄上面的上一个（require.ensure()）示例之后，我意识到ES6 export default语法导出了一个具有名为default的属性的对象，其中包含我的代码（{{1功能）。

我确实通过在需要调用之后附加Button来修复损坏的代码示例，如下所示：

.default

...但我认为它看起来有点笨拙并且容易出错（我必须知道哪个模块使用ES6语法，哪个模块使用旧的const Button = require("./Components/Button").default;）。

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

Answer 1

要将encrypted.length与Babel一起使用，您可以执行以下操作之一：

export default
require("myStuff").default

或3：

npm install babel-plugin-add-module-exports --save-dev

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

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

2 个答案: