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

Question

我只是有一个简单的问题，任何地方都找不到，他已经用谷歌搜索了一上午。关于traceur的信息并不多，什么时候有也不是很清楚，至少对我来说。

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

我正在使用gulp-traceur，并且已经尝试了所有的模块选项//'commonjs‘//'amd'，'commonjs'，'instantiate'，'inline'，'register’。

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

这就是大口吞下的任务

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

导入时意外令牌来自app

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模块语法转换为浏览器可以理解的通用语法。

这让我一天都很开心。由于缺乏信息，我花了一些时间来意识到/猜测使用带有Traceur的浏览器也可以工作，但在看了一下Babel之后，我认为它比Traceur更有优势，特别是在客户端不需要runtime.js，并且输出更一致，更不臃肿。

我在下面粘贴我正在使用的吞咽任务，如果它在将来对某人有帮助的话：

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

});

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

Answer 2

实际上，可以直接在浏览器中加载ES6模块。

1)加载转换器库

<!-- transpiler -->
<script type="text/javascript" src="lib/traceur.js"></script>
<script type="text/javascript" src="lib/es6-module-loader.js"></script>

2)导入你的编码模块，我这里用的是System.paths，不过没必要这样做，你可以直接用相对路径导入：

System.paths['gso/eonjs/*'] = 'dist/es6/gso/eonjs/*.js';

var Eon;
var MomentRecurRule;
var RRuleRecurRule;
var RecurRuleContainer;
System.import('gso/eonjs/EonJS').then( function( _exports ) {
    Eon = _exports;
    MomentRecurRule = Eon.MomentRecurRule;
    RRuleRecurRule = Eon.RRuleRecurRule;
    RecurRuleContainer = Eon.RecurRuleContainer;
});

这将主API和类保留在全局名称空间中。

System.import()是异步的，所以在模块实际加载之前，代码会跳到下一行--加载小部件将完成我在这一点上猜到的技巧。

有关完整的工作示例，请参阅example-es6-modules.html。

我目前使用traceur只是出于历史原因，我的目标是保持技术含量不变。尽可能保持中立--虽然我使用了traceur，但我的目标是不把自己限制在使用traceur上--项目可以相对容易地切换到babel (从战术上来说，这是主要原则)。使用babel编码有很多很好的理由，我或多或少地相信我会因为这些原因在某个时候做出改变(当其他所有人都已经使用完全支持的新铸造的ES2015返回到正常的编码时，我仍然会很高兴地转换)。