ionic-framework

How to use EcmaScript 6 features in Ionic?

By using gulp-babel and gulp-plumber

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"
 ],

Now when you run ionic serve, code will be transpiled for you.


This modified text is an extract of the original Stack Overflow Documentation created by the contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow