Learning Babel and Webpack

Learning Babel & Webpack

In my last post I learned a lot of new features introduced into JavaScript with ES6. It is quite clear that Javascript is moving forward in leaps and bounds and new recommendations are made consistently to make the language even better. At the time of writing this, all features of ES6 (ECMAScript 2015) seems to be supported by most modern browsers. However, specs for ECMAScript 2016 and 2017 have also been released and its full implementation is underway by all browsers. This might take sometime to complete and some browsers will start support soon while others may lag in implementation. So how do we write scripts in ES6 or ES7 and still be confident that it will run consistently in all browsers out there. This is where Babel steps in.

Babel is a compiler/polyfill for Javascript. In simple terms it takes ES6/ES7 code that you write and if your rendering browser does not support it yet, it will compile the code into an earlier version of JS which your browser can understand. In short, your code will not break or behave in a weird manner. Sounds great right? This reminds me of the heartbreaking challenges that I used to face in my early days as a programmer supporting code in IE, Mozilla etc. Cross-browser compatibility was a much bigger problem 10 years ago.

So how do I use Babel? It’s quite simple actually.

 

Here is an example of code that I write in ES6 to use the .map() function.

Here is how I use Babel to compile it for me dynamically.

Just two changes made:

  1. Including Babel Core library from a CDN link
  2. Changed the type attribute of my custom script from “text/javascript” to “text/babel

That’s it. Babel will read the “text/babel” tag at runtime and compile the enclosed into a version that will work in every browser. Really neat stuff.

While the above method is simple, it might affect my rendering time since all the code is dynamically compiled at runtime by Babel. It might not be very efficient if my code runs into hundreds of lines. There is of course a better way to do this.

Webpack is a build tool available with NPM that helps us bundle multiple files into a single one. So you can use it to bundle say multiple .JS files or .CSS or SAAS files. This helps optimise our web applications since the browser would only make a single HTTP request to download the .JS file instead of multiple requests. Webpack has a lot of configuration options which I haven’t studied much yet. For the moment I will only use it to compile ES6 with Babel.

In order to use Webpack we need to have NodeJS and NPM installed. You can visit the NodeJS site to find specific instructions based on your OS.

Once installed you should be able to check their versions from the command line using the following commands:

I have created a new directory ‘nodejs’ within my Documents folder which we will use to test out and play around with Webpack. Within your this new directory I have issued “npm init” command which will create a package.json file which stores all configuration related to a NodeJS project. It will prompt you for a few tags for which you can provide any value that you wish. It’s really not that important since all of this can be changed later.

To install Webpack & Babel issue the following commands:

Post installation of the above modules, I need to create a ‘webpack.config.js‘ file at the root directory of my project. It looks as follows:

  • entry: The first file to look for in my project while bundling with webpack.
  • output: Where should the transpiled file be saved to?
  • module: We specify which modules we need to load in our project.
    • ‘test’ specifies which files should be loaded, so I have specified all files with .js extension.
    • ‘loader’ specifies that I would like to use the babel-loader
    • ‘exclude’ specifies that I do not want Webpack to look within the node_modules directory. So it is excluded during the bundling process.

That’s about it. I have installed and configured babel and webpack in my node project. So if i create an index.js file with ES6 contents as follows:

And then, if I go to my command line and issue the command ‘webpack’ it will compile index.js and bundle it into an output file named ‘bundle.js’

So I can see that a new file bundle.js is created by webpack. I can go ahead and include bundle.js in any of my projects instead of index.js and it should work even if the browser does not support ES6. Awesome!

 

Leave a Reply