Skip to main content

How to use a CDN to access your npm module

Submitted by daniel on

UNPKG

unpkg is an open source project built and maintained by Michael Jackson and 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 eg.

unpkg.com/:package@:version/:file

Examples

// Using a fixed version:
unpkg.com/react@16.7.0/umd/react.production.min.js
unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js

// You may also use a semantic version range or a tag instead of a fixed version 
// number, or omit the version/tag entirely to use the latest tag.
unpkg.com/react@^16/umd/react.production.min.js
unpkg.com/react/umd/react.production.min.js

// If you omit the file path (i.e. use a “bare” URL), unpkg will serve the file // specified by the unpkg field in package.json, or fall back to main.
unpkg.com/jquery
unpkg.com/three

// Append a / at the end of a URL to view a listing of all the files in a 
// package.
unpkg.com/react/
unpkg.com/react-router/

 

jsdelivr

jsDelivr is another free CDN (Content Delivery Network) for open source files. They are also tightly integrated with Github and NPM and provide a reliable CDN service to almost every open source project out there.  

Here are a few commands to see how it works:

// load any project hosted on npm
https://cdn.jsdelivr.net/npm/package@version/file

// load jQuery v3.2.1
https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js

// use a version range instead of a specific version
https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/npm/jquery@3.2.1/src/core.min.js

// omit the file path to get the default file
https://cdn.jsdelivr.net/npm/jquery@3.2

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/npm/jquery/

 


 

 

Tags:

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.