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

Question

我只是有一个简单的问题无法在任何地方得到，他整个上午都在谷歌上搜索它。没有太多关于 traceur 的信息，当有的时候也不是很清楚，至少对我来说是这样。

当我使用 traceur 转译单个输出文件并在带有 traceur-runtime 的浏览器中使用它时，应该如何实现 ES6 模块？import 和 export 不断收到意外的 token 。

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

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

这是 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 }));
    });

导入时意外的 token 来自应用

import Circle from './elements/circle';

或

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

(尝试了几种方法)

导出时也来自circle.js

export default Circle; 或者export Circle;(也试了几种方法)

Answer 1

最后，我按照@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 }));

});

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