在单个构建文件中使用带有 Traceur 的 ES6 模块

我只是有一个简单的问题无法在任何地方找到，整个早上都在谷歌上搜索。关于 Traceur 的信息不多，而且什么时候有也不是很清楚，至少对我来说是这样。

当我使用traceur转译单个输出文件并在浏览器中使用traceur-runtime使用它时，应该如何实现ES6模块？ 导入和导出不断获得意外令牌。

我正在使用 gulp-traceur 并尝试了所有模块选项 //'commonjs' //'amd', 'commonjs', '实例化', '内联', '注册'。

我的一个疑问是，我一直在寻找有关 commonjs 的答案，但我使用 ES6 模块的想法是拥有不同的源，然后从 main 导入它们，并将所有这些结果编译到一个文件中（我的意思是我不需要在浏览器中异步加载模块）

这是 gulp 任务

gulp.task('scripts', function() {
      del.sync(['bin/js/main.min.js']);
      del.sync(['bin/js/main.min.js.map']);
      gulp.src(["./src/app/init.js", "./src/app/elements/circle.js", "./src/app/app.js"])
        .pipe(sourcemaps.init())
        .pipe(traceur({modules : 'inline', sourceMaps: 'inline', experimental: "true"})) //'commonjs' //'amd', 'commonjs', 'instantiate', 'inline', 'register'
          .on('error', errorParser)
        .pipe(jshint())
          .pipe(jshint.reporter('jshint-stylish'))
        .pipe(uglify({mangle: true})).on('error', errorParser)
        .pipe(concat('main.min.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('bin/js'))
        .pipe(livereload({ auto: true }));
    });

导入时意外的令牌来自应用程序

import Circle from './elements/circle';

or

import * as Circle from './elements/circle.js';

（尝试了几种方法）

导出时也是来自circle.js

export default Circle; or export Circle;（也尝试了几种方法）

最后，我按照 @Jeff 在他的评论中的建议完成了将 Traceur 切换为 Babel。

所以我的解决方案是使用 Babel + Browserify + Gulp

我认为我得到的错误是关于代码已正确转换，但没有客户端能够管理模块，因此需要像 require 或 commonjs 这样的东西来处理模块，主要的疑问在这里，因为我希望 Traceur 已经转换了代码转换为 ES5 可理解的代码。但同样，缺乏信息并不能说明这一点（我在谷歌上搜索了 6 个多小时）

我使用 Browserify 工具 babelify，它会自动将 ES6 模块语法转换为浏览器可理解的 commonjs。

这件事情让我感到很快乐。由于缺乏信息，我花了一些时间才意识到/猜测使用 Browserify 和 Traceur 也可以工作，但是在查看了 Babel 之后，我认为比 Traceur 有优势，特别是客户端上不需要 runtime.js，并且输出更加一致且不那么臃肿。

如果我正在使用的 gulp 任务对将来的人有帮助，我将其粘贴到下面：

gulp.task('scripts', function() {

  del.sync(['bin/js/main.min.js']);
  del.sync(['bin/js/main.min.js.map']);

  gulp.src(["./src/**/*.js", "!./src/lib/*.js"])
    .pipe(gp.jshint())
    .pipe(gp.jshint.reporter('jshint-stylish'));

  browserify({
    entries: './src/app/app.js',
    debug: true
  })
  .transform(babelify)
  .bundle().on('error', errorParser)

  .pipe(source('main.js'))
  .pipe(gulp.dest('./bin/js'))
    .pipe(gp.livereload({ auto: true }));

});

如果您有更好的方法，请告诉我。