在单一构建文件中使用带有traceur的ES6模块 [英] Using ES6 modules with traceur in single build file

问题描述

我只是有一个简单的问题不能在任何地方，他一直在谷歌搜索它的整个早晨。没有太多的关于traceur的信息，当有不清楚的时候，至少对我来说。

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

我使用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}））//'co mmonjs'//'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}））; 
}）; 
  

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

 从'./elements/circle'导入圆。 
  

或

  import *作为./elements/circle.js中的圆。 
  

（尝试几种方式）

另外导出时从circle.js

导出默认圆; 或导出圆; code>（也尝试了几种方式）

解决方案

最后，我完成了为Babel在他的评论中。

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

我认为错误我正在得到的是关于代码是正确的，但没有客户端能够管理模块，所以需要像require或commonjs这样的模块来处理这个问题，因为我希望traceur已经将代码转换为ES5可理解的代码。但是，再次，缺乏信息并没有指出这一点（我在谷歌搜索超过6个小时）

我使用Browserify工具，babelify，自动翻译ES6模块语法到浏览器可以理解的commonjs。

这是我的一天。由于缺乏信息，我花了时间来实现/猜测，使用Traceify的Browserify也可以工作，但是在看了Babel之后，我觉得比Traceur有优势，特别是客户端不需要runtime.js，而且输出更加一致，不那么blo肿。

如果将来帮助某人，我粘贴在我使用的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（ （b）b 
 
 
 './bin/js'））
 .pipe（gp.livereload（{auto：true}））; 
 
}）; 
  

让我知道如果你有一个更好的方法。

I just have a simple question cant get in any place, heve been googling for it all morning. There is no much info about traceur and when there is is not so clear, at least to me.

How should be implemented the ES6 modules when im transpiling with traceur a single output file and using it in the browser with traceur-runtime? import and export keeps getting Unexpected token.

I am using gulp-traceur and tried already all the modules options //'commonjs' //'amd', 'commonjs', 'instantiate', 'inline', 'register'.

One doubt I have is that I keep finding answers about commonjs, but my idea of using ES6 modules is to have differents sources and then from the main import them and have all this result compiled in one single file (what i mean is that I dont need async loading of the modules in the browser)

Here is the gulp task

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

The unexpected token comes from app when importing

import Circle from './elements/circle';

or

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

(Tried several ways)

Also from circle.js when exporting

export default Circle; or export Circle; (also tried several ways)

解决方案

At the end I finished switching Traceur for Babel as adviced by @Jeff in his comment.

So my solution was to use Babel + Browserify + Gulp

I think the error I was getting is regarding the code is transpilled correctly but no client is able to manage modules yet so is needed something like require or commonjs to handle the modules, Themain doubt is here, because I would expect traceur to already transform the code to ES5 understandable code. But again, the lack of info doesnt point this clear (I was googling more than 6 hours)

I use a Browserify tool, babelify, that automatically translates the ES6 module syntax to browser understandable commonjs.

This made my day. Due to lack of info I took time to realize/guess that using Browserify with Traceur would work also, but after taking a look at Babel, I think has advantages over Traceur, specially no need of runtime.js on the client, and the output is more consistent and less bloated.

I paste below the gulp task I am using if it helps someone in the future:

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

});

Let me know if you have a better approach.

这篇关于在单一构建文件中使用带有traceur的ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！