- BabelJs Tutorial
- BabelJs - Home
- BabelJs - Overview
- BabelJs - Environment Setup
- BabelJs - CLI
- BabelJs - ES6 Code Execution
- BabelJs - Project setup using Babel 6
- BabelJs - Project Setup Using Babel 7
- Transpile ES6 features to ES5
- Transpile ES6 Modules to ES5
- Transpile ES7 features to ES5
- Transpile ES8 features to ES5
- BabelJs - Babel Plugins
- BabelJs - Babel Polyfill
- BabelJs - Babel CLI
- BabelJs - Babel Presets
- Working with Babel and Webpack
- Working with Babel and JSX
- Working with Babel and Flow
- Working with BabelJS and Gulp
- BabelJs - Examples
- BabelJs Useful Resources
- BabelJs - Quick Guide
- BabelJs - Useful Resources
- BabelJs - Discussion
BabelJS - Working with BabelJS and Gulp
In this chapter, we will create project setup using babel and gulp. Gulp is a task runner that uses Node.js as a platform. Gulp will run the tasks that will transpile JavaScript files from es6 to es5 and once done will start the server to test the changes. We have used babel 6 in the project setup. In case you want to switch to babel 7, install the required packages of babel using @babel/babel-package-name.
We will create the project first using npm commands and install the required packages to start with.
command
npm init
We have created a folder called gulpbabel. Further, we will install gulp and other required dependencies.
command
npm install gulp --save-dev npm install gulp-babel --save-dev npm install gulp-connect --save-dev npm install babel-preset-env --save-dev npm install babel-core --save-dev
We will add the Preset environment details to .babelrc file as follows
gulpfile.js
var gulp =require('gulp'); var babel =require('gulp-babel'); var connect = require("gulp-connect"); gulp.task('build', () => { gulp.src('src/./*.js') .pipe(babel()) .pipe(gulp.dest('./dev')) }); gulp.task('watch', () => { gulp.watch('./*.js', ['build']); }); gulp.task("connect", function () { connect.server({ root: ".", livereload: true }); }); gulp.task('start', ['build', 'watch', 'connect']);
We have created three task in gulp, [‘build’,’watch’,’connect’]. All the js files available in src folder will be converted to es5 using babel as follows −
gulp.task('build', () => { gulp.src('src/./*.js') .pipe(babel()) .pipe(gulp.dest('./dev')) });
The final changes are stored in the dev folder. Babel uses presets details from .babelrc. In case you want to change to some other preset, you can change the details in .babelrc file.
Now will create a .js file in src folder using es6 javascript and run gulp start command to execute the changes.
src/main.js
class Person { constructor(fname, lname, age, address) { this.fname = fname; this.lname = lname; this.age = age; this.address = address; } get fullname() { return this.fname +"-"+this.lname; } }
Command: gulp start
dev/main.js
This is transpiled using babel −
"use strict"; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i <props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Person = function () { function Person(fname, lname, age, address) { _classCallCheck(this, Person); this.fname = fname; this.lname = lname; this.age = age; this.address = address; } _createClass(Person, [{ key: "fullname", get: function get() { return this.fname + "-" + this.lname; } }]); return Person; }();
Index.html
This is done using transpiled dev/main.js −
<html> <head></head> <body> <script type="text/javascript" src="dev/main.js"></script> <h1 id="displayname"></h1> <script type="text/javascript"> var a = new Student("Siya", "Kapoor", "15", "Mumbai"); var studentdet = a.fullname; document.getElementById("displayname").innerHTML = studentdet; </script> </body> </html>
Output