You could transpile on-the-fly using Babel.js but it would destroy the user experience of your website. You could also do it manually every time before you check-in your code into source control but then you’d need to deal with merge conflicts on every commit.
A better approach is to automate the ES6 to ES5 conversion with a gulp task so that you can share it with your team and avoid the annoying merge conflicts. Additionally, your continuous integration and delivery servers could use that same gulp task, so it’s a win-win scenario.
So let’s see how you can get started using ES6 with the help of Babel and Gulp.
What is Babel?
Babel is designed as a plugin system so that you can select which features you want to enable for your project. This means that if you want to be conservative you can enable only the features that are part of the ES specification today.
A Quick recap of the Previous Article
If you haven’t read the previous article on these series or can’t remember it then you might want to check it out since this blog post builds on top of it:
Using Gulp and Babel to Transpile ES6
The easiest way to enable ES6 in your project with gulp is by taking advantage of the
gulp-babel plugin. You can install it via npm (if you don’t have node and npm in your dev environmen check this article that tells you how to do it):
Note how in addition to
gulp-babel we install the
babel-preset-es2015 that configures babel to enable the use of all features within the ES6/ES2015 specification.
Once installed you can create a new task to handle the transpilation, we’ll call it
js. Let’s add it to our
1 2 3 4 5 6 7 8
And now you can run the
js task by using
app/js/more-codes.js files that we used in the previous article on the series and that you can find on GitHub:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
gulp js we can see how ES6 syntax and keywords have been transpiled to ES5 in
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
The browser doesn’t understand CommonJS modules, in fact, it doesn’t understand any modules at all, that’s why we need to fallback to custom implementations that can take many different forms: IIFEs, AMD libraries like require.js, browserify, webpack, system.js, etc.
So! We want to run ES6 in the browser and therefore we need to pick one of these options. In this article we are going to take advantage of system.js, the universal dynamic module loader, that has a much narrower application than tools like browserify and webpack. It only focuses of loading modules (ES6, CommonJs, etc) and requires an easier setup (so it let’s me introduce less new concepts and make this article simpler). We need to do a couple of things:
- Install a ES6 polyfill because system.js requires ES6 promises and generators. We would’ve need to do this anyhow because we ourselves want to be able to use these ES6 features as well. But didn’t Babel do that for me? You may be wondering right now? Well, Babel transpiles new ES6 syntax into ES5 valid code, but additional methods like
Object.assign, new types like
- Install system.js and add a configuration for it
We can install all of these requirements with
In this case
babel-polyfill are going to be real dependencies and not development dependencies of our app as they will be part of our application in the browser. We will also create a task to copy the necessary third-party libraries to our
build folder when we generate the app:
1 2 3 4 5 6 7
And update our
build task to contain the ES6 to ES5 transpilation and the copying of the third party libraries. If you remember from the previous article the
build task used to look like this:
1 2 3 4 5
Now it will look like this:
1 2 3 4 5
['js', 'libs'] array after the task definition. It means that this particular task
build depends on two other tasks
libs. These means that when we run
libs tasks will be run in parallel. Once completed, the content of the
build task itself will be executed (in this case copying html and css files to the
In order to be able to test that
system.js can load our ES6 modules let’s create an
index.html in our root
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
This file references the required libraries
system.js and adds some configuration so that the module loader understand where to start loading ES6 modules (in this case
We still need some sort of web server to test that everything is working. There’s yet another great plugin called
gulp-webserver that can help with that:
And we can create a
serve task to spawn a web server, open the browser and be able to test our app:
1 2 3 4
If you run the
gulp serve task, it will trigger a build, host your app and open the browser so you can see… well nothing. The only thing our script does is output something in the console. If you open the developer console you should be able to see:
If we add the following lines at the end of
1 2 3
gulp serve again you’ll be able to see the fruits of your victory!.
So this article has become faaaar longer than I had envisioned in the first place. I hereby declare that I am cutting it in 2 parts!
Today you’ve learned how to start using ES6 in your project by taking advantage of babel and gulp. You’ve learned that:
- Babel.js is a tool that let’s you transpile ES6 code into ES5 code that can run in browsers
gulp-babelplugin let’s you integrate babel in your gulp front-end pipeline
- You can use the 2015 preset to get a basic configuration to enable all ES5 features
- By default babel will produce CommonJS modules that can’t run in the browser
- You can use the
system.jsmodule loader to load ES6 modules in the browser
- In addition to transpiling your code you need to add the babel
polyfill.jsthat contains ES6 polyfills (like
gulp-webserverplugin is super useful to quickly create a web server and serve static files
In the next part of this article you’ll learn about source maps, adding watch tasks so that your ES6 is re-transpiled whenever you change some files, live reloading and enabling ES6/ES2015 in your favorite editor.
Want to Learn More About Gulp?
In the upcoming weeks I am going to be adding small elements to the build pipeline but if you can’t get enough of gulp here are some other interesting resources:
- The official gulp.js site
- Tons of Gulp.js recipes
- Great Gulp.js course with John Papa at Pluralsight
- Build a Front-End Build Pipeline From a C# Developer Perspective by the mighty Chris Klug
- Setting Up Continuous Deployment of an ASP.NET App with Gulp from VSTS to an Azure Web App using Scripted Build Definitions
More Articles in These Series
- Object Oriented Programming
- White Tower Summoning Enhanced: The Marvels of ES6 Classes
- Black Tower Summoning: Object Composition with Mixins
- Data Structures
- Functional Programming
- And more stuff to be shaped out:
- Asynchronous Programming