The zero-configuration bundler for tiny modules, powered by Rollup.
--- ## ✨ Features: - **One dependency** to bundle your library using only a `package.json` - Support for ESnext & async/await _(via [Bublé] & [async-to-promises])_ - Produces tiny, optimized code for all inputs - Supports multiple entry modules _(`cli.js` + `index.js`, etc)_ - Creates multiple output formats for each entry _(CJS, UMD & ESM)_ - 0 configuration TypeScript support - Built-in Terser compression & gzipped bundle size tracking ## 🔧 Installation ### Download `npm i -D microbundle` ### Set up your `package.json` ```js { "source": "src/foo.js", // Your source file (same as 1st arg to microbundle) "main": "dist/foo.js", // output path for CommonJS/Node "module": "dist/foo.mjs", // output path for JS Modules "unpkg": "dist/foo.umd.js", // optional, for unpkg.com "scripts": { "build": "microbundle", // uses "source" and "main" as input and output paths by default "dev": "microbundle watch" } } ``` ### New: Modern JS Microbundle now has a new `modern` format (`microbundle -f modern`). Modern output still bundles and compresses your code, but it keeps useful syntax around that actually helps compression: ```js // Our source, "src/make-dom.js": export default async function makeDom(tag, props, children) { const el = document.createElement(tag); el.append(...(await children)); return Object.assign(el, props); } ``` Microbundle compiles the above to this: ```js export default async (e, t, a) => { const n = document.createElement(e); return n.append(...(await a)), Object.assign(n, t); }; ``` This is enabled by default - all you have to do is add the field to your `package.json`. You might choose to ship modern JS using the "module" field: ```js { "main": "dist/foo.umd.js", // legacy UMD bundle (for Node & CDN's) "module": "dist/foo.modern.mjs", // modern ES2017 bundle "scripts": { "build": "microbundle src/foo.js -f modern,umd" } } ``` ## 📦 Usage Microbundle includes two commands - `build` (the default) and `watch`. Neither require any options, but you can tailor things to suit your needs a bit if you like. ### `microbundle` / `microbundle build` Unless overridden via the command line, microbundle uses the `source` property in your `package.json` to locate the input file, and the `main` property for the output. For UMD builds, microbundle will use a snake case version of the `name` field in your `package.json` as export name. This can be overridden either by providing an `amdName` key in your `package.json` or via the `--name` flag in the cli. ### `microbundle watch` Acts just like `microbundle build`, but watches your source files and rebuilds on any change. ### Using with TypeScript Just point the input to a `.ts` file through either the cli or the `source` key in your `package.json` and you’re done. ### Specifying builds in `package.json` You can specify output builds in a `package.json` as follows: ``` "main": "dist/foo.js", // CJS bundle "umd:main": "dist/foo.umd.js", // UMD bundle "module": "dist/foo.m.js", // ES Modules bundle "source": "src/foo.js", // custom entry module (same as 1st arg to microbundle) "types": "dist/foo.d.ts", // TypeScript typings ``` ### Mangling Properties Libraries often wish to rename internal object properties or class members to smaller names - transforming `this._internalIdValue` to `this._i`. Microbundle doesn't currently do this by default, but it can be enabled by adding a "mangle" property to your package.json, with a pattern to control when properties should be mangled. To mangle all property names beginning an underscore, add the following: ```json { "mangle": { "regex": "^_" } } ``` ### All CLI Options ``` Usage $ microbundle