Why Use A Build Tool?

Firstly what the he*** is a build tool? A build tool is a software utility that helps automate the conversion of a code base into an efficient, compatible executable program to enable it to run in different environments such as (production, development etc.)

How Does Build Tool Work?

Just imagine working on a web project with Javascript ES6; it works quite well on your local client and does not work let's say your friend's client. It can be not so good right? That is where a build tool comes in especially if you are using a library like react (though react comes with a default build tool i.e . Webpack ) to speed things up. Below are key functions of a build you should know.

1. Transpiling: Build tools convert modern JavaScript into older versions of JavaScript for compatibility with older browsers. Let's say I am coding using TypeScript. The browser does not understand TypeScript build tools transpile it into JavaScript that can be understood by the browser.

2. Bundling: I work with React, and most projects have over 100 JavaScript files. Build tools help combine all these JavaScript, CSS and other files into fewer bundles. Build tools like Vite, scan through my dependencies and create a single or sometimes a few bundles of these files thus reducing the number of HTTP requests made by a client. Just Imagine how heavy hash node will be if all the files is being sent to your client.

3. Tree Shaking: Yeah, Tree Shaking. Sometimes they are unused code or should I say DEAD CODE in my project build tools analyze my code base, look for unused exports and exclude them before building for production.

4. Minification: I do have a lot of white spaces in my project. and you do too, of cause every code base has white spaces and comments. Build tools look through project files and strip out anything that is trivia to production. Example

   original - function SubscribeToMyNewsLetter() { return pending; } becomes function SubscribeToMyNewsLetter(){done}

5. Code Splitting: Build tools help optimise my web application projects by loading requested parts of the application to a user based on demand ( user interaction).

6. Environment Setup: If you are new to react, you will notice there are different commands you run based on what environment you are in. For example, pnpm run dev if you are in development. Build tools help configure these environments. If you are in development, hot reloading, source maps are activated for quicker debugging while in production code will be minified for efficiency.

7. HMR: Imagine the pain, the torture, the torment you would have to go through to refresh your client every time you make changes. Yeah, it can be not so good you know, build tools help track changes In my projects and inject updates in real time this way development is faster. By the way, HMR means Hot Module Replacement.

With these, you have a clearer understanding of the build tool and why you should use it in your next project if you are not using it already.

- Happy coding