JavaScript build tools

Feb 22, 2020 • ☕️ 2 min read

Build tools are tools that can generate production build artifacts - libraries, binaries, applications - through an automated process including multiple steps like compiling, packaging, testing, linking, etc.

Historically build often referred either to the process of converting source code files into standalone executable programs that can be run on a computer. However, this is not the case with technologies such as Perl, Ruby, Python, or JavaScript which are examples of interpreted languages.

Examples of such native build tools are make, Gradle, Ant, Maven, Rake, or MSBuild. Make is the most famous general-purpose build tool, allows you to write separate tasks for various purposes. Even though Make is mostly used with C projects, it’s not tied to C in any way; you can use Make to build JavaScript projects as well.

Back to JavaScript tooling system, we need build tools that can generate artifacts like npm packages, websites, Node servers, React Native apps, Electron apps, etc. There are native build tools can do that alone, the build process is complicated that may involve other programs to handle non-JavaScript files and perform production optimizations.

With that definition in mind, JavaScript build tools refer to a collection of tools that involve in build process like:

  • Build systems (Buck, Bazel, Lerna etc.) — they help you manage multiple modules at the same time by orchestrating dependencies and incremental builds, keeping track of unchanged modules so that the minimal set of modules is rebuilt.
  • Task runners (Gulp, Grunt, etc.) — are task-oriented tools to automate repetitive mundane tasks, especially helpful in web development when dealing with multiple resource files.
  • Module bundlers (Webpack, Rollup, Parcel, Browserify, etc.) — are tools to bundle modern web applications when they are capable of bundling JavaScript and assets files into optimized bundles.

Above three categories are most close to so called build tools when you can use them alone to generate complete build artifacts like websites. There are also other tools involve in build process like JavaScript module loaders, file loaders, transpilers, or optimizers.

These tools could have started in one category and then expanding into multiple categories, the boundary is sometimes very blurred. Emerging technologies approach the problem from different angles, sometimes they build on top of other tools, and at times they can be used together.

Each has tried to solve a specific problem in its way, you can achieve similar results with different tools, but often it’s best to use them together to complement each other.

Related Posts

JavaScript code linters

Linters are tools that analyze source code to detect problems based on formatting rules and code quality rules then output as warnings or errors

Static Imports in JavaScript

Static declarations to import and export JavaScript modules

What is static rendering?

Static rendering is a strategy that eagerly generates a separate HTML file for each URL ahead of time at build time

Imposter syndrome self-diagnosis

People say Impostor Syndrome makes you feel like an intellectual fraud. Are you suffering from this phenomenon?