# microbundle-crl > Zero-configuration bundler for tiny JS libs, powered by Rollup. Latest version **0.13.11** (published 2020-06-30) · MIT license · 0 weekly downloads ## Install ```sh npm install microbundle-crl pnpm add microbundle-crl yarn add microbundle-crl bun add microbundle-crl ``` Provides the command `microbundle-crl`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned. ## Facts | | | |---|---| | Version | 0.13.11 | | Published | 2020-06-30 | | First published | 2020-03-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 41 | | Unpacked size | 163.6 KB | | Known vulnerabilities | 0 (+2 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 8125 | | Author | Jason Miller | | Maintainers | fisch0920 | | Keywords | bundle, rollup, micro library | ## Links - npm: https://www.npmjs.com/package/microbundle-crl - Repository: https://github.com/developit/microbundle - npm.io page: https://npm.io/package/microbundle-crl ## Dependencies (41) - [sade](https://npm.io/package/sade.md) ^1.7.3 - [kleur](https://npm.io/package/kleur.md) ^3.0.3 - [tslib](https://npm.io/package/tslib.md) ^1.11.1 - [rollup](https://npm.io/package/rollup.md) ^1.32.1 - [asyncro](https://npm.io/package/asyncro.md) ^3.0.0 - [cssnano](https://npm.io/package/cssnano.md) ^4.1.10 - [filesize](https://npm.io/package/filesize.md) ^6.1.0 - [camelcase](https://npm.io/package/camelcase.md) ^5.3.1 - [gzip-size](https://npm.io/package/gzip-size.md) ^5.1.1 - [tiny-glob](https://npm.io/package/tiny-glob.md) ^0.2.6 - [typescript](https://npm.io/package/typescript.md) ^3.8.3 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.8.7 - [brotli-size](https://npm.io/package/brotli-size.md) ^4.0.0 - [@svgr/rollup](https://npm.io/package/@svgr/rollup.md) ^5.4.0 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.7.3 - [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2 - [pretty-bytes](https://npm.io/package/pretty-bytes.md) ^5.3.0 - [es6-promisify](https://npm.io/package/es6-promisify.md) ^6.0.1 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.8.7 - [rollup-plugin-es3](https://npm.io/package/rollup-plugin-es3.md) ^1.1.0 - [@babel/preset-flow](https://npm.io/package/@babel/preset-flow.md) ^7.7.4 - [@rollup/plugin-json](https://npm.io/package/@rollup/plugin-json.md) ^4.0.2 - [babel-plugin-macros](https://npm.io/package/babel-plugin-macros.md) ^2.8.0 - [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0 - [@rollup/plugin-alias](https://npm.io/package/@rollup/plugin-alias.md) ^3.0.1 - [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^5.3.0 - [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^2.4.1 - [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^11.0.2 - [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.7.4 - [module-details-from-path](https://npm.io/package/module-details-from-path.md) ^1.0.3 - [rollup-plugin-bundle-size](https://npm.io/package/rollup-plugin-bundle-size.md) ^1.0.1 - [rollup-plugin-smart-asset](https://npm.io/package/rollup-plugin-smart-asset.md) ^2.0.7 - [rollup-plugin-typescript2](https://npm.io/package/rollup-plugin-typescript2.md) ^0.25.3 - [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^6.1.0 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.8.3 - [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.7.7 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) 7.7.4 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.8.3 - [@babel/plugin-transform-flow-strip-types](https://npm.io/package/@babel/plugin-transform-flow-strip-types.md) ^7.7.4 - [babel-plugin-transform-async-to-promises](https://npm.io/package/babel-plugin-transform-async-to-promises.md) ^0.8.15 - [babel-plugin-transform-replace-expressions](https://npm.io/package/babel-plugin-transform-replace-expressions.md) ^0.2.0 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 0.13.11 (latest) — 2020-06-30 - 0.13.10 — 2020-05-02 - 0.13.9 — 2020-04-03 - 0.13.8 — 2020-03-30 - 0.13.7 — 2020-03-30 ## README **NOTE** (Travis Fischer): this is a custom fork of [microbundle](https://github.com/developit/microbundle) which focuses on React for [create-react-library](https://github.com/transitive-bullshit/create-react-library) which adds a few nice-to-have features: - Changes the default `jsx` option to `React.createElement` - `rollup-plugin-smart-asset` - smart bundling of imported image assets - `@babel/plugin-proposal-decorators` - add support for legacy decorators - very convenient for [mobx](https://mobx.js.org) - `@babel/plugin-proposal-optional-chaining` - adds `?.` syntax support ---

microbundle

Microbundle npm travis

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-crl` ### Set up your `package.json` ```js { <<<<<<< HEAD "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 ======= "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.module.js", // 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 >>>>>>> upstream/master "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.module.js", // 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. ### Using CSS Modules By default any css file imported as `.module.css`, will be treated as a css-module. If you wish to treat all .css imports as a module, specify the cli flag `--css-modules true`. If you wish to disable all css-module behaviours set the flag to `false`. The default scope name when css-modules is turned on will be, in watch mode `_[name]__[local]__[hash:base64:5]` and when you build `_[hash:base64:5]`. This can be overriden by specifying the flag, eg `--css-modules "_something_[hash:base64:7]"`. _Note:_ by setting this, it will be treated as a true, and thus, all .css imports will be scoped. | flag | import | is css module? | | ----- | ------------------------------ | :----------------: | | null | import './my-file.css'; | :x: | | null | import './my-file.module.css'; | :white_check_mark: | | false | import './my-file.css'; | :x: | | false | import './my-file.module.css'; | :x: | | true | import './my-file.css'; | :white_check_mark: | | true | import './my-file.module.css'; | :white_check_mark: | ### 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 To achieve the smallest possible bundle size, libraries often wish to rename internal object properties or class members to smaller names - transforming `this._internalIdValue` to `this._i`. Microbundle doesn't do this by default, however it can be enabled by createing a `mangle.json` file (or a `"mangle"` property in your package.json). Within that file, you can specify a regular expression pattern to control which properties should be mangled. For example: to mangle all property names beginning an underscore: ```json { "mangle": { "regex": "^_" } } ``` It's also possible to configure repeatable short names for each mangled property, so that every build of your library has the same output. **See the wiki for a [complete guide to property mangling in Microbundle](https://github.com/developit/microbundle/wiki/mangle.json).** ### All CLI Options ``` Usage $ microbundle [options] Available Commands build Build once and exit watch Rebuilds on any change For more info, run any command with the `--help` flag $ microbundle build --help $ microbundle watch --help Options -v, --version Displays current version -i, --entry Entry module(s) -o, --output Directory to place build files into -f, --format Only build specified formats (default modern,es,cjs,umd) -w, --watch Rebuilds on any change (default false) --target Specify your target environment (node or web) (default web) --external Specify external dependencies, or 'none' --globals Specify globals dependencies, or 'none' --define Replace constants with hard-coded values --alias Map imports to different modules --compress Compress output using Terser --strict Enforce undefined global context and add "use strict" --name Specify name exposed in UMD builds --cwd Use an alternative working directory (default .) --sourcemap Generate source map (default true) --raw Show raw byte size (default false) --jsx A custom JSX pragma like React.createElement (default: h) --tsconfig Specify the path to a custom tsconfig.json --css-modules Configures .css to be treated as modules (default: null) -h, --help Displays this message Examples $ microbundle build --globals react=React,jquery=$ $ microbundle build --define API_KEY=1234 $ microbundle build --alias react=preact $ microbundle watch --no-sourcemap # don't generate sourcemaps $ microbundle build --tsconfig tsconfig.build.json ``` ## 🛣 Roadmap Here's what's coming up for Microbundle: - [ ] [Multiple separate inputs->outputs](https://github.com/developit/microbundle/issues/50) - [x] [TypeScript support](https://github.com/developit/microbundle/issues/5) - [x] [Flowtype support](https://github.com/developit/microbundle/issues/5#issuecomment-351075881) ## 🔨 Built with Microbundle - [Preact](https://github.com/preactjs/preact) Fast 3kB React alternative with the same modern API. Components & Virtual DOM. - [Stockroom](https://github.com/developit/stockroom) Offload your store management to a worker easily. - [Microenvi](https://github.com/fwilkerson/microenvi) Bundle, serve, and hot reload with one command. - [Theme UI](https://github.com/system-ui/theme-ui) Build consistent, themeable React apps based on constraint-based design principles. - [react-recomponent](https://github.com/philipp-spiess/react-recomponent) Reason-style reducer components for React using ES6 classes. - [brazilian-utils](https://github.com/brazilian-utils/brazilian-utils) Utils library for specific Brazilian businesses. - [react-hooks-lib](https://github.com/beizhedenglong/react-hooks-lib) A set of reusable react hooks. - [mdx-deck-live-code](https://github.com/JReinhold/mdx-deck-live-code) A library for [mdx-deck](https://github.com/jxnblk/mdx-deck) to do live React and JS coding directly in slides. - [react-router-ext](https://github.com/ri7nz/react-router-ext) An Extended [react-router-dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom) with simple usage. - [routex.js](https://github.com/alexhoma/routex.js) A dynamic routing library for Next.js. - [hooked-form](https://github.com/JoviDeCroock/hooked-form) A lightweight form-management library for React. - [goober](https://github.com/cristianbote/goober) Less than 1KB css-in-js alternative with a familiar API. ## 🥂 License [MIT](https://oss.ninja/mit/developit/) [rollup]: https://github.com/rollup/rollup [bublé]: https://github.com/Rich-Harris/buble [async-to-promises]: https://github.com/rpetrich/babel-plugin-transform-async-to-promises --- _Source: https://npm.io/package/microbundle-crl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._