### Install Microbundle

Source: https://github.com/developit/microbundle/blob/master/README.md

Install Microbundle as a development dependency using npm.

```bash
npm i -D microbundle
```

--------------------------------

### Microbundle Watch Example with No Sourcemap

Source: https://github.com/developit/microbundle/blob/master/README.md

Use this command to watch for file changes and rebuild. This example specifically disables sourcemap generation, which can speed up rebuilds.

```bash
microbundle watch --no-sourcemap
```

--------------------------------

### Microbundle Build Example with Define

Source: https://github.com/developit/microbundle/blob/master/README.md

Use this command to replace constants with hard-coded values during the build. This is helpful for injecting environment variables or feature flags.

```bash
microbundle build --define API_KEY=1234
```

--------------------------------

### Microbundle Build Example with Alias

Source: https://github.com/developit/microbundle/blob/master/README.md

Use this command to map imports to different modules. This is useful for aliasing libraries, such as replacing React with Preact.

```bash
microbundle build --alias react=preact/compat
```

--------------------------------

### Microbundle Build Example with Globals

Source: https://github.com/developit/microbundle/blob/master/README.md

Use this command to build your project and specify global variables for external dependencies. This is useful when bundling for environments that expect specific global objects.

```bash
microbundle build --globals react=React,jquery=$
```

--------------------------------

### Source Code Example

Source: https://github.com/developit/microbundle/blob/master/README.md

Example source code used to demonstrate the difference between modern and standard ESM bundles.

```js
// Our source, "src/make-dom.js":
export default async function makeDom(tag, props, children) {
	let el = document.createElement(tag);
	el.append(...(await children));
	return Object.assign(el, props);
}
```

--------------------------------

### Package.json Filename Specification

Source: https://github.com/developit/microbundle/blob/master/README.md

Configuration example for specifying input source and various output bundle formats in package.json.

```jsonc
{
  "source": "src/index.js",             // input
  "main": "dist/foo.js",                // CommonJS output bundle
  "umd:main": "dist/foo.umd.js",        // UMD output bundle
  "module": "dist/foo.mjs",             // ES Modules output bundle
  "exports": {
    "types": "./dist/foo.d.ts",         // TypeScript typings for NodeNext modules
    "require": "./dist/foo.js",         // CommonJS output bundle
    "default": "./dist/foo.modern.mjs", // Modern ES Modules output bundle
  },
  "types": "dist/foo.d.ts"              // TypeScript typings
}
```

--------------------------------

### Microbundle Build Example with Custom Tsconfig

Source: https://github.com/developit/microbundle/blob/master/README.md

Use this command to specify a custom TypeScript configuration file for the build process. This allows for more granular control over TypeScript compilation.

```bash
microbundle build --tsconfig tsconfig.build.json
```

--------------------------------

### Package.json Exports Configuration

Source: https://github.com/developit/microbundle/blob/master/README.md

Examples of configuring the exports field in package.json for single and multiple entry modules.

```jsonc
{
	"main": "./dist/foo.umd.js", // legacy UMD output (for Node & CDN use)
	"module": "./dist/foo.module.mjs", // legacy ES Modules output (for bundlers)
	"exports": "./dist/foo.modern.mjs", // modern ES2017 output
	"scripts": {
		"build": "microbundle src/foo.js"
	}
}
```

```jsonc
{
	"name": "foo",
	"exports": {
		".": "./dist/foo.modern.mjs", // import "foo" (the default)
		"./lite": "./dist/lite.modern.mjs", // import "foo/lite"
		"./full": "./dist/full.modern.mjs" // import "foo/full"
	},
	"scripts": {
		"build": "microbundle src/*.js" // build foo.js, lite.js and full.js
	}
}
```

--------------------------------

### TypeScript Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Setup for TypeScript projects including package.json and tsconfig.json settings.

```json
{
  "name": "my-ts-library",
  "source": "src/index.ts",
  "main": "./dist/my-ts-library.cjs",
  "module": "./dist/my-ts-library.module.js",
  "types": "./dist/my-ts-library.d.ts",
  "exports": {
    "types": "./dist/my-ts-library.d.ts",
    "require": "./dist/my-ts-library.cjs",
    "default": "./dist/my-ts-library.modern.mjs"
  },
  "scripts": {
    "build": "microbundle"
  }
}
```

```json
// tsconfig.json (recommended settings)
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "declaration": true,
    "sourceMap": true,
    "jsx": "preserve"
  },
  "include": ["src/**/*"]
}
```

--------------------------------

### CSS Modules Import Examples

Source: https://github.com/developit/microbundle/blob/master/README.md

This table illustrates how different flags affect CSS Module processing. Files ending in `.module.css` are treated as CSS Modules by default.

```markdown
| 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: |
```

--------------------------------

### Enable Property Mangling with Regex

Source: https://github.com/developit/microbundle/wiki/mangle.json

Configure Microbundle to shorten properties matching a regular expression. Use this to compress properties starting with an underscore.

```json
{
  "mangle": {
    "properties": {
      "regex": "^_"
    }
  }
}
```

--------------------------------

### Build Single Bundle with Fixed Output Name

Source: https://github.com/developit/microbundle/blob/master/README.md

Use the `-i`, `-o`, `--no-pkg-main`, and `-f` flags to build a single bundle with a fixed output name and format.

```bash
microbundle -i lib/main.js -o dist/bundle.js --no-pkg-main -f umd
```

--------------------------------

### Multiple Entry Points Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Configure multiple submodules by providing an array to the source field.

```json
{
  "name": "my-library",
  "source": ["src/index.js", "src/utils.js", "src/helpers.js"],
  "exports": {
    ".": "./dist/index.modern.mjs",
    "./utils": "./dist/utils.modern.mjs",
    "./helpers": "./dist/helpers.modern.mjs"
  },
  "scripts": {
    "build": "microbundle src/*.js"
  }
}
```

--------------------------------

### Build project with Microbundle

Source: https://github.com/developit/microbundle/blob/master/README.md

Execute the build script defined in package.json to compile source files into various output formats.

```bash
npm run build
```

--------------------------------

### Basic Package.json Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Standard configuration for a library using source, main, module, and exports fields.

```json
{
  "name": "my-library",
  "version": "1.0.0",
  "type": "module",
  "source": "src/index.js",
  "main": "./dist/my-library.cjs",
  "module": "./dist/my-library.module.js",
  "unpkg": "./dist/my-library.umd.js",
  "exports": {
    "require": "./dist/my-library.cjs",
    "default": "./dist/my-library.modern.js"
  },
  "types": "dist/my-library.d.ts",
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
  }
}
```

--------------------------------

### Import CSS with Default Behavior

Source: https://github.com/developit/microbundle/blob/master/README.md

Importing a CSS file with the default settings generates a minified `.css` file in the output directory.

```javascript
import './foo.css'; // generates a minified .css file in the output directory
```

--------------------------------

### Configure package.json for Microbundle

Source: https://github.com/developit/microbundle/blob/master/README.md

Set up your package.json to define source files, output formats, and build scripts for Microbundle.

```json
{
  "name": "foo",                      // your package name
  "type": "module",
  "source": "src/foo.js",             // your source code
  "exports": {
    "require": "./dist/foo.cjs",      // used for require() in Node 12+
    "default": "./dist/foo.modern.js" // where to generate the modern bundle (see below)
  },
  "main": "./dist/foo.cjs",           // where to generate the CommonJS bundle
  "module": "./dist/foo.module.js",   // where to generate the ESM bundle
  "unpkg": "./dist/foo.umd.js",       // where to generate the UMD bundle (also aliased as "umd:main")
  "scripts": {
    "build": "microbundle",           // compiles "source" to "main"/"module"/"unpkg"
    "dev": "microbundle watch"        // re-build when source files change
  }
}
```

--------------------------------

### Dependency Bundling Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Define how dependencies are handled by categorizing them in package.json and importing them in source files.

```json
{
  "name": "my-library",
  "source": "src/index.js",
  "main": "dist/index.js",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "peerDependencies": {
    "react": "^18.0.0"
  },
  "devDependencies": {
    "tiny-helper": "^1.0.0"
  }
}
```

```javascript
// src/index.js
import { debounce } from 'lodash';      // External - require('lodash') in output
import React from 'react';               // External - require('react') in output
import { helper } from 'tiny-helper';    // Inlined - bundled into output

export function MyComponent() {
  // lodash and react remain as imports
  // tiny-helper code is included in the bundle
}
```

--------------------------------

### External Dependencies Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Manage how dependencies are handled during the bundling process.

```bash
# Bundle all dependencies (ignore package.json)
microbundle --external none

# Specify external dependencies explicitly (comma-separated)
microbundle --external react,react-dom,lodash

# Use regex patterns for externals
microbundle --external '^react.*,^@mui/.*'

# Default behavior: peerDependencies and dependencies are external
# devDependencies are bundled
microbundle
```

--------------------------------

### Watch Mode with Callbacks

Source: https://context7.com/developit/microbundle/llms.txt

Integrate with development servers by using event callbacks for build lifecycle events and managing watcher lifecycles.

```javascript
import microbundle from 'microbundle';

async function dev() {
  const { watchers } = await microbundle({
    entries: ['src/index.js'],
    output: 'dist/bundle.js',
    format: 'esm',
    watch: true,
    sourcemap: true,
    compress: false,

    // Callback when rebuild starts
    onStart: (event) => {
      console.log('Build started...');
    },

    // Callback when rebuild completes
    onBuild: (event) => {
      console.log('Build complete!');
      // Trigger HMR, reload browser, etc.
    },

    // Callback on build errors
    onError: (event) => {
      console.error('Build error:', event.error.message);
    },
  });

  // Stop watching when needed
  process.on('SIGINT', () => {
    Object.values(watchers).forEach(watcher => watcher.close());
    process.exit(0);
  });
}

dev();
```

--------------------------------

### Watch Command CLI Usage

Source: https://context7.com/developit/microbundle/llms.txt

Automatically rebuilds bundles when source files change during development.

```bash
# Watch mode with default settings
microbundle watch

# Watch specific entry files
microbundle watch src/index.js

# Watch without sourcemaps
microbundle watch --no-sourcemap

# Watch with custom working directory
microbundle watch --cwd ./packages/my-lib
```

--------------------------------

### Custom Programmatic Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Define complex build scenarios by passing a comprehensive configuration object to the microbundle function.

```javascript
import microbundle from 'microbundle';

const config = {
  // Entry points
  entries: ['src/index.ts', 'src/cli.ts'],

  // Output configuration
  output: 'dist',
  format: 'modern,esm,cjs',

  // Environment
  cwd: process.cwd(),
  target: 'web', // or 'node'

  // Sourcemaps and compression
  sourcemap: true,
  compress: true,
  strict: false,

  // Dependencies handling
  external: 'react,react-dom', // or 'none' to bundle all
  globals: 'react=React,react-dom=ReactDOM',

  // Module aliases
  alias: 'react=preact/compat',

  // Build-time constants
  define: 'VERSION=1,DEBUG=false',

  // JSX configuration
  jsx: 'React.createElement',
  jsxFragment: 'React.Fragment',
  // Or use automatic runtime:
  // jsxImportSource: 'react',

  // TypeScript
  tsconfig: 'tsconfig.build.json',
  generateTypes: true,

  // CSS
  css: 'external', // or 'inline'
  'css-modules': null, // null, true, false, or custom pattern

  // Workers and visualization
  workers: false,
  visualize: false,

  // Output options
  'pkg-main': true,
  name: 'MyLibrary', // UMD global name
  raw: false, // Show raw byte sizes
};

microbundle(config)
  .then(({ output }) => console.log(output))
  .catch(err => console.error(err));
```

--------------------------------

### Build Command CLI Usage

Source: https://context7.com/developit/microbundle/llms.txt

Compiles source files once based on package.json configuration or specific arguments.

```bash
# Basic build using package.json configuration
microbundle

# Build specific entry files
microbundle src/index.js src/cli.js

# Build with custom output directory
microbundle --output dist/bundle.js

# Build only specific formats (esm, cjs, umd, modern, iife)
microbundle --format modern,esm,cjs

# Build for Node.js target (disables compression by default)
microbundle --target node

# Build with inline sourcemaps (debugging only)
microbundle --sourcemap inline

# Build without compression
microbundle --no-compress

# Build with bundle visualization (generates stats.html)
microbundle --visualize
```

--------------------------------

### Watch for changes with Microbundle

Source: https://github.com/developit/microbundle/blob/master/README.md

Run Microbundle in watch mode to automatically re-build when source files are modified.

```bash
npm run dev
```

--------------------------------

### TypeScript Configuration Recommendations

Source: https://github.com/developit/microbundle/blob/master/README.md

For TypeScript projects, set `"module": "ESNext"` and `"target": "ESNext"` in `tsconfig.json` to align with Microbundle's internal configuration. Use `"files"` or `"include"` to specify files for compilation.

```json
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext"
  },
  "include": ["node_modules/microbundle/index.d.ts"]
}
```

--------------------------------

### Enable Worker Bundling via CLI

Source: https://context7.com/developit/microbundle/llms.txt

Use command line flags to enable worker bundling, which is supported for ESM and modern formats.

```bash
# Enable worker bundling
microbundle --workers

# Workers are only bundled for ESM and modern formats
microbundle --format modern,esm --workers
```

--------------------------------

### Programmatic API Basic Usage

Source: https://context7.com/developit/microbundle/llms.txt

Execute builds programmatically in Node.js scripts by passing configuration objects to the microbundle function.

```javascript
import microbundle from 'microbundle';

async function build() {
  try {
    const result = await microbundle({
      entries: ['src/index.js'],
      output: 'dist/bundle.js',
      format: 'modern,esm,cjs,umd',
      cwd: process.cwd(),
      sourcemap: true,
      compress: true,
      target: 'web',
    });

    console.log(result.output);
    // Build "my-library" to dist:
    //     1.2 kB: bundle.modern.js.gz
    //     1.5 kB: bundle.module.js.gz
    //     2.1 kB: bundle.js.gz
    //     2.8 kB: bundle.umd.js.gz
  } catch (error) {
    console.error('Build failed:', error);
    process.exit(1);
  }
}

build();
```

--------------------------------

### Bundle All Dependencies with Microbundle

Source: https://github.com/developit/microbundle/wiki/How-Microbundle-decides-which-dependencies-to-bundle

Use the `--external none` option to force all dependencies to be inlined. This configuration is useful for specific cases like bundling GitHub Actions or when dependencies need to be transformed during the build process.

```json
{
  "source": "generic.js",
  "scripts": {
    "build:preact": "microbundle --external none --define PREACT=1 --dist preact.js",
    "build:react": "microbundle --dist react.js"
  },
  "dependencies": {
    "prop-types": "^1.2.3",
    "some-other-lib": "^1.2.3"
  }
}
```

--------------------------------

### Configure JSX Pragma and Fragment

Source: https://context7.com/developit/microbundle/llms.txt

Customize the JSX pragma and fragment for custom rendering libraries using the --jsx and --jsxFragment flags. Supports React, Preact, and automatic runtimes.

```bash
microbundle --jsx h --jsxFragment Fragment
```

```bash
microbundle --jsx React.createElement --jsxFragment React.Fragment
```

```bash
microbundle --jsxImportSource react
```

```bash
microbundle --jsxImportSource preact
```

--------------------------------

### Enable Worker Bundling

Source: https://github.com/developit/microbundle/blob/master/README.md

Add the --workers flag to the build command to process detected module workers.

```bash
microbundle --workers
```

--------------------------------

### Override Configuration with publishConfig

Source: https://github.com/developit/microbundle/blob/master/README.md

Configuration options can be overridden using the `publishConfig` property in `package.json`. This is useful for setting different input/output paths for development versus publishing.

```json
{
  "main": "src/index.ts",          // this would be used in the dev environment (e.g. Jest)
  "publishConfig": {
    "source": "src/index.js",      // input
    "main": "dist/my-library.js",  // output
  },
  "scripts": {
    "build": "microbundle"
  }
}
```

--------------------------------

### Use Custom TypeScript Configuration

Source: https://context7.com/developit/microbundle/llms.txt

Specify a custom tsconfig.json file for builds using the --tsconfig flag. You can also control type generation with --generateTypes.

```bash
microbundle --tsconfig tsconfig.build.json
```

```bash
microbundle --generateTypes false
```

```bash
microbundle --generateTypes true
```

--------------------------------

### Compiled Bundle Comparison

Source: https://github.com/developit/microbundle/blob/master/README.md

Comparison of the output generated by Microbundle for modern browsers versus standard ESM.

```js
export default async function (e, t, a) {
	let n = document.createElement(e);
	n.append(...(await a));
	return Object.assign(n, t);
}
```

```js
export default function (e, t, r) {
	try {
		var n = document.createElement(e);
		return Promise.resolve(r).then(function (e) {
			return n.append.apply(n, e), Object.assign(n, t);
		});
	} catch (e) {
		return Promise.reject(e);
	}
}
```

--------------------------------

### Inject Build-time Constants

Source: https://github.com/developit/microbundle/blob/master/README.md

Use the --define option to replace constants or inject JavaScript expressions during the build process.

```bash
microbundle --define VERSION=2
```

```bash
microbundle --define API_KEY='abc123'
```

```bash
microbundle --define @assign=Object.assign
```

--------------------------------

### Import CSS with `--css inline` Option

Source: https://github.com/developit/microbundle/blob/master/README.md

When using the `--css inline` command-line option, generated CSS is inlined into the bundle as a string, which is then returned from the import.

```javascript
import css from './foo.css';
console.log(css); // the generated minified stylesheet
```

--------------------------------

### Define Build-Time Constants

Source: https://context7.com/developit/microbundle/llms.txt

Replace constants with hard-coded values or expressions during the build process.

```bash
# Replace a constant with a number
microbundle --define VERSION=2
# Source: console.log(VERSION) → Output: console.log(2)

# Replace a constant with a string
microbundle --define API_KEY='abc123'
# Source: console.log(API_KEY) → Output: console.log("abc123")

# Replace with JavaScript expression (prefix with @)
microbundle --define @assign=Object.assign
# Source: assign(a, b) → Output: Object.assign(a, b)

# Multiple defines
microbundle --define VERSION=2,DEBUG=false,API_URL='https://api.example.com'
```

--------------------------------

### Bundle Web Workers

Source: https://context7.com/developit/microbundle/llms.txt

Implement worker instantiation using URL objects or simple paths, and define worker logic for CPU-intensive tasks.

```javascript
// src/index.js
export function createWorker() {
  // Standard Worker instantiation with URL
  const worker = new Worker(
    new URL('./worker.js', import.meta.url),
    { type: 'module' }
  );

  worker.onmessage = (e) => {
    console.log('Worker result:', e.data);
  };

  return worker;
}

// Simple string path also supported
export function createSimpleWorker() {
  return new Worker('./worker.js', { type: 'module' });
}
```

```javascript
// src/worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

function heavyComputation(data) {
  // CPU-intensive work
  return data.map(x => x * 2);
}
```

--------------------------------

### Override Dependency Bundling

Source: https://context7.com/developit/microbundle/llms.txt

Force all dependencies to be bundled regardless of package.json settings using the --external flag.

```bash
# Override: bundle everything
microbundle --external none
```

--------------------------------

### Inline a dependency

Source: https://github.com/developit/microbundle/wiki/How-Microbundle-decides-which-dependencies-to-bundle

Add a dependency to 'devDependencies' in package.json to have Microbundle inline it into the final bundle.

```jsonc
{
  "main": "dist/index.js",
  "module": "dist/index.module.js",
  "scripts": {
    "build": "microbundle my-lib.js"
  },
  "devDependencies": {
    "lib-to-bundle": "^1.2.3"  // gets bundled into dist/index.js
  }
}
```

--------------------------------

### Configure ES Module Package in package.json

Source: https://github.com/developit/microbundle/blob/master/README.md

When using `{"type":"module"}` in package.json, change the file extension for CommonJS bundles to `.cjs`.

```json
{
  "type": "module",
  "module": "dist/foo.js",  // ES Module bundle
  "main": "dist/foo.cjs"   // CommonJS bundle
}
```

--------------------------------

### Instantiate Module Workers

Source: https://github.com/developit/microbundle/blob/master/README.md

Use the Worker constructor with the module type option to enable bundling of Web Workers in esm and modern formats.

```js
worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
// or simply:
worker = new Worker('./worker.js', { type: 'module' });
```

--------------------------------

### Explicitly control external dependencies

Source: https://github.com/developit/microbundle/wiki/How-Microbundle-decides-which-dependencies-to-bundle

Use the '--external' flag to override default behavior and specify which dependencies should remain external.

```jsonc
{
  "source": "my-lib.js",
  "scripts": {
    // bundle everything: (ignores package.json fields)
    "build:standalone": "microbundle --external none --dist standalone.js",
    // bundle everything except pretty-format:
    "build:development": "microbundle --external pretty-format my-lib.development.js"
  },
  "dependencies": {
    "pretty-format": "^1.2.3",
    "debug": "^1.2.3"
  }
}
```

--------------------------------

### Configure Property Mangling

Source: https://context7.com/developit/microbundle/llms.txt

Enable property mangling to shorten property names, reducing bundle size. Configure the regex for matching properties and optionally provide custom mappings or reserved names.

```json
// mangle.json - Place in project root
{
  "mangle": {
    "properties": {
      "regex": "^_"
    }
  }
}
```

```javascript
// Source code
class Store {
  _internalValue = 0;
  _privateMethod() { return this._internalValue; }
  publicMethod() { return this._privateMethod(); }
}

// After bundling, properties starting with _ are shortened:
// _internalValue → _a, _privateMethod → _b
```

```json
// mangle.json with custom mappings
{
  "mangle": {
    "properties": {
      "regex": "^_"
    }
  },
  "props": {
    "props": {
      "$_internalValue": "__v",
      "$_privateMethod": "__m",
      "$_backingStore": "__s"
    }
  }
}
```

```json
// mangle.json with reserved names
{
  "mangle": {
    "properties": {
      "regex": "^_",
      "reserved": [
        "__webpack_public_path__",
        "__esModule",
        "_reactFragment"
      ]
    }
  }
}
```

```json
{
  "name": "my-library",
  "source": "src/index.js",
  "main": "dist/index.js",
  "mangle": {
    "properties": {
      "regex": "^_"
    }
  }
}
```

--------------------------------

### Configure CSS Modules Behavior

Source: https://context7.com/developit/microbundle/llms.txt

CSS Modules are enabled by default for files ending in `.module.css`. Use the --css-modules flag to enable for all CSS files, disable entirely, or specify a custom scope name pattern.

```css
/* src/button.module.css */
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
}

.primary {
  background: green;
}
```

```javascript
// src/index.js
import styles from './button.module.css';

export function Button({ primary, children }) {
  const className = primary
    ? `${styles.button} ${styles.primary}`
    : styles.button;
  return `<button class="${className}">${children}</button>`;
}
```

```bash
microbundle
```

```bash
microbundle --css-modules true
```

```bash
microbundle --css-modules false
```

```bash
microbundle --css-modules "_[name]_[local]_[hash:base64:5]"
```

--------------------------------

### Basic CSS Imports and Processing

Source: https://context7.com/developit/microbundle/llms.txt

CSS files are automatically processed and minified. Use the --css flag to control whether CSS is output as external files or inlined as a string within the JavaScript bundle.

```javascript
// src/index.js - External CSS (default behavior)
import './styles.css'; // Generates minified .css file in output directory

export function MyComponent() {
  return '<div class="my-component">Hello</div>';
}
```

```bash
microbundle --css external
```

```bash
microbundle --css inline
```

```javascript
// With --css inline, CSS becomes a string
import css from './styles.css';
console.log(css); // The generated minified CSS string

// Inject into document
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
```

--------------------------------

### Alias Import Paths to Different Modules

Source: https://context7.com/developit/microbundle/llms.txt

The --alias flag allows you to map import paths to different modules during the bundling process. This is helpful for replacing libraries with alternatives or for managing internal module paths.

```bash
microbundle --alias react=preact/compat
```

```bash
microbundle --alias react=preact/compat,react-dom=preact/compat
```

```bash
microbundle --alias @utils=./src/utils,@components=./src/components
```

--------------------------------

### Override external dependencies

Source: https://context7.com/developit/microbundle/llms.txt

Use the --external flag to specify which dependencies should be excluded from the bundle.

```bash
microbundle --external react,react-dom
```

--------------------------------

### Map External Modules to Global Variables for UMD

Source: https://context7.com/developit/microbundle/llms.txt

Use the --globals flag to map external modules to specific global variable names when creating UMD builds. This is useful for libraries that expect certain globals to be present.

```bash
microbundle --globals react=React,jquery=$
```

```bash
microbundle --globals react=React,react-dom=ReactDOM,lodash=_
```

--------------------------------

### Keep a dependency external

Source: https://github.com/developit/microbundle/wiki/How-Microbundle-decides-which-dependencies-to-bundle

Add a dependency to 'dependencies' in package.json to ensure it remains an external import in the generated bundle.

```jsonc
{
  "main": "dist/index.js",
  "module": "dist/index.module.js",
  "scripts": {
    "build": "microbundle my-lib.js"
  },
  "dependencies": {
    "lib-to-bundle": "^1.2.3"  // will be require()'d by dist/index.js
  }
}
```

--------------------------------

### Custom Property Name Mappings

Source: https://github.com/developit/microbundle/wiki/mangle.json

Override default mangled property names to ensure deterministic output. This configuration maps specific properties to custom short names.

```json
{
  "mangle": {
    "regex": "^_"
  },
  "props": {
    "props": {
      "$_somePrivateProperty": "__p",
      "$_backingInstance": "__b"
    }
  }
}
```

--------------------------------

### Configure Property Mangling

Source: https://github.com/developit/microbundle/blob/master/README.md

Define a regex pattern in mangle.json or package.json to rename internal object properties or class members for reduced bundle size.

```jsonc
{
	"mangle": {
		"regex": "^_"
	}
}
```

--------------------------------

### Reserved Property Names

Source: https://github.com/developit/microbundle/wiki/mangle.json

Specify property names to exclude from mangling. This prevents compression for properties that must retain their original names, like `__webpack_public_path__`.

```json
{
  "mangle": {
    "regex": "^_",
    "reserved": [
      "__webpack_public_path__"
    ]
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.