带有 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
});

我收到控制台错误：

未捕获的 ReferenceError：未定义导出 @game-engine.js:3

Uncaught ReferenceError: require is not defined @main.js:1

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

有没有人使用过 yeoman webapp 的模块？我很乐意让它工作。

谢谢， 抢

Answer 1

希望您找到了解决方案。如果没有，您可以为此创建一个 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'));
}); 

Answer 2

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

我在这篇文章中找到了我需要的东西：http://advantcomp.com/blog/ES6Modules/（存档帖子）