2022 Overview of JavaScript Development Tools: Compilers, Bundlers, Package Managers, Libraries, and Web Frameworks

Compilers

Compilers transform input code into a target output format. The article focuses on JS and TS compilers that convert modern JavaScript/TypeScript to specific ECMAScript versions compatible with browsers and recent Node.js.

Traditional compilers such as tsc and babel are being challenged by next‑generation tools like swc and esbuild , which can speed up compilation by 10‑100×.

While swc and esbuild lack type‑checking, projects using TypeScript should still run tsc for type validation. The author notes that the author of swc is porting tsc to Go.

babel vs tsc

When both are present, use babel for code transformation and tsc for type checking and generating .d.ts files.

swc vs esbuild

Both are fast JS/TS compilers with comparable performance, and many large companies use them. The comparison often focuses on higher‑level tools that integrate them rather than the compilers themselves.

Tools built on swc include Vercel/Next.js, Deno’s linter/formatter/docs, Parcel, and nx.

Tools built on esbuild include Vite, Nuxt.js, Remix, SvelteKit, and tsup.

Bundlers

Bundlers combine source files into a single package, typically for third‑party libraries or web applications.

webpack and rollup are described as Swiss‑army‑knife bundlers with strong extensibility and rich plugin ecosystems, allowing any compiler (e.g., swc , esbuild ) to process TypeScript.

parcel offers zero‑configuration, high‑speed bundling but focuses on simplicity over extensibility, using swc internally.

Both swc and esbuild provide basic bundling capabilities, though they are not as feature‑complete as dedicated bundlers; more details can be found in tool.report .

Package Managers

Package managers handle NPM dependencies. The article notes that most modern managers have similar functionality, recommending pnpm as a rising alternative, while Yarn’s Plug’n’Play is useful mainly for large monorepos.

Third‑Party Library Development

Tools such as tsup , tsdx , microbundle , Vite , and nx can simplify building and publishing NPM packages in 2022. For TypeScript monorepos, the author suggests using tsc for type checking and d.ts generation, then tsup for compilation, citing react-notion-x as an example.

Web Application Development

High‑level frameworks hide implementation details and accelerate modern web app creation. Recommendations include:

Use Next.js for React web apps, with strong community support and deep Vercel integration.

Remix as an alternative to Next.js, developed by the same team as react‑router.

For Vue apps, choose Nuxt.js or Vite (Vite preferred in China).

Snowpack is no longer actively maintained; replace it with Vite .

Consider Parcel for lightweight bundling.

Conclusion

The ecosystem shows a near‑even split between using swc or esbuild as compilers and webpack or rollup as bundlers. Modern web development has rapidly evolved, and the article aims to guide future technology selection.

References

https://bundlers.tooling.report

https://transitivebullsh.it/javascript-dev-tools-in-2022

https://2021.stateofjs.com/en-US/libraries/

https://blog.logrocket.com/javascript-package-managers-compared

https://loveky.github.io/2019/02/11/yarn-pnp/