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

However, some of these tools work better than others, and this article will introduce seven of them.

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

The following will overview 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, ES or ESM modules, refer to the official JavaScript modules. Although not technically a tool, JavaScript 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 JavaScript modules.

The list shows the general syntax of ESM. The first line describes the syntax for importing a default export, and the second line specifies 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 included JavaScript scripts 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; 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 request all the modules for a program leads to poor program performance and late response. Packaging, scaling, and intelligent code / CSS splitting are crucial 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 assess the esbuild speed accurately, 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. In addition, it provides a JavaScript API so that you can create build commands if your needs for using the command line are too complex and variable.

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 being developed. Other tools can use esbuild for their bundled capabilities.

As of May 2021, build 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 its good performance, developers will consider it in the future.

Require ('esbuild'). Build ({entryPoints: ['app.jsx'], bundle: true, outfile: 'out.js',}). catch (() => process.exit (1))

Build 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, builds support for common types such as TypeScript, JSX, and JSON.

Parcel

We have done little if we do not examine Parcelich, which is conceptually similar to Parcelo Webpack and Rollup. The tool claims to improve performance by reducing slag settings, although from this perspective, it can not perform better than build.

The parcParcelludes a code configuration without coParcelation and replaces the HMR module. It also supports different types of files (such as images) by default and can handle them without additional configuration.

The Parcel has nParcel38,000 stars on GitHub and has been Parcelnloaded over 64,000 times weekly 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.

This structure saves disk space and improves performance. Statistics show that PPM performs better than packet management tools. PPM contains pnpx, an NPM-like tool for executing packages. PPM has 11,000 stars in gateways and is downloaded 191,000 times a week via NPM. PPM 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 above package supports the various syntax combinations used in the programming world (CJS, AMD, UMD, EMS, etc.), so you do not have any particular problems in this regard.

In addition, Rollup offers tree shaking, which can analyze the code base and prevent 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 give you an experience of future JS development where everything is integrated into the ESM. It is practically similar to Webpack, but unlike Webpac, it supports Node.js output.

In addition, some developers have reported a more straightforward and smoother experience with Rollup, which has an active community and a well-developed plugin system.

As of May 2021, it has received 20,000 stars on GitHub and is downloaded 4.8 million times weekly 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 of it in the future. Vite is not a software package, and in turn, it delegates the task of building packaging to Rollup.

Vite is designed to be fast. Developers who have used Vite believe that its features are faster than Webpack. Vite’s speed improvement is due to the use of ESM and build 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 offer during changes.

Vite is currently used for production work (to get features like CSS splitting) but may switch to esab. Vite has nearly 27,000 stars on GitHub and is downloaded 124,000 times weekly via NPM.

Snowpack

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

The snowpack is structurally similar to Rollup and Parcel. It 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 room for improvement. New tools are certainly delivering better performance and a more efficient development experience, considering emerging perspectives.

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