Javascript 如何正确使用ES6“；“导出默认值”；与CommonJS一起；“需要”吗；？

我一直在努力。在其中一节中，它给出了代码示例，其中包含了该问题的一行要点：

导出默认类按钮{/*此处的类代码*/}

在上述教程的下一节“代码拆分”中，上面定义的类是按需加载的，如下所示：

require.确保（[]，（）=>{
常量按钮=需要（“./组件/按钮”）；
const button=新按钮（“google.com”）；
// ...
});

不幸的是，此代码引发了一个异常：

Uncaught TypeError: Button is not a function

现在，我知道包含ES6模块的正确方法是从“/Components/Button”导入按钮位于文件顶部，但在文件中的任何其他位置使用类似的构造会使babel成为悲伤的熊猫：

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

在修改了上面的（

require.sure（）

）示例之后，我意识到ES6

export default

语法导出了一个名为

default

的属性的对象，该属性包含我的代码（

按钮

函数）

我在require调用后添加了

.default

，修复了坏代码示例，如下所示：

const Button=require（“./组件/按钮”）。默认值；

…但我认为它看起来有点笨拙，而且容易出错（我必须知道哪个模块使用ES6语法，哪个模块使用良好的旧

module.exports

）

---

这就引出了我的问题：从使用CommonJS语法的代码导入ES6代码的正确方法是什么？要使用Babel使用

导出默认值

，可以执行以下操作之一：

require（“myStuff”）。默认值

npm安装巴别塔插件添加模块导出——保存开发

或3：

---

如果有人在客户端使用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()

不要忘记安装此软件包：

---

查找所有详细信息的最快方法是使用

babel cli

传输一个文件并查看结果。唯一需要的是明确的财产所以谢谢你指出这一切

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()