Javascript Build tools (What and Why)

If you are using ES6 you should use one of the build tools to make your code browser supported, in this article we are going to cover babel, gulp, and webpack.

ES6 is mostly supported by modern browsers, so as you can see in the below image the compatibility table, the green color means that the feature is supported, But you may face some users are still using for example IE11, or unsupported browser or version.

1. Babel

Babel is a JavaScript compiler that takes your ES6 code transform it into ES5. So, to use babel , you should first install node js, by following the steps in the link: https://babeljs.io/setup#installation

You should be able to convert your code from this:

Into this:?( for example you can see here that the “const” is converted to “var”)

2. Gulp

Gulp is a task runner that can be use to automate actions essentially, So we are going to use gulp to automate the code transformation from ES6 to ES5

Gulp is not only for JavaScript, you can use it for different tasks for example for your css files or html files

To setup Gulp into your project please follow the steps in this link https://gulpjs.com/ , Here is an example of a gulp task, that takes all the js files that are under the “src” folder, And transform the code into ES5 in a new js file under “dist” folder

3. Webpack

Webpack is a powerful tool, and it describes itself as a module bundle , so it’s all about taking in something and giving out something,

We are giving it a javascript file we are going to do some processing about that file and then we are going to tell where to put that file after its done processing , so to get started and set up your project please follow the steps in this link https://webpack.js.org/concepts/

As you can see in the below screenshot , the entry here is the path of the js file that we need to transform “app.js” under the “src” folder , and the output file is going to be under the “public” folder , and we have the loader “module” to list our rules or conditions , for example to check if the file is “.js” (identifies which file or files should be transformed) and we want for sure to exclude "node_modules" files, the “use” property indicates which loader should be used to do the transforming

There are a lot of features you can use with webpack, Gulp, and babel, to read more, please check https://babeljs.io/ , https://gulpjs.com/ , and https://webpack.js.org/