ECMAScript 6 - Sublime Text editor build system

The specification for ECMAScript 6 (aka ES6, ECMAScript harmony) is expected to be released in June 2015 and many tools, frameworks and browsers have started implementing the features of ES6. For example, Angular 2.0 and Aurelia allows us to write code in ES6 now. There are transpilers as well out there, which allows us to write code in ES6 and transpile them into ES5. I have come across two major transpilers traceur and babel, they are equally good.

I wanted to setup something like LinqPad for JavaScript to learn and practice ES6 without using browser to see the output.

The tools I used to achieve the desired setup are

  1. Sublime text - primary editor
  2. Nodejs - runs ES5
  3. Babel - ES6 to ES5 transpiler
  4. Gulp with gulp-babel and gulp-shell plugins - task runner

I took advantage of Sublime text build system by creating a new one for ES6 using gulp task. The gulp task will transpile the code from ES6 to ES5 and run it as a normal node program.

Let's start from the gulp task, here is the task I have created

// gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
var shell = require('gulp-shell');

gulp.task('run', function(){
	return gulp.src('app.js')
			.pipe(shell(['node result\\app.js']));

This task simple takes the source file named app.js and applies babel task to convert from ES6 to ES5, stores the output in result folder and finally runs the output file as a normal node program using grunt's shell plugin.

Here is the build system I created for ES6

  "cmd": ["gulp.cmd", "run"]

Note: If you are using Windows 8, you must use gulp.cmd rather than gulp.

The build script simply invokes gulp to run a task named run.

I have also installed this package to enable ES6 syntax highlight feature in Sublime text.

My file structure looks like this in the end

The code looks like this with syntax highlight feature

Finally, output looks like this when I use Ctrl+B to run the build

This setup is only recommended if you just want to play with ES6 like me. The grunt task uses hard coded files names and you need to use the same file name to get it working.

comments powered by Disqus