umd folder included in the released version i.e.
UMD modules are capable of working everywhere, be it in the client, on the server, or elsewhere.
UNPKG is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
packageis the name of npm package
versionis a version of the package. If you omit the version from URL, unpkg will automatically pick the latest version of underlying package
<script crossorigin src="https://unpkg.com/:package@:version/"></script>
To load an entire package we need to directly specify the package name followed by URL
https://unpkg.com/. Following is the example of React npm package
By default unkpg will automatically redirect above URL to latest version of package. To load specific version, we can specify the version after package name separated by @. For example:
You may also use a semver range or a tag instead of a fixed version number, or omit the version/tag entirely to use the latest tag.
Loading single file is very much similar to any package. We need to append the file name in unkpg URL as follows
Once the package is included in webpage using script tag, the global variables exposed by package can be directly invoked inside
<script> tags to perform certain operations.
Let’s understand this with following example where we are including the
Once the package is loaded we can call
ReactDOM.render() method to dynamically inject element in a DOM node that is having
<html> <head> <title>Load NPM package in browser</title> <script crossorigin src='https://unpkg.com/react@16/umd/react.production.min.js' ></script> <script crossorigin src='https://unpkg.com/react-dom@16/umd/react-dom.production.min.js' ></script> </head> <body> <div id='root'></div> <script> ReactDOM.render(React.createElement("h1", null, "Dynamic tag created by React"), document.querySelector("#root")) </script> </body> </html>