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.

Reading More

An Overview of Monorepo

Monorepo is not new, Google and Facebook have been using it for years. So why now? I believe it depends a lot on the maturity of building systems

Become a Fullstack JavaScript Developer, Part 7: The Mobile

An overview look at current mobile development landscape including 4 major platforms

Long-standing CSS Methodologies

The industry darling BEM, the rebellious maverick Atomic CSS, and other incompetent solutions

Client-Side Rendering (CSR)

CSR strategy has very good developer experience but the impact on SEO and user experience still concerned