Bundling and transpiling is a solved problem in 2023. We went from writing build scripts in Grunt, Gulp, Browserify, Webpack, Rollup, Snowpack to turnkey solutions and templates projects today.
Understanding JavaScript Modules: Bundling & Transpiling
Modern JavaScript Explained For Dinosaurs – Node.js Collection – Medium
These tools will help you write clean code
Prepack · Partial evaluator for JavaScript AOT optimization at build time
CodeMod
facebook/jscodeshift: A JavaScript codemod toolkit.
cpojer/js-codemod: Codemod scripts to transform code to next generation JS
facebook/codemod: Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. Codemod was developed at Facebook and released as open source.
A Codemod Survival Guide | benmccormick.org
Codemods: A Quick and Easy Way to Automate Code Refactoring — SitePoint
Refactoring With Codemods and jscodeshift | Toptal
Effective JavaScript Codemods – Christoph Pojer – Medium
reactjs/react-codemod: React codemod scripts
Christoph Pojer: Evolving Complex Systems Incrementally | JSConf EU 2015 - YouTube
Master the Art of the AST & Take Control of Your JS (English) - YouTube
Bundlers
Comparing the New Generation of Build Tools | CSS-Tricks - CSS-Tricks 2022-01
Modular JavaScript: A Beginners Guide to SystemJS & jspm
21 Javascript Bundlers 🚀 | Hacker Noon
Modular JavaScript: A Beginners Guide to SystemJS & jspm
pkg.module · rollup/rollup Wiki instruct bundlers to use ES2015 modules
Bundle size
Reduce Your bundle.js File Size By Doing This One Thing
samccone/coverage-ext: Generate code coverage for any webpage
BundlePhobia ❘ cost of adding a npm package
danvk/source-map-explorer: Analyze and debug space usage through source maps
LironEr/bundlemon: Monitor your bundle size
Browserslist
Bundle for Browser
ESM bundles are also useful for Deno and modern browser
UNPKG UMD
Skypack: search millions of open source JavaScript packages ESM
ESM>CDN allows aliasing, ESM
jsDelivr - A free, fast, and reliable CDN for JS and open source good for Asia, CJS, ESM
Hosted Libraries | Google Developers
cdnjs - The #1 free and open source CDN built to make life easier for developers CloudFlare
Microsoft Ajax Content Delivery Network Assets | Microsoft Learn
Official CDN of Bootstrap and Font Awesome · BootstrapCDN MaxCDN
mikeal/brrp: ESM bundle npm modules for browsers and nodejs
All-in-one dev server
Modern build chain should support
- Hot Module Reload (HMR)
- serving ES Module is dev
- module splitting and lazy loading
- fast speed (esbuild and swc fast)
Create React App is dead
Vite and Next.js replaced it with more features
Introduction · Neutrino
Modern JavaScript Apps with Neutrino
Next.js by Vercel - The React Framework GitHub
microsite/getting-started.md at main · natemoo-re/microsite using Snowpack, Preact
Introduction – TSDX 😴inactive
jaredpalmer/tsdx: Zero-config CLI for TypeScript package development Rollup
fwilkerson/microenvi: Bundle, serve, and hot reload with one command microbundle
esbuild
esbuild - An extremely fast JavaScript bundler built with Go, used in Snowpack
esbuild - Next-generation JavaScript bundler | refine
tsup Bundle your TypeScript library with no config, powered by esbuild
WMR
WMR: Tiny all-in-one development tool for modern web apps.
preactjs/wmr: 👩🚀 The tiny all-in-one development tool for modern web apps.
The Preact Team Releases WMR to Simplify Modern Web App Development
Turborepo
Turborepo TypeScript monorepo, used Turbopack
vercel/turborepo: The High-performance Build System for JavaScript & TypeScript Codebases
What is Turborepo and Why Should You Care? | refine
From Go To RUST: The story of Turborepo - YouTube
Turbopack
Turbopack - The successor to Webpack caches source files during build, good for large project
PWA
Rollup.js
rollup.js
rollup.js guide
rollup/awesome: ⚡️ Delightful Rollup Plugins, Packages, and Resources
rollup.js
rollup/plugins: 🍣 The one-stop shop for official Rollup plugins
rollup/rollup-starter-app: Bare-bones example of how to create an application using Rollup
rollup/rollup-starter-lib: Bare-bones example of how to create a library using Rollup
Webpack and Rollup: the same but different – webpack – Medium
Parcel
📦 Parcel
parcel-bundler/awesome-parcel: 🔗 A curated list of awesome Parcel resources, libraries, tools and boilerplates
Everything You Need To Know About Parcel: The Blazing Fast Web App Bundler 🚀
Parcel vs webpack - Jakob Lind
Using Parcel as a Bundler for React Applications | CSS-Tricks
Parcel.js — Easy JavaScript Bundling | by Christopher Shaffer | Better Programming
Parcel bundler: Like Webpack but effortless | InfoWorld
Parcel bundler: Testing Parcel’s asset support | InfoWorld
Parcel bundler: Production builds and best practices | InfoWorld
Rome
Rome Toolchain
Deep dive into Rome: Linting, compiling, and bundling - LogRocket Blog
swc
swc with Rust
hq
microbundle
developit/microbundle: 📦 Zero-configuration bundler for tiny modules.
Zero-Config Monorepo for a React Component Library in 2019
Example:
JReinhold/mdx-deck-live-code: A component for mdx-deck to live code in your slides. 🤯
philipp-spiess/react-recomponent: 🥫 Reason-style reducer components for React using ES6 classes.
Uses convention in package.json to specify output:
"main": "./dist/foo.umd.js", // legacy UMD output (for Node & CDN use)
"exports": "./dist/foo.modern.js", // modern ES2017 output
"module": "./dist/foo.module.js", // legacy ES Modules output (for bundlers)
"source": "src/foo.js", // custom entry module (same as 1st arg to microbundle)
"types": "dist/foo.d.ts", // TypeScript typingsFuseBox
FuseBox - Blazing fast js bundler/loader with super powers
fuse-box/fuse-box: A blazing fast js bundler/loader with a comprehensive API
Packem
Packem – A precompiled JavaScript module bundler
packem/packem: 📦⚡ A precompiled JavaScript module bundler
Introducing Packem: a super fast experimental bundler written in Rust