{"id":2235,"date":"2015-09-29T06:11:26","date_gmt":"2015-09-29T06:11:26","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2235"},"modified":"2015-09-29T06:14:23","modified_gmt":"2015-09-29T06:14:23","slug":"how-to-use-ecmascript-6-features-in-ionic-framework","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/how-to-use-ecmascript-6-features-in-ionic-framework\/","title":{"rendered":"How to use ECMAScript 6 features in Ionic framework?"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

As you may know, I’m really into Ionic framework lately\u00a0and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top 5 All time answerers.<\/p>\n

I answered\u00a0this question<\/a>\u00a0by user user5148540<\/a>:<\/p>\n

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<\/code>, class<\/code> and const<\/code>.<\/p>\n

I’m using also the crosswalk plugin in case this is relevant.<\/p>\n

Can anyone tell me if I should avoid ES6 for the moment or if its okay to be used?<\/p>\n

My answer<\/a> was:<\/p>\n

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

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.<\/em><\/p>\n

Ionic uses Gulp, so install gulp-babel and gulp-plumber.<\/p>\n

npm install --save-dev gulp-babel gulp-plumber<\/pre>\n
Add babel to gulpfile.js<\/code> like so:<\/p>\n
\/\/...\r\nvar babel = require(\"gulp-babel\");\r\nvar plumber = require(\"gulp-plumber\");\r\n\r\nvar paths = {\r\n  es6: ['.\/src\/es6\/*.js'],\r\n  sass: ['.\/scss\/**\/*.scss']\r\n};\r\n\r\ngulp.task('default', ['babel', 'sass']);\r\n\r\ngulp.task(\"babel\", function () {\r\n  return gulp.src(paths.es6)\r\n    .pipe(plumber())\r\n    .pipe(babel())\r\n    .pipe(gulp.dest(\"www\/js\"));\r\n});\r\n\r\n\/\/...\r\n\r\ngulp.task('watch', function() {\r\n  gulp.watch(paths.es6, ['babel']);\r\n  gulp.watch(paths.sass, ['sass']);\r\n});\r\n\/\/...<\/pre>\n
Edit ionic.project<\/code>:<\/p>\n
\"gulpStartupTasks\": [\r\n    \"babel\",\r\n    \"sass\",\r\n    \"watch\"\r\n ],<\/pre>\n
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.<\/p><\/blockquote>\n
\n
How to use #ECMAScript<\/a> 6 features in #Ionic<\/a> framework?http:\/\/t.co\/kyur9xI2Dy<\/a> pic.twitter.com\/e2JCzStBKF<\/a><\/p>\n
— Nikola Bre\u017enjak (@HitmanHR) September 29, 2015<\/a><\/p><\/blockquote>\n