Ionic, Stack Overflow

How to use ECMAScript 6 features in Ionic framework?

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top 5 All time answerers.

I answered this question by user user5148540:

I recently used the new Set data structure specification instead of an array where I didn’t wanted any repeated values to be stored and it is working without problems, but I’m wondering I want to implement some of the new features such as let, class and const.

I’m using also the crosswalk plugin in case this is relevant.

Can anyone tell me if I should avoid ES6 for the moment or if its okay to be used?

My answer was:

I actually googled about this myself earlier today and I found this tutorial:http://labs.encoded.io/2015/06/22/use-es6-with-ionic/

StackOverflow encourages to not just use links as answers, so I’m just going to give my TL;DR, since this is not my own site and I don’t want to be held accountable for c/p.

Ionic uses Gulp, so install gulp-babel and gulp-plumber.

npm install --save-dev gulp-babel gulp-plumber

Add babel to gulpfile.js like so:

//...
var babel = require("gulp-babel");
var plumber = require("gulp-plumber");

var paths = {
  es6: ['./src/es6/*.js'],
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['babel', 'sass']);

gulp.task("babel", function () {
  return gulp.src(paths.es6)
    .pipe(plumber())
    .pipe(babel())
    .pipe(gulp.dest("www/js"));
});

//...

gulp.task('watch', function() {
  gulp.watch(paths.es6, ['babel']);
  gulp.watch(paths.sass, ['sass']);
});
//...

Edit ionic.project:

"gulpStartupTasks": [
    "babel",
    "sass",
    "watch"
 ],

For any more details consult the original link – and with this I also say thanks to the author of that blog post as it helped me too.

Written by Nikola Brežnjak