fix: provide browser versions independent from module system

Probably will fix #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

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.json

@@ -18,7 +18,15 @@
   },
   "sideEffects": false,
   "main": "dist/index.js",
-  "module": "dist/esm-browser/index.js",
+  "module": "dist/esm/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/md5.js": "./dist/esm/md5-browser.js",
+    "./dist/esm/rng.js": "./dist/esm/rng-browser.js",
+    "./dist/esm/sha1.js": "./dist/esm/sha1-browser.js"
+  },
   "files": [
     "CHANGELOG.md",
     "CONTRIBUTING.md",
@@ -36,6 +44,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",

rollup.config.js

@@ -1,15 +1,16 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 
 function chunk(input, name) {
   return {
-    input: `dist/esm-browser/${input}.js`,
+    input: `dist/esm/${input}.js`,
     output: {
       file: `dist/umd/${name}.min.js`,
       format: 'umd',
       name,
       compact: true,
     },
-    plugins: [terser()],
+    plugins: [nodeResolve({ browser: true }), terser()],
   };
 }
 

scripts/build.sh

@@ -14,21 +14,12 @@ 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
-babel --env-name esm src --source-root src --out-dir "$DIR/esm-browser" --copy-files --quiet
+# Transpile ESM versions of files
+babel --env-name esm src --source-root src --out-dir "$DIR/esm" --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"
-
-for FILE in "$DIR"/esm-browser/*-browser.js
-do
-    echo "Replacing node-specific file for esm-browser: $FILE"
-    mv "$FILE" "${FILE/-browser.js/.js}"
-done
-
-echo "Removing browser-specific files from esm-node"
-rm -f "$DIR"/*-browser.js
+rm -rf "$DIR/esm/bin"
+rm -rf "$DIR/esm/uuid-bin.js"
 
 # UMD Build
 mkdir "$DIR/umd"