parcel VS Rollup

In the Node.js ecosystem, bundling is typically handled by third-party tools rather than Node.js itself. Some of the most popular bundlers in the Node.js world include Webpack, Rollup, and Parcel, offering features like code splitting, tree shaking, and hot module replacement.

There are projects attempting to do more things. I've really enjoyed Parcel (https://parceljs.org). But it won't handle things like linting or unit testing, which you may or may not want. Vite is also pretty popular (https://vitejs.dev/), and it has a test runner.

Thing is, most of the problems described in the post aren't related to low-JS front-end libraries like HTMX or alpine. You can write React without a linter, bundler, build tool, unit testing, or linting. But with any of these projects at scale, you start wanting more:

- If you want to write unit tests in JS, you need to choose a test runner (probably Jest or Vitest -- until the built-in node testing module becomes more common).

- If you want linting, you need a linter (probably Eslint). If you want type safety, you need a type checker (probably Typescript).

- If you want to create smaller JS files to ship to production and to automatically handle assets, you need a bundler.

- If you want to use new language features while supporting old browsers, you need polyfills.

- If you want to use all these things together, you need something to bring it together (like Webpack).

So it really depends what you need! You may not need any. But as you can imagine, in many professional projects with multiple developers it's very nice to have unit tests, linting, and type checking :) (And you start caring about end-user performance a lot more, in which case optimizing the shipped bundle is important.)

Take all that, and then compare to a language like Rust, which has most of the "ecosystem stuff" built-in. In Rust, you get the test runner, the linter, dependency manager, type checker, and documentation tool all included. Easy! Thankfully, Rust doesn't have to care about whether users support modern language features (because it compiles down to lower code ahead of time), or whether the binary shipped to the client is optimally organized for downloading immediately over the internet.

It's a problem in JS because A) you have to care about more problems than many other languages since JS needs to load instantly over the wire in a web browser, and B) there is a huge amount of choice and not a lot of standardization in web tools. (And what standardization there is (Node, npm), there are still competitors trying to even further reduce the pain points.)

I think that in ten more years, we'll be in a better place, because there is push back (like this post!) against these problems, which will encourage more tools trying to solve the explosion of tools. Which seems counterintuitive, but these tools were created to solve very real problems. So I see it as a pendulum which has swung too far, but will likely swing back to a more balanced place. And you see that with tools like Vite gaining popularity.

Bundling: Webpack, Parcel, Rollup

Parcel is another popular bundler you can use to bundle Node.js applications. Unlike Webpack, you do not need to write additional configurations with Parcel since it is a zero-configuration bundler. It is capable of automatically detecting and bundling project dependencies.

Parcel

I love https://parceljs.org/.

I've started to use parcel for all my projects: https://parceljs.org/

The simplest solution might be to use parcel https://parceljs.org/

> The zero configuration build tool for the web.

What about rolling your own? Most people that have only ever used CRA, Next.js, or similar tools will think that seems like a lot of work. In the past, it usually did require quite a bit of knowledge about webpack, so you aren't wrong. But tooling has come a long way, and tools like Parcel, NX, and Razzle have simplified the process. Even more recently, Vite has gained an ever-increasing market share.

Parcel is a popular zero configuration build tool for the web. Some of its popular features include -

In the Node.js ecosystem, bundling is typically handled by third-party tools rather than Node.js itself. Some of the most popular bundlers in the Node.js world include Webpack, Rollup, and Parcel, offering features like code splitting, tree shaking, and hot module replacement.

📦 Rollup for bundling

Bundling: Webpack, Parcel, Rollup

Rollup is another popular JavaScript module bundler focusing on high performance. It excels at tree-shaking and uses ES module syntax to generate more performant bundles than traditional module bundlers. In addition to JavaScript, Rollup supports bundling CSS and JSON as well. Rollup has more than 12 million weekly NPM downloads.

Vite (read as vit) is actually a combination of two great frontend tools - an immensely fast development server and a build command for shipping heavily optimized static assets using Rollup. Many developers have encountered the process of setting up a project using Create React App. While CRA can be useful for beginners due to its simplicity and abstraction of configuration, it has some drawbacks that outweigh its benefits, particularly its tendency to be bloated. Don't get me wrong, Vite is opinionated as well, but it's highly extensible through its Plugin API.

As we iterate on the definition, we are going to want a better developer experience for rebuilding the package on changes. Typically, for a “library” or “utility” style package, I’d reach for either unbuild’s stub concept or use esbuild/tsup/rollup to implement a more traditional watch/rebuild, but in this case, I’m watching a proto file that lives outsides of the source, which breaks assumptions of those tools.

As we can see, we have two external dependencies and one internal tool. In the modern way of packaging our application, we would be of course required to package this project using some bundler like ESBuild or Rollup. But with import maps, we can instead utilize CDN's to deliver our packages and completely eliminate the bundling step.

Vite has a great plugin ecosystem because it leverages the same plugin interface as Rollup, meaning most Rollup plugins are also compatible with Vite. The Vite guide offers more reasons for why you might want to check out Vite.

Other popular build tools include Vite.js, Browserify, Rollup - The bundler behind vite.

Awhile back I wrote about packaging your JavaScript library code into a dual-module bundle (ESM + CommonJS) using Rollup module bundler. Make sure to check it out (it's been updated for Rollup v3!).