CODEWITHSUNDEEP
typescriptionic-frameworkionic2
highwaychile
highwaychile

Reputation: 755

Ionic 2 + Typescript + Babel (for using async / await with ES5)

I'd like to use async/await in an ionic 2 project. As async/await for ES5 didn't make it for Typescript 2.0: Is there a way to configure an ionic 2 app in such a way that Typescript transpiles it to ES6 (i.e. async / await statements are not altered) which is then transformed by Babel to ES5, to make it work with brothers that don't support async/await?

Upvotes: 1

Views: 1525

Answers (1)

misha130
misha130

Reputation: 5736

RC UPDATE:

As of Ionic RC the old answer stopped working. There are a couple of ways to do this. Most of them involve hacking the build process in the node module. Simplest one is to switch uglifyjs to harmony version which supports es6.

node_modules/@ionic/app-scripts/package.json

This file contains the uglify js that ionic build uses.

Switch the uglify js version to :

"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony

After that run npm install on this folder and thats it

Ionic Beta Answer

Luckily for you the ionic gulp offers such services. What you need is babelify and ionic-gulp-browesify-typescript-babel First of all switch from typescript to typescript babel and add babelify in your package.json

this

"ionic-gulp-browserify-typescript": "2.0.0",

to this

"babelify": "7.3.0",
"ionic-gulp-browserify-typescript-babel": "^2.0.2",

Now go to your gulpfile.json

In here switch your module from

var buildBrowserify = require('ionic-gulp-browserify-typescript');

to

var buildBrowserify = require('ionic-gulp-browserify-typescript-babel');

Now you can run npm install. When you try to run the project you'll most likely get errors from babel that its lacking plugins and presets. Use npm to install them occurding to your needs. It will also ask your for es2015 presets that you should install. For more information on that you can look up at https://babeljs.io/docs/plugins/

Upvotes: 4

Related Questions