基于Babel的yeoman应用程序中的ES6模块

Question

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

在我试着使用模块之前，它一直运转良好。

我的进口是这样的：

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

我的出口是这样的：

export class GameEngine {

因此，babel为我介绍了这一点，据我所知，它实际上在默认情况下将模块更改为requirejs。当我查看我的转换代码时，我看到了以下内容：

进口：

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

出口：

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

我得到了这个控制台错误：

未定义的ReferenceError:导出未定义@博弈-工程. is :3

未定义的ReferenceError: require未定义@ main.js:1

我尝试过手动包含需求，但仍然会出现错误。

有没有人用获得模块？我很想把这事办好。

谢谢你，罗伯

Answer 1

我最近也遇到了同样的问题。Babel没有负责模块管理。您必须将所有JS文件打包到一个唯一的文件中。为此，我使用了褐变。

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

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'));
});