带有 Babel 的 yeoman webapp 中的 ES6 模块

Question

我正在尝试编写一些 ES6 代码。看到 yeoman webapp 生成器使用 Babel (https://github.com/yeoman/generator-webapp) 自动为您转译 ES6 代码，我决定使用它。

在我尝试使用模块之前它工作正常。

我的导入是这样的：

import {GameEngine} from './game-engine.js';

我的导出是这样的：

export class GameEngine {

所以，babel 为我转译了这个，据我所知，它实际上默认将模块更改为 requirejs。当我查看我的转译代码时，我看到了这个：

导入：

var _gameEngine = require('game-engine');

导出：

Object.defineProperty(exports, '__esModule', {
    value: true
});

我收到控制台错误：

未捕获的引用错误：导出未定义@游戏-engine.js:3

未捕获的 ReferenceError：未定义要求 @main.js:1

我尝试手动包含 requirejs，但仍然出现错误。

有人获得了与 yeoman webapp 一起使用的模块吗？我很想让它工作。

谢谢，罗布

Answer 1

我最近遇到了完全相同的问题。 Babel 不负责模块管理。您必须将所有 JS 文件捆绑到一个唯一的文件中。为此，我使用了 browserify。

我在这篇文章中找到了我需要的内容：http://advantcomp.com/blog/ES6Modules/（已存档 Post）

Answer 2

希望您找到了解决方案。如果没有，您可以为此创建一个 gulp 任务：

var gulp = require('gulp'),
    browserify = require("browserify"),
    babelify = require("babelify"),
    buffer = require('vinyl-buffer'),
    source = require('vinyl-source-stream'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('buildJs', function() {
    return browserify({
        entries: './app/src/app.js',
        debug: true
    })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(DEST+'/src'));
});

带有 Babel 的 yeoman webapp 中的 ES6 模块

ES6 Modules in yeoman webapp with Babel

javascript

web-applications

yeoman

babeljs