Question

我只是有一个简单的问题无法进入任何地方，我一直在谷歌上搜索它。没有太多关于traceur的信息，什么时候不太清楚，至少对我而言。

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

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

我有一个疑问是我一直在寻找关于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 }));
    });

导入

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

import Circle from './elements/circle';

或

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

（尝试过几种方式）

导出时也来自circle.js

export default Circle;或export Circle;（也尝试了多种方式）

Answer 1

最后，我按照@Jeff在评论中提出的建议完成了Traceur for Babel的转换。

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

我认为我得到的错误是关于代码是正确的，但没有客户端能够管理模块，所以需要像需要或commonjs来处理模块，主要怀疑在这里，因为我希望traceur到已经将代码转换为ES5可理解的代码。但同样，缺乏信息并没有明确指出（我用Google搜索超过6小时）

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

这是我的一天。由于缺乏信息，我花了很长时间才意识到/猜测使用带有Traceur的Browserify也可以工作，但在看了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 }));

});

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

Answer 2

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

1）加载transpiler libs

<!-- 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）。

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

2 个答案: