parcel
esbuild
Our great sponsors
- Amplication - open-source Node.js backend code generator
- SurveyJS - A Non-Cloud Alternative to Google Forms that has it all.
- Appwrite - The open-source backend cloud platform
- Sonar - Write Clean JavaScript Code. Always.
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
- Mergify - Updating dependencies is time-consuming.
parcel | esbuild | |
---|---|---|
161 | 310 | |
42,701 | 36,078 | |
0.4% | - | |
9.0 | 9.6 | |
3 days ago | 4 days ago | |
JavaScript | Go | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
parcel
-
Bun vs Node.js: Everything you need to know
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.
-
JavaScript Gom Jabbar
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.
-
How To Secure Your JavaScript Applications
Bundling: Webpack, Parcel, Rollup
-
5 Different Tools to Bundle Node.js Apps
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.
-
[AskJS] Seeking a Shortcut or Program to Toggle 'Active State' Between Two Monitors on a Mac Mini
Parcel
-
It looks like create-react-app is dead. What should I use instead?
I love https://parceljs.org/.
I've started to use parcel for all my projects: https://parceljs.org/
-
Live preview of vanilla CSS as I change it?
The simplest solution might be to use parcel https://parceljs.org/
> The zero configuration build tool for the web.
-
How are you building React applications? It's time to move on from Create React App
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.
-
JavaScript Module Bundlers and all that Jazz โจ
Parcel is a popular zero configuration build tool for the web. Some of its popular features include -
esbuild
-
Why use Vite when Bun is also a bundler? - Vite vs. Bun
For production, Vite can use another bundler, esbuild, to speed up transpilation and minification, while it in production also uses the bundler Rollup to create the client side JS bundle, due to Rollup's flexible API. Even though Vite uses ESM in development environment, for speed. In the future Vite may use esbuild entirely for bundling instead of Rollup, due to the speed it would gain.
-
Modern VS Code extension development: The basics
The best way to accomplish this is through bundling. Microsoft recommends utilizing esbuild for bundling your VS Code extensions due to its speed and efficiency. webpack is another good alternative.
-
Date Picker: reactive Web Component in JavaScript
To bundle our code in this example we're going to use esbuild, because it's fast and easy to use.
-
PURISTA: Build with rimraf, esbuild, Turbo & git-cliff
esbuild - the rescue! No longer struggling with configs, file extensions or similar.
-
Nx Console gets Lit
Since Lit is just javascript files that donโt require a custom compiler or build tooling, we decided to use esbuild (via @nx/esbuild), which is written in Go and extremely fast. On the other hand, the old UI used the @angular-builders/custom-webpack:browser builder, which uses webpack under the hood.
-
How to Drag a Shape Along an SVG Ellipse Path: A Step-by-Step Guide
I will use TypeScript with esbuild bundler, which is a fast and highly efficient builder for JavaScript and TypeScript.
-
Building an Extension System on the Web
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;
-
Do not drop Sass for CSS
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.
-
[AskJS] Advantages of Rollup over other bundlers for creating libraries?
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.
-
JavaScript import maps are now supported cross-browser
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
What are some alternatives?
swc - Rust-based platform for the Web
vite - Next generation frontend tooling. It's fast!
Rollup - Next-generation ES module bundler
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
terser - ๐ JavaScript parser, mangler and compressor toolkit for ES6+
tsup - The simplest and fastest way to bundle your TypeScript libraries.
Next.js - The React Framework
ts-node - TypeScript execution and REPL for node.js
Tailwind CSS - A utility-first CSS framework for rapid UI development.
import-maps - How to control the behavior of JavaScript imports
gulp - A toolkit to automate & enhance your workflow