fix: provide browser versions independent from module system (#380)

Fixes #378

Currently main field is used for node and module for browser build. This
is not entierly correct. Webpack can be used to build node apps. Though
module is always preferred over main. For browser versions there is a
special field.

In this diff I added esm support for both node and browser.
rollup-plugin-node-resolve look at browser field as well and prefer it
to bundle umd.

https://webpack.js.org/configuration/resolve/#resolvemainfields
https://github.com/rollup/plugins/tree/master/packages/node-resolve#browser
https://github.com/defunctzombie/package-browser-field-spec

Author: TrySound

examples/browser-rollup/rollup.config.js

@@ -1,7 +1,7 @@
 const resolve = require('rollup-plugin-node-resolve');
 const { terser } = require('rollup-plugin-terser');
 
-const plugins = [resolve(), terser()];
+const plugins = [resolve({ browser: true }), terser()];
 module.exports = [
   {
     input: './example-all.js',

package-lock.json

@@ -18,7 +18,13 @@
   },
   "sideEffects": false,
   "main": "dist/index.js",
-  "module": "dist/esm-browser/index.js",
+  "module": "dist/esm-node/index.js",
+  "browser": {
+    "./dist/md5.js": "./dist/md5-browser.js",
+    "./dist/rng.js": "./dist/rng-browser.js",
+    "./dist/sha1.js": "./dist/sha1-browser.js",
+    "./dist/esm-node/index.js": "./dist/esm-browser/index.js"
+  },
   "files": [
     "CHANGELOG.md",
     "CONTRIBUTING.md",
@@ -36,6 +42,7 @@
     "@babel/preset-env": "7.8.4",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-conventional": "8.3.4",
+    "@rollup/plugin-node-resolve": "7.1.1",
     "babel-eslint": "10.0.3",
     "babel-plugin-add-module-exports": "1.0.2",
     "browserstack-local": "1.4.5",

package.json

@@ -1,3 +1,4 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 
 function chunk(input, name) {
@@ -9,7 +10,7 @@ function chunk(input, name) {
       name,
       compact: true,
     },
-    plugins: [terser()],
+    plugins: [nodeResolve({ browser: true }), terser()],
   };
 }
 

rollup.config.js

@@ -14,12 +14,17 @@ mkdir -p "$DIR"
 # Transpile CommonJS versions of files
 babel --env-name commonjs src --source-root src --out-dir "$DIR" --copy-files --quiet
 
-# Transpile ESM versions of files for the browser
+# Transpile ESM versions of files for browser
 babel --env-name esm src --source-root src --out-dir "$DIR/esm-browser" --copy-files --quiet
 
+# Transpile ESM versions of files for node
+babel --env-name esm src --source-root src --out-dir "$DIR/esm-node" --copy-files --quiet
+
 # No need to have the CLI files in the esm build
 rm -rf "$DIR/esm-browser/bin"
 rm -rf "$DIR/esm-browser/uuid-bin.js"
+rm -rf "$DIR/esm-node/bin"
+rm -rf "$DIR/esm-node/uuid-bin.js"
 
 for FILE in "$DIR"/esm-browser/*-browser.js
 do
@@ -28,7 +33,7 @@ do
 done
 
 echo "Removing browser-specific files from esm-node"
-rm -f "$DIR"/*-browser.js
+rm -f "$DIR"/esm-node/*-browser.js
 
 # UMD Build
 mkdir "$DIR/umd"