From 4e75adf435196f28e3fbbe0185d654b5ded7ca2c Mon Sep 17 00:00:00 2001 From: Christoph Tavan Date: Mon, 27 Jan 2020 23:20:24 +0100 Subject: [PATCH] feat: add UMD build to npm package (#357) Fixes #345. --- README.md | 26 +++++++++ README_js.md | 26 +++++++++ examples/browser-umd/README.md | 8 +++ examples/browser-umd/example.html | 9 +++ examples/browser-umd/example.js | 41 ++++++++++++++ examples/browser-umd/package-lock.json | 11 ++++ examples/browser-umd/package.json | 12 ++++ package-lock.json | 76 ++++++++++++++++++++++++++ package.json | 2 + rollup.config.js | 22 ++++++++ scripts/build.sh | 4 ++ 11 files changed, 237 insertions(+) create mode 100644 examples/browser-umd/README.md create mode 100644 examples/browser-umd/example.html create mode 100644 examples/browser-umd/example.js create mode 100644 examples/browser-umd/package-lock.json create mode 100644 examples/browser-umd/package.json create mode 100644 rollup.config.js diff --git a/README.md b/README.md index f405894f..6ed6498d 100644 --- 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 + + +``` + +or + +```html + + +``` + +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) \ No newline at end of file diff --git a/README_js.md b/README_js.md index 504d5e57..fd7086dc 100644 --- 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 + + +``` + +or + +```html + + +``` + +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 new file mode 100644 index 00000000..8da3cbcb --- /dev/null +++ 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 new file mode 100644 index 00000000..a509e31f --- /dev/null +++ b/examples/browser-umd/example.html @@ -0,0 +1,9 @@ + +UUID UMD example +

Please open the Developer Console to view output

+ + + + + + diff --git a/examples/browser-umd/example.js b/examples/browser-umd/example.js new file mode 100644 index 00000000..81a622cd --- /dev/null +++ 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 new file mode 100644 index 00000000..00f7bb6b --- /dev/null +++ b/examples/browser-umd/package-lock.json @@ -0,0 +1,11 @@ +{ + "name": "uuid-example-browser-umd", + "version": "0.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "uuid": { + "version": "file:../../.local" + } + } +} diff --git a/examples/browser-umd/package.json b/examples/browser-umd/package.json new file mode 100644 index 00000000..88b2fade --- /dev/null +++ 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 index ce3e41e5..5af414a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3107,6 +3107,12 @@ "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", "dev": true }, + "@types/estree": { + "version": "0.0.42", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.42.tgz", + "integrity": "sha512-K1DPVvnBCPxzD+G51/cxVIoc2X8uUVl1zpJeE6iKcgHMj4+tbat5Xu4TjV7v2QSDbIeAfLi2hIk+u2+s0MlpUQ==", + "dev": true + }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -3132,6 +3138,12 @@ "@types/istanbul-lib-report": "*" } }, + "@types/node": { + "version": "13.5.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.0.tgz", + "integrity": "sha512-Onhn+z72D2O2Pb2ql2xukJ55rglumsVo1H6Fmyi8mlU9SvKdBk/pUSUAiBY/d9bAOF7VVWajX3sths/+g6ZiAQ==", + "dev": true + }, "@types/normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz", @@ -5319,6 +5331,12 @@ "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", "dev": true }, + "estree-walker": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", + "dev": true + }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -10468,6 +10486,39 @@ "glob": "^7.1.3" } }, + "rollup": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.30.0.tgz", + "integrity": "sha512-ANcmfaSQwpcJtZUTA0ZMNBtFcQ1B4A5FldlNqEK0WdWm9sHSKu93ffa2KV1ux8HA/yKIV/ZARV28m7rNdXJgEw==", + "dev": true, + "requires": { + "@types/estree": "*", + "@types/node": "*", + "acorn": "^7.1.0" + } + }, + "rollup-plugin-terser": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.2.0.tgz", + "integrity": "sha512-jQI+nYhtDBc9HFRBz8iGttQg7li9klmzR62RG2W2nN6hJ/FI2K2ItYQ7kJ7/zn+vs+BP1AEccmVRjRN989I+Nw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.5.5", + "jest-worker": "^24.9.0", + "rollup-pluginutils": "^2.8.2", + "serialize-javascript": "^2.1.2", + "terser": "^4.6.2" + } + }, + "rollup-pluginutils": { + "version": "2.8.2", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", + "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", + "dev": true, + "requires": { + "estree-walker": "^0.6.1" + } + }, "rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", @@ -10593,6 +10644,12 @@ "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=", "dev": true }, + "serialize-javascript": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", + "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==", + "dev": true + }, "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", @@ -11464,6 +11521,25 @@ } } }, + "terser": { + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.3.tgz", + "integrity": "sha512-Lw+ieAXmY69d09IIc/yqeBqXpEQIpDGZqT34ui1QWXIUpR2RjbqEkT8X7Lgex19hslSqcWM5iMN2kM11eMsESQ==", + "dev": true, + "requires": { + "commander": "^2.20.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + } + } + }, "test-exclude": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz", diff --git a/package.json b/package.json index e11348aa..99b5b833 100644 --- 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 new file mode 100644 index 00000000..b0248471 --- /dev/null +++ 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 index 2b122faa..003a63f7 100755 --- 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