A new generation of dependency management tools, builders, and bundlers have made the process of developing JavaScript applications easier, easier and faster.

However, some of these tools work better than others, and in this article, we will get acquainted with seven of them.

It seems that every year the position of JavaScript is getting stronger than before, and the year 2021 is the same. In particular, the new generation of software packages, bundlers, and build tools have made the process of building JavaScript applications easier than ever before, improving development speeds and generating higher quality code.

In the following, we will have an overview of the latest and most stable JavaScript development tools. Tools like ESM, esbuild, Parcel, pnpm, Rollup, Snowpack, and Vite are the new stars that make JS development easier.

ECMAScript modules

ECMAScript modules, also known as ES or ESM modules, refer to the official JavaScript modules. It is not technically a tool, but it has broad implications for JS development and tools. For a relatively short period of time, we have seen a lot of confusion and uncertainty about the use of the JavaScript module…

In the list, you will see a general syntax of ESM. In the first line, you will see the syntax for importing a default export. The second line is used to specify specific members within the module.

import a module from ‘module-name;
import {moduleMember, anotherMember} from ‘module-name;

Even Microsoft Edge now supports ESM, so all major browsers now support it.

Browsers can use modules in two ways, first through the JavaScript scripts that are included or by using the module tag script directly, as you can see in Table 2.

<script type = “module” src = ” https://unpkg.com/browse/react @ 17.0.1 /”>

</script>

<script type = “module”> import React from ‘react’; </script>

<script type = “module” src = “../ my-module.js”> </script>

The first two script tags in the list above show how to target an absolute URL.

In the first example, you use the src attribute and in the second you run JavaScript import.

The third script tag indicates the relative import provided by the same domain. Note that CORS restrictions apply when you receive a script from another domain.

For many years, a variety of software packages (commonly used by Webpack today) have been used to combine script packages to configure the browser with modules.

However, widespread browser support for ESM has changed and new tools have been developed to provide more accurate support.

However, packing still has a special place, because allowing browsers to simply request all the modules for a program leads to poor program performance and late response. Packaging, scaling, intelligent code / CSS splitting are still important for good performance.

Esbuild

esbuild is a relative newcomer to the field of bundlers. Like similar examples, it claims speed. Esbuild is written in Go language and has the opposite function of JavaScript, taking advantage of the pre-built benefits of the Go language.

In addition, it relies on the intelligent use of shared memory when parsing and generating code.

To be able to accurately assess the esbuild speed, we suggest using project benchmarks. Statistics show that it performs 100 times better than other bundlers in terms of performance.

By default, it is available to developers in a browser-packaged form, although it is possible to package Node.js.

By connecting to NPM via package.json and node_modules, it can take advantage of other development tools used. In addition, it provides a JavaScript API so that if your needs for using the command line were too complex and variable, you would be able to create build commands.

List 3 shows examples of the use of these application programming interfaces.

esbuild focuses on packaging and does not include a dev mode server. Some features, such as code sharing / CSS, are still in development. Other tools can use esbuild for their bundled capabilities.

As of May 2021, esbuild has received over 25,000 stars at the gates and 570,000 NPM downloads. These statistics show that the use of esbuild is increasing and because of the good performance it provides, it will be considered by developers in the future.

require (‘esbuild’). build ({entryPoints: [‘app.jsx’], bundle: true, outfile: ‘out.js’,}). catch (() => process.exit (1))

esbuild provides a complete package for developers that includes program code and all dependencies. Various plugins are available to do everything from Svelte to PostCSS and YAML. In addition, esbuild supports common types such as TypeScript, JSX, and JSON.

Parcel

If we do not examine the parcel, which is conceptually similar to Webpack and Rollup, we have done little. In addition to reducing slag settings, the tool claims to improve performance, although from this perspective it can not perform better than esbuild.

The parcel includes code configuration without configuration and replaces the HMR module. In addition, it supports different types of files (such as images) by default and can handle them without additional configuration.

The parcel has nearly 38,000 stars on GitHub and is downloaded over 64,000 times a week via NPM. These statistics show that the above tool is in the upper-middle level from the developers’ point of view.

pnpm

pnpm is not a software package or a bundle. Instead, it is an alternative to the NPM dependency tool. It’s very similar to Yarn, but pnpm uses a different pattern, using hard links associated with the node_module tree, thus simplifying dependency management and preventing duplicate dependencies.

In addition to saving disk space, this structure also improves some performance. Statistics show that pnpm performs better than packet management tools. pnpm contains pnpx, a npx-like tool for executing packages. pnpm has 11,000 stars in gateways and is downloaded 191,000 times a week via NPM. pnpm is the default package manager for SvelteKit.

Pnpm seems to be the next major competitor to dependency management tools.

Rolup

Rollup is a software package that allows you to use the syntax of ESM everywhere. The various syntax combinations used in the programming world (CJS, AMD, UMD, EMS, etc.) are supported by the above package so that you do not have any particular problem in this regard.

In addition, Rollup offers tree shaking, which has the ability to analyze the code base and prevents unnecessary imports, which is why it improves performance. Like esbuild and other bundles, Rollup connects to package.json and node_modules via NPM. When using Rollup you can forget the syntax of the module and use only ESM.

Overall, Rollup aims to bring you the experience of future JS development where everything is integrated into the ESM. Rollup is practically similar to Webpack, but unlike Webpack it supports Node.js output.

In addition, some developers have reported a simpler and smoother experience with Rollup. Rollup has an active community and a well-developed plug-in ecosystem.

As of May 2021, it has received 20,000 stars on GitHub and is downloaded 4.8 million times a week via NPM.

Years

Vite was originally a Vue proprietary build tool, but now supports general applications and provides a public solution for SvelteKit, so we expect to see more and more of it in the future. Vite is not a software package and in turn delegates the task of building packaging to Rollup.

The Vite is designed to be fast. Developers who have used Vite believe that the features provided by Vite are faster than Webpack. Vite speed improvement is due to the use of ESM and the use of esbuild for pre-packing.

Using ESM means that Vite can delegate the packing task to the browser when packing, and provide developers with more details when determining which files to provide during changes.

Vite is currently using Rollup for production work (to get features like CSS splitting) but may switch to esab in the future. Vite has nearly 27,000 stars on GitHub and is downloaded 124,000 times a week via NPM.

Snowpack

Snowpack is another bundle and dev server that focuses on speed. Its server is fast-paced and relies on fast smart memory to support ESM, requires minimal configuration, and supports a variety of file types.

Snowpack is structurally similar to Rollup and Parcel. The snowpack has 18,000 stars on GitHub and is downloaded 77,000 times a week via NPM.

The future of JS tools

Webpack is a real and extraordinary standard, but there is still room for improvement. New tools are certainly delivering better performance and a more efficient development experience, taking into account emerging perspectives.

JavaScript will be widely used for development in an exciting and rapidly evolving world, so life will continue to be good for JavaScript developers.