Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
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.

How to use #ECMAScript 6 features in #Ionic framework?http://t.co/kyur9xI2Dy pic.twitter.com/e2JCzStBKF

— Nikola Brežnjak (@HitmanHR) September 29, 2015

Recent posts

  • Discipline is also a talent
  • Play for the fun of it
  • The importance of failing
  • A fresh start
  • Perseverance

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (35)
  • Daily Thoughts (77)
  • Go (3)
  • iOS (5)
  • JavaScript (127)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (2)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (77)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (40)
  • Servers (8)
    • Heroku (1)
    • Linux (3)
  • Stack Overflow (81)
  • Unity3D (9)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak