JavaScript - ES6 模块支持使用 babel

Question

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

我尝试了网上提供的不同解决方案。但没有任何效果。

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

在实用程序中.js

export default Utils = {
};

在应用程序中.js

import Utils from './utils';

在gulpfile中.js

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

Answer 1

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

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

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

• ES6 开发环境通过 babel、gulp 和 webpack 变得简单！
• 使用 Babel & Gulp 将 ES6 模块转换为 AMD 和 CommonJS(其中也包括使用 Browserify(