Configure Babel and Webpack for NPM (Node Package Manager) based project

 

What is NPM (Node Package Manager) ?

NPM (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager used in NodeJs.  It enables the path of accessing thousands of  reusable javascript libraries for your project.

NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.

 

NPM (Node Package Manager) and NodeJs Server

Here we are going to create a project that manage its dependencies with NPM.  Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs.  If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available,  it can be used as a development server to deploy the project files.

Babel and Webpack for compiling and bundling JavaScript ES6 (ES6/ ES7/ ES8)

In this article i am going to explain how to use the Babel compiler  for compiling the javascript from ES6(or higher ES version) to ES5 compliant version. In addition, the webpack will be used for  executing barbel compiler and bundling the multiple javascript dependencies into a single file.

The majority of the internet browsers are supported to run ES5 compliant JavaScript. Therefore if you develop your application with ES6 or any other latest ECMAScript version, you may need to compile or transform it into ES5 compliant version for running it in most of the available browsers.

 

What is Babel?

Babel is a JavaScript transpiler (or known as javascript compiler). Babel enables us to write modern JavaScript that will be “transpiled” to widely-supported ES5 JavaScript. We call this process as “transpiling”.

Want to know more about Babel? Click here 

What is babel-polyfill and why it is important?

 

babel-polyfill will emulate a full ES6 environment. For example, without the polyfill, the following code:

function allAdd() {
    return Array.from(arguments).map((a) => a + 2);
}

will be transpiled to:

function allAdd() {
    return Array.from(argument).map(function (a) {
        return a + 2;
    });
}

This code will not work everywhere, because Array.from in not supported by every browser:

Uncaught TypeError: Array.from is not a function

To solve this problem we need to use a polyfill. A polyfill is a piece of code, that replicate the native API that does not exist in the current runtime.

To include the Babel polyfill, we need to install it:

npm install babel-polyfill --save-dev

 

Use the babel-polyfill in your source code

To include the polyfill you need to require it at the top of the entry point to your application. in order to use babel-polyfill withj your applciation, you can use one of following three methods.

 

method 01

With require

require("babel-polyfill");

 

method 02

If you are using ES6’s import syntax in your application’s entry point, you should instead import the polyfill at the top of the entry point to ensure the polyfills are loaded first.

With ES6 import.

import "babel-polyfill";

 

method 03

With webpack.config.js, add babel-polyfill to your entry array:

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

Runtime compile ES6+ in NodeJs with babel-register

babel-register is a library or rather plugin that transpile the ES6+ based javascript source files into ES5 on runtime (on the fly).

babel-register is a require hook, that will bind node’s require method and automatically transpile the file on the fly. This is not meant for production! It’s considered as a bad practice to compile the code this way. It’s far better to compile the code before deploying.

However this works quite well for development purposes.

Let’s install babel-register first:

npm install babel-register --save-dev

 

Create a simple index.js file:

console.log('Hello World');

 

Now create a sample.js file and  require index.js and  babel-register:

require('babel-register');
require('index.js');

 

When you run the code using node sample.js you will see the output of index.js – “Hello World”.

node sample.js

 

Note: You can’t require (babel-register) in the same file that you want to compile, because Node is executing the file before Babel’s transpile.

 

Is it safe to use babel-register in production?

No. this can be used only for development purposes. If the babel-register is used in the production environment, there may be performance and latency related issues.  This is because, the source file will be transpiled on the fly and it may take considerable amount of time for the transpilation process. In order to avoid such issues, you have to use a compiled (or rather transpiled) javascript file for the production environment.