Using ES6 modules with tracing in a single assembly file
I just have a simple question that could be anywhere, it went on searching the internet all the time. There is a lot of information about the tracer, and when there is not so clear, at least to me.
How should ES6 modules be injected when im transpiling with a trace of one output file and using it in a browser with traceur-runtime? imports and exports continue to receive Unexpected Token.
I am using gulp-traceur and have tried all module options // 'commonjs' // 'amd', 'commonjs', 'instantiate', 'inline', 'register' already.
I have a doubt that I keep finding answers to commonjs questions, but my idea of using ES6 modules is to have different sources and then from the main import and get all this result compiled into one file (which I I mean I don't need to load modules asynchronously 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 }));
});
Unexpected token comes from app on import
import Circle from './elements/circle';
or
import * as Circle from './elements/circle.js';
(Tried several ways)
Also from circle.js on export
export default Circle;
or export Circle;
(also tried several ways)
source to share
In the end, I ended up switching Traceur for Babel as @Jeff advised in his comment.
So I decided to use Babel + Browserify + Gulp
I think the error I was getting was because the code is translating correctly, but none of the clients can manage the modules, so something like require or commonjs is required to handle the modules. Themain questioned here, because I would expect the traceur to be already converting the code to understandable ES5 code. But again, the lack of information does not indicate this clearly (I have been googling for over 6 hours)
I use Browserify's tool, babelify, which automatically translates ES6 module syntax to understandable browsers.
This made my day. Due to the lack of information, I figured that using Browserify with Traceur would work too, but looking at Babel I think it has advantages over Traceur, especially not needing runtime.js on the client and the output is more consistent and less bloated.
Paste below the gulp task I am using in case 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.
source to share
In fact, it is possible to load ES6 modules directly into the browser.
1) Download transpiler libs
<!-- transpiler -->
<script type="text/javascript" src="lib/traceur.js"></script>
<script type="text/javascript" src="lib/es6-module-loader.js"></script>
2) import your coded modules, i used System.paths
here, however this is not necessary, you can import with direct relative path:
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;
});
Which leaves the core API and classes in the global namespace.
System.import()
is asynchronous, so the code will jump to the next line before the modules are loaded - the loading widget will do the trick I would have guessed at this point.
For a complete working example, see example-es6-modules.html .
I am using traceur at the moment only for historical reasons, which I am going to do, although there is so much technology left overall. as much as possible, so even though I used traceur, I try not to lock myself into using tracing - the project can easily switch to babel (tactically this is the basic principle). There are many good reasons for coding with babel though, and I am more or less sure that at some point I will switch for these reasons (and still happily broadcast when everyone else is back to normal coding with fully supported and new minted ES2015).
source to share