In this blog, I will be sharing how to transpile ES6 (ES2015) to ES5 code using GULP.
Steps to transpile ES6 (ES2015) to ES5 code using GULP.
Babel is the go-to transpiler for ES6.
Download and install Node.JS on your system from https://nodejs.org.
1. Create a project folder and navigate there in the terminal (cmd.exe).
2. To start, we need to generate a package.json file, use
npm init
This will ask for a few properties: What is the name of your project, version, description, and entry point (it sets the main file of your project)? Leave it as index.js.
After all options are selected, a "package.json" file will be created with all properties. The package.json file can be edited to update the property’s value set above.
3. Now install the dependencies for the Babel package.
Babel
We need the Babel core, CLI, and ES2015 presets..
Babel-CLI: used to compile files from the command line.
Babe-Core: is a library that gives the ability to use the new functionalities of ES6 for ES5
ES2015 preset: ensures the ability to transpile ES6
npm install --save-dev babel-cli babel-core babel-preset-es2015
After running the above command, you will see a few new changes in your project directory. First, you will notice that there is now a "node_modules" folder, and second, there is a new entry inside your "package.json" file.
The --save-dev flag will save the modules babel-cli, babel-core, and babel-preset-es2015 in your package.json file under the devDependencies section. This section is used for modules that will be used in development, meaning they are not needed in production. If we had run our install with --save instead, it would have put the module under the dependencies section.
4. Project structure
|-- dist // Build will end up here
|-- src // All source code should be inside this folder
|-- index.js
|-- gulpfile.js
|-- package.json
5. Configuration
Babel
Configure Babel to use the ES2015 plugin in your package.json (or .babelrc if you prefer).
"babel": {
"presets": ["es2015"]
}
The first method of transpiling we will look at is using NPM to run Babel. In the "package.json" file, there is a section called "scripts," where we can define commands we would like to run. Using the Babel CLI, we can set up a script to compile our code and output it where we would like. The scripts section takes a JSON object as a value. The keys in this object will be the name of our script, and the value will be the command to run.
"scripts": {
"buildjs": "babel ./src/index.js --out-file ./dist/index.js"
}
Adding the above to our package.json in the scripts section will take code from src/index.js, run it through Babel, and output the file in dist/index.js. The Babel command has many options that we will look at later, but the --out-file flag is used to determine the destination of the compiled source.
Add some code to the src/index.js file and type npm run buildjs into your terminal so you get the output in dist/index.js.
Now, when we run the script, it will output the file and stop. If you want to keep working on the file, we need to run this repeatedly. We can configure the script to watch over the files and run when they change!
"scripts": {
"buildjs": "babel ./src/index.js --watch --out-file ./dist/index.js"
}
By adding the --watch flag, we are telling Babel to listen for any changes in the "src/app.js" file, and when changes are made, we want to output a transpiled version of that code to "dist/app.js".
6. Gulp is an NPM module and a task runner that helps to automate. We need to install Gulp globally on the system, so we install it.
npm install -g gulp
Now install the dependencies for the gulp package.
We need gulp and the Babel module for gulp.
npm install --save-dev gulp gulp-babel
After running the above, you will see a few new changes again in your project directory in the "node_modules" folder, and second, that there is a new entry inside your "package.json" file.
7. Configuration
Gulp
Create a new file called "gulpfile.js" and require the two gulp libs:
const gulp = require('gulp');
const babel = require('gulp-babel');
The require function will pull in any modules from the ‘node_modules’ folder. The code in gulpfile.js can be written in ES6 or ES5 both will work.
Gulp is all about tasks. We will start by defining some simple tasks in this file.
I have created the task "default". You can provide any task name, with the exception of default. This task JS will pick up the JS files from /src folder, compile them with Babel, and save everything in /dist folder.
To run this default task
The ES6 code will be compiled into JavaScript. Here, the command ran only once, and for every change, the command needs to be executed every time.
Let us set up the ability for Gulp to keep watching our files. The gulp.watch method takes a few arguments: a file path that waits for file changes and an array of the task(s) you want to run.
To run task
This will listen for all the file changes and compile them to ES5 code.
🚀 "Happy Coding" 🚀
