3

我只是有一个简单的问题在任何地方都找不到，他整个早上都在谷歌上搜索。关于traceur的信息不多，至少对我来说不是那么清楚。

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

我正在使用 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 }));
    });

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

import Circle from './elements/circle';

或者

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

（尝试了几种方法）

导出时也来自circle.js

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

4

2 回答 2

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

});

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

于 2015-04-27T15:27:56.010 回答
0

实际上可以直接在浏览器中加载 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）。

于 2015-04-27T18:50:42.307 回答