esbuild VS parcel

I will use TypeScript with esbuild bundler, which is a fast and highly efficient builder for JavaScript and TypeScript.

Bundling extensions — in general, custom extension formats require custom bundling tools. Currently, as it’s still early, I put everything into a single JSON file with Node.js and esbuild bundler, but I’m exploring how to develop a custom Vite plugin for this purpose;

Chris favours using the ESBuild bundler to work out the shortcomings. ESBuild can bundle CSS files into a single CSS file. ESBuild can transform your natively nested CSS to "flat" CSS -- this is important since nesting is not in Firefox currently. Therefore, with the aid of ESBuild, Chris has feature parity for his usage of Sass. The other Sass features like mixins and inheritance do not appeal to Chris.

Rollup is highly configurable via plugins. It also supports a wide range of transpilation targets. However, it's written in JavaScript (well, TypeScript) so there's a ceiling on how fast it can go. esbuild and swc are orders-of-magnitude faster than Rollup.

Note that `deno bundle` is deprecated. You can almost replace it with esbuild but it currently lacks builtin support for import maps:

    deno run --allow-all https://deno.land/x/[email protected]/mod.js --bundle app.js --outfile=bundle.js. # errors, see: https://github.com/evanw/esbuild/issues/2230

Want to import a package / file conveniently from esm.sh or unpkg or directly from a GitHub repo for a one-off script (for example). To do this I created a custom ESBuild plugin to handle HTTP imports - that worked for ,js files. To support running both ESM and CJS, I use tsx.

esbuild – is an easy-to-configure bundler,

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.

I use ESBuild (https://esbuild.github.io/) as a library for my almost pure Go toolchain, and it covers my requirements for almost 2 years now. ESBuild is the Go tool used in Vite, an incredible tool that I stopped using when I discovered that ESBuild covered all my needs.

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.

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 -

Parcel is a JavaScript bundler for Web applications with zero configuration and is straight-forward to set up. It packages all the application files in a dist folder, so the application can be run.

Sounds like you're looking for ParcelJS https://parceljs.org/

parcel-bundler cache (https://parceljs.org/)

FWIW, I'm using https://pnpm.io and https://parceljs.org to handle collecting and building the static assets for .js (Alpine and HTMX) and .css (Tailwind). I found it cleaner separation of concerns to let the JavaScript tooling manage the JavaScript dependencies, and have been happy with the performance and flexibility of this approach.