feat: add UMD build to npm package (#357)

Fixes #345.
uuidjs · Jan 27, 2020 · 4e75adf · 4e75adf
1 parent 55e895f
commit 4e75adf
Show file tree

Hide file tree

Showing 11 changed files with 237 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -317,5 +317,31 @@ $ uuid v1
 
 Type `uuid --help` for usage details
 
+## UMD Build
+
+If you want to load a minified UMD build directly in the browser you can use one of the popular npm
+CDNs:
+
+```html
+<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
+<script>
+  alert(uuidv4());
+</script>
+```
+
+or
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
+<script>
+  alert(uuidv4());
+</script>
+```
+
+Available bundles:
+
+- https://unpkg.com/uuid@latest/dist/umd/
+- https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/
+
 ----
 Markdown generated from [README_js.md](README_js.md) by [![RunMD Logo](http://i.imgur.com/h0FVyzU.png)](https://github.com/broofa/runmd)
diff --git a/README_js.md b/README_js.md
@@ -295,3 +295,29 @@ $ uuid v1
 ```
 
 Type `uuid --help` for usage details
+
+## UMD Build
+
+If you want to load a minified UMD build directly in the browser you can use one of the popular npm
+CDNs:
+
+```html
+<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
+<script>
+  alert(uuidv4());
+</script>
+```
+
+or
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
+<script>
+  alert(uuidv4());
+</script>
+```
+
+Available bundles:
+
+- https://unpkg.com/uuid@latest/dist/umd/
+- https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/
diff --git a/examples/browser-umd/README.md b/examples/browser-umd/README.md
@@ -0,0 +1,8 @@
+# UUID example Browser with UMD build
+
+```
+npm install
+npm start
+```
+
+Then navigate to `example.html`.
diff --git a/examples/browser-umd/example.html b/examples/browser-umd/example.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>UUID UMD example</title>
+<p>Please open the Developer Console to view output</p>
+<script src="./node_modules/uuid/dist/umd/uuid.min.js"></script>
+<script src="./node_modules/uuid/dist/umd/uuidv1.min.js"></script>
+<script src="./node_modules/uuid/dist/umd/uuidv3.min.js"></script>
+<script src="./node_modules/uuid/dist/umd/uuidv4.min.js"></script>
+<script src="./node_modules/uuid/dist/umd/uuidv5.min.js"></script>
+<script src="example.js"></script>
diff --git a/examples/browser-umd/example.js b/examples/browser-umd/example.js
@@ -0,0 +1,41 @@
+/* global uuid:false, uuidv1:false, uuidv3:false, uuidv4:false, uuidv5:false */
+console.log('uuidv1()', uuidv1());
+
+console.log('uuidv4()', uuidv4());
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
+console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
+console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
+
+console.log('Same with default export');
+
+console.log('uuid.v1()', uuid.v1());
+console.log('uuid.v4()', uuid.v4());
+console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
+console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
+console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
+console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
+console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
+console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));
diff --git a/examples/browser-umd/package-lock.json b/examples/browser-umd/package-lock.json
diff --git a/examples/browser-umd/package.json b/examples/browser-umd/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "uuid-example-browser-umd",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "true",
+    "start": "npm run build && npx http-server . -o"
+  },
+  "dependencies": {
+    "uuid": "file:../../.local"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,8 @@
     "lint-staged": "10.0.1",
     "npm-run-all": "4.1.5",
     "prettier": "1.19.1",
+    "rollup": "1.30.0",
+    "rollup-plugin-terser": "5.2.0",
     "runmd": "1.2.1",
     "selenium-webdriver": "3.6.0",
     "standard-version": "7.0.1"

diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,22 @@
+import { terser } from 'rollup-plugin-terser';
+
+function chunk(input, name) {
+  return {
+    input: `dist/esm-browser/${input}.js`,
+    output: {
+      file: `dist/umd/${name}.min.js`,
+      format: 'umd',
+      name,
+      compact: true,
+    },
+    plugins: [terser()],
+  };
+}
+
+export default [
+  chunk('index', 'uuid'),
+  chunk('v1', 'uuidv1'),
+  chunk('v3', 'uuidv3'),
+  chunk('v4', 'uuidv4'),
+  chunk('v5', 'uuidv5'),
+];
diff --git a/scripts/build.sh b/scripts/build.sh
@@ -29,3 +29,7 @@ done
 
 echo "Removing browser-specific files from esm-node"
 rm -f "$DIR"/*-browser.js
+
+# UMD Build
+mkdir "$DIR/umd"
+rollup -c