使用Babel的Yeeoman Webapp中的ES6模块

Question

I'm trying to write some ES6 code. Seeing that the yeoman webapp generator automatically transpiles ES6 code for you with Babel ( https://github.com/yeoman/generator-webapp ), I decided to use that.

It was working fine until I tried to use modules.

My import looks like this:

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

My export looks like this:

export class GameEngine {

So, babel transpiles this for me, and from what I understand it actually changes the modules to requirejs by default. When I look at my transpiled code I see this:

Import:

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

Export:

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

I get console errors with this:

Uncaught ReferenceError: exports is not defined @ game-engine.js:3

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

I tried manually including requirejs but I still get errors.

Has anyone gotten modules working with yeoman webapp? I'd love to get this working.

Thanks, Rob

Answer 1

Hopefully you found a solution for that. If not, you could create a gulp task for this:

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

I recently had exactly the same problem. Babel is not taking care of modules management. You have to bundle all your JS files into one unique file. For that I used browserify.

I found what I needed in this article: http://advantcomp.com/blog/ES6Modules/ (Archived Post)