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

* docs: use "exports" key in all examples

Replace a leftover 'esmodule' key with the current recommendation.

* docs: add CommonJS bundle to exports

Co-authored-by: Jason Miller <[email protected]>

* docs: consolidate `package.json` samples

Merge the two microbundle build examples and refer
to Node.js docs for more information on the different fields.

Co-authored-by: Jason Miller <[email protected]>

README.md

@@ -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`
@@ -197,20 +204,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: