Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: use "exports" key in all examples #794

Merged
merged 3 commits into from
May 5, 2021
Merged

docs: use "exports" key in all examples #794

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5a2fbc
docs: use "exports" key in all examples
ludofischer Jan 31, 2021
fdf3602
docs: add CommonJS bundle to exports
ludofischer Feb 14, 2021
07ce5b8
docs: consolidate `package.json` samples
ludofischer Feb 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 13 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,18 +143,25 @@ Microbundle includes two commands - `build` (the default) and `watch`. Neither r

### `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:
Unless overridden via the command line, microbundle uses the `source` property in your `package.json` to locate the input file, and the `main`, `umd:main`, `module` and `exports` properties to figure out where it should place each generated bundle:

```js

```
{
"source": "src/index.js", // input
"main": "dist/my-library.js", // output
"scripts": {
"build": "microbundle"
"source": "src/index.js", // input
"main": "dist/foo.js", // CommonJS output bundle
"umd:main": "dist/foo.umd.js", // UMD output bundle
"module": "dist/foo.m.js", // ES Modules output bundle
"exports": {
"require": "./dist/foo.js", // CommonJS output bundle
"default": "./dist/foo.modern.js", // Modern ES Modules output bundle
}
"types": "dist/foo.d.ts" // TypeScript typings directory
}
```

When deciding which bundle to use, Node.js 12+ and webpack 5+ will prefer the `exports` property, while older Node.js releases use the `main` property, and other bundlers prefer the `module` field. For more information about the meaning of the different properties, refer to the [Node.js documentation](https://nodejs.org/api/packages.html#packages_package_entry_points).

For UMD builds, microbundle will use a camelCase version of the `name` field in your `package.json` as export name. This can be customized using an `"amdName"` key in your `package.json` or the `--name` command line argument.

### `microbundle watch`
Expand Down Expand Up @@ -195,20 +202,6 @@ This can be customized by passing the command line argument `--css-modules "[nam
| true | import './my-file.css'; | :white_check_mark: |
| true | import './my-file.module.css'; | :white_check_mark: |

### Specifying builds in `package.json`

Microbundle uses the fields from your `package.json` to figure out where it should place each generated bundle:

```
{
"main": "dist/foo.js", // CommonJS bundle
"umd:main": "dist/foo.umd.js", // UMD bundle
"module": "dist/foo.m.js", // ES Modules bundle
"esmodule": "dist/foo.modern.js", // Modern bundle
"types": "dist/foo.d.ts" // TypeScript typings directory
}
```

### Building a single bundle with a fixed output name

By default Microbundle outputs multiple bundles, one bundle per format. A single bundle with a fixed output name can be built like this:
Expand Down