Creating Monaca Applications With ES6
To solve this problem, ECMAScript6 (ES6) brings a huge improvement over ES5, tackling many of the other core languages. As you may remember, we have already discussed how we can use ES6 using Babel in this blog post, today we will go deeper by creating a Monaca application with ES6.
Creating A Project
As always, we will first create a Monaca project. In this tutorial, we will simply use Hello World App. Once the project has been created, your folder directory should look like this.
Let’s install Gulp and some other libraries. To start, run the following command:
Next, we will install some required libraries:
npm install --save-dev gulp gulp-babel \
babel-preset-es2015 gulp-sourcemaps \
This is the list of plugins we are installing:
- gulp-babel : Gulp plugin for Babel
- babel-preset-es2015 : Babel preset for all es2015 plugins
- gulp-sourcemaps : ECMAScript6 Source map support for Gulp.js
Creating a Gulp tasks
Since we are focusing on ECMAScript6 in this tutorial, we will also be writing a Gulpfile in ES6. In order to that, we first need to include the following content in
package.json to enable es2015 preset.
Then, we need to instruct Gulp to use Babel by renaming the
gulpfile.babel.js. We are now able to use ES6 in our gulpfile!
As you can notice, we have used ES6 import and arrow functions.
Let’s play around with the new ES6 syntax. Here is our code snippet with arrow functions, classes, and template strings in
all.js will be generated under
The file is now ready to be loaded into our application:
We’ve also included Source Maps into our project in order to have the possibility to add breakpoints for debugging.
The newest version of ECMAScript delivers a simpler and friendlier syntax while Babel allows us to write ES6+ features ready to work across different browsers on the client side. It is certainly a great tool and will for sure help you to speed up your development while working with Monaca applications with local tools like Monaca Localkit and CLI.