Microbundle VS parcel

This definition is tailored to microbundle but the tldr is property names can have large impact on size .

To begin, you need to prepare your environment. A few ways to build a React package include tools like Bit, Storybook, Lerna, and TSDX. However, for this tutorial, you will use a zero-configuration bundler for tiny modules called Microbundle.

I discovered microbundle lately, and I would like to share with you a mini template with the bare essentials and comfort to develop your packages with TypeScript.

For package authoring - microbundle is a handy boilerplate (I would avoid tsdx personally - it’s basically been abandoned for turborepo but that’s not apparent at first glance).

My tech stack was React + Typescript, Storybook for docs, vite.js for build instead of webpack, microbundle for bundling (basically a no-config rollup wrapper), and Google's release please bot for handling release/deployment.

Setting up a modern Typescript or Javascript development stack is a daunting task, there are a lot of moving parts, and sometimes the whole process seems like magic, so I switched to Microbundle. While microbundle handles the compilation, there are a lot of other moving parts that need to be set up to start developing with Nodejs/Typescript (CI, tests, linting, etc). So I've created an opinionated template repository with Typescript, Microbundle, Jest, eslint, husky, prettier, github actions, pnpm, and a bunch of other scripts. It enables me to start developing a library immediately by using the repository as a starter template. Let me know what you think and if some processes could be improved, or some valuable tools that could be added. Pull requests and suggestions are welcomed.

I would recommend starting by using https://github.com/developit/microbundle , as it has pretty good default behavior for generating library output.

Check out microbundle, which is what TSDX started as a typescript alternative to.

I’m quite happy with Microbundle

From its documentation [1] it looks a lot like a parceljs replacement [2], i.e. a zero config bundler which processes and bundles the dependencies in .html pages. So great for simple websites, not for replacing an entire Vite stack.

[1] https://bun.sh/docs/bundler/fullstack

[2] https://parceljs.org

Packagers are the ones we most frequently come into contact with, such as Webpack Vite and Parcel. The latter may not be commonly used, but it is also a well-established tool.

npm packages dramatically sped up the productivity of developers by being able to leverage other developers' work. However, it had a major disadvantage: cjs was not compatible with web browsers. To solve this problem, the concept of bundlers was born. browserify was the first bundler which essentially worked by traversing an entry point and "bundling" all the require()-ed code into a single .js file compatible with web browsers. As time went on, other bundlers with additional features and differentiators were introduced. Most notably webpack, parcel, rollup, esbuild and vite (in chronological order).

The AI Framework Debate

You will need a web bundler. You can use parcel.js

To run this script, we need a web bundler like parcel js.

Official Website

Someone even opened a discussion to ask if Parcel is dead. The official answer is no, Parcel is still alive, but it's in a we-are-working-on-a-large-refactor-and-no-time-for-minor-releases state. To us, it's like a "duck death": The latest version we can use is from more than a year ago, and we don't know when the next version will be released. It looks like it's dead, it acts like it's dead, so it's dead to us. Trust me, we tried.

While bundlers like Vite and Parcel present challenges due to our specific needs, two newer alternatives for Webpack show promise. Turbopack, the successor to Webpack created by Tobias Koppers, offers substantial performance enhancements. But, its current beta status and exclusivity for Next.js, limits its immediate usability for us.