![\"microbundle\"](\"https://i.imgur.com/LMEgZMh.gif\")
\n\n \n
![\"npm\"](\"https://img.shields.io/npm/v/microbundle.svg?style=flat\")
![\"travis\"](\"https://travis-ci.org/developit/microbundle.svg?branch=master\")
\nThe zero-configuration bundler for tiny modules, powered by Rollup.
\n\n---\n\n## ✨ Features:\n\n- **One dependency** to bundle your library using only a `package.json`\n- Support for ESnext & async/await _(via [Bublé] & [async-to-promises])_\n- Produces tiny, optimized code for all inputs\n- Supports multiple entry modules _(`cli.js` + `index.js`, etc)_\n- Creates multiple output formats for each entry _(CJS, UMD & ESM)_\n- 0 configuration TypeScript support\n- Built-in Terser compression & gzipped bundle size tracking\n\n## 🔧 Installation\n\n### Download\n\n`npm i -D microbundle-crl`\n\n### Set up your `package.json`\n\n```js\n{\n<<<<<<< HEAD\n \"source\": \"src/foo.js\", // Your source file (same as 1st arg to microbundle)\n \"main\": \"dist/foo.js\", // output path for CommonJS/Node\n \"module\": \"dist/foo.mjs\", // output path for JS Modules\n \"unpkg\": \"dist/foo.umd.js\", // optional, for unpkg.com\n \"scripts\": {\n \"build\": \"microbundle\", // uses \"source\" and \"main\" as input and output paths by default\n=======\n \"source\": \"src/foo.js\", // Your source file (same as 1st arg to microbundle)\n \"main\": \"dist/foo.js\", // output path for CommonJS/Node\n \"module\": \"dist/foo.module.js\", // output path for JS Modules\n \"unpkg\": \"dist/foo.umd.js\", // optional, for unpkg.com\n \"scripts\": {\n \"build\": \"microbundle\", // uses \"source\" and \"main\" as input and output paths by default\n>>>>>>> upstream/master\n \"dev\": \"microbundle watch\"\n }\n}\n```\n\n### New: Modern JS\n\nMicrobundle now has a new `modern` format (`microbundle -f modern`).\nModern output still bundles and compresses your code, but it keeps useful syntax\naround that actually helps compression:\n\n```js\n// Our source, \"src/make-dom.js\":\nexport default async function makeDom(tag, props, children) {\n\tconst el = document.createElement(tag);\n\tel.append(...(await children));\n\treturn Object.assign(el, props);\n}\n```\n\nMicrobundle compiles the above to this:\n\n```js\nexport default async (e, t, a) => {\n\tconst n = document.createElement(e);\n\treturn n.append(...(await a)), Object.assign(n, t);\n};\n```\n\nThis 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:\n\n```js\n{\n \"main\": \"dist/foo.umd.js\", // legacy UMD bundle (for Node & CDN's)\n \"module\": \"dist/foo.modern.module.js\", // modern ES2017 bundle\n \"scripts\": {\n \"build\": \"microbundle src/foo.js -f modern,umd\"\n }\n}\n```\n\n## 📦 Usage\n\nMicrobundle 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.\n\n### `microbundle` / `microbundle build`\n\nUnless 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.\n\nFor 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.\n\n### `microbundle watch`\n\nActs just like `microbundle build`, but watches your source files and rebuilds on any change.\n\n### Using with TypeScript\n\nJust point the input to a `.ts` file through either the cli or the `source` key in your `package.json` and you’re done.\n\n### Using CSS Modules\n\nBy default any css file imported as `.module.css`, will be treated as a css-module. If you wish to treat all .css\nimports as a module, specify the cli flag `--css-modules true`. If you wish to disable all css-module behaviours set the\nflag to `false`.\n\nThe default scope name when css-modules is turned on will be, in watch mode `_[name]__[local]__[hash:base64:5]` and when\nyou build `_[hash:base64:5]`. This can be overriden by specifying the flag, eg\n`--css-modules \"_something_[hash:base64:7]\"`. _Note:_ by setting this, it will be treated as a true, and thus, all .css\nimports will be scoped.\n\n| flag | import | is css module? |\n| ----- | ------------------------------ | :----------------: |\n| null | import './my-file.css'; | :x: |\n| null | import './my-file.module.css'; | :white_check_mark: |\n| false | import './my-file.css'; | :x: |\n| false | import './my-file.module.css'; | :x: |\n| true | import './my-file.css'; | :white_check_mark: |\n| true | import './my-file.module.css'; | :white_check_mark: |\n\n### Specifying builds in `package.json`\n\nYou can specify output builds in a `package.json` as follows:\n\n```\n\"main\": \"dist/foo.js\", // CJS bundle\n\"umd:main\": \"dist/foo.umd.js\", // UMD bundle\n\"module\": \"dist/foo.m.js\", // ES Modules bundle\n\"source\": \"src/foo.js\", // custom entry module (same as 1st arg to microbundle)\n\"types\": \"dist/foo.d.ts\", // TypeScript typings\n```\n\n### Mangling Properties\n\nTo 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:\n\n```json\n{\n\t\"mangle\": {\n\t\t\"regex\": \"^_\"\n\t}\n}\n```\n\nIt'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).**\n\n### All CLI Options\n\n```\nUsage\n\t$ microbundle