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

【问题标题】：Using ES6 modules with traceur in single build file在单个构建文件中使用带有 traceur 的 ES6 模块
【发布时间】：2015-07-05 02:17:08
【问题描述】：

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

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

我正在使用 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;（也尝试了几种方法）

【问题讨论】：

只是提示，我发现 babel.js + webpack 非常适合 ES6 模块。
我这里有同样的问题stackoverflow.com/questions/29886950/…
gulp-es6-imports-renamer npmjs.com/package/gulp-es6-imports-renamer
我不确定这是否能回答您的问题，但我使用 systemjs builder（带有 traceur 和 es6-module-loader）来构建和提供我的 es6 文件。我正在创建一个有角度的 es6 种子项目。您可以在此处查看代码 - github.com/jabhishek/gulp-es6-angular/tree/…。希望它会有所帮助。
不确定您的确切情况，但可能的替代方法是将 browserify 与 es6ify 转换（使用 traceur 转换）一起使用。这将编译您的模块并将它们全部捆绑到一个单独的 browserify 捆绑文件中。

标签： javascript gulp ecmascript-6 traceur gulp-traceur

【解决方案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 }));

});

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

【讨论】：

【解决方案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)。

【讨论】：