JavaScript - ES6 模块支持使用 babel

Question

我正在开发一个没有任何 JS 框架的 JS 应用程序。我正在使用 babel 来支持箭头功能等。我想在我的应用程序中使用 ES6 模块。如果我编译包含导入和导出语句的 JS 代码并在浏览器中运行，我会收到错误消息“未定义导出”。

我尝试了不同的在线解决方案。但没有任何效果。

我不能通过添加 babel 和转译来使用 ES6 模块吗？如果是，我该如何实现？

在 utils.js 中

export default Utils = {

};

在 app.js 中

import Utils from './utils';

在 gulpfile.js 中

.pipe(babel({
        presets: ['es2015']
}))

Answer 1

虽然 Babel 可以将 ES6 模块语法转换为 CommonJS 模块语法，但它不会捆绑模块以在根本不支持它们的环境中使用。

为此，您应该使用 Browserify、Webpack 或其他模块捆绑器。

有关更多信息，您应该查看：

• ES6 development environment made easy with babel, gulp and webpack!
• Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp（也包括使用 Browserify）