Access package without Installing it.

Did you know you can access your package without installing it?

Yes, you can, with the help of popular CDNs like unpkg and jsDelivr!

What is this?

Unpkg and jsDelivr are CDNs that host public npm packages. They allow browser-based apps to quickly access packages globally without needing a package manager or bundler.

How to Access?

• Unpkg: https://unpkg.com/package-name
• jsDelivr: https://cdn.jsdelivr.net/npm/package-name

How Does It Work?

1. You Publish to npm: Your package is uploaded to the npm public registry when you run npm publish.
2. CDNs Fetch from npm:
   • They detect new versions in the npm registry.
   • Fetch the package tarball and extract it.
   • Serve files based on fields like main, unpkg, or jsdelivr in package.json.
3. Custom Fields: Fields like unpkg and jsdelivr in package.json specify which file the CDN should serve. These fields are ignored by other tools unless explicitly supported.

Example: @monaco-editor/react

{
  "name": "@monaco-editor/react",
  "version": "4.4.6",
  "main": "lib/cjs/index.js",
  "unpkg": "lib/umd/monaco-react.min.js",
  "jsdelivr": "lib/umd/monaco-react.min.js"
}

unpkg and jsdelivr are custom fields not a standard fields and these can be ignored by other tools unless they explicitly recognize them. It is used to determine which file to serve when the package is requested via the CDN unpkg / jsdelivr.

Use Cases

1. Browser-Based Applications

• Use Case: Developers want to include your library directly in HTML files without using a package manager or bundler.

• Example:

  • A front-end developer wants to include @monaco-editor/react in their project without setting up npm, Webpack, or other build tools.
  • They can directly use:

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• Relevance:

  • This simplifies adoption for developers who aren't using modern JavaScript workflows.
  • Common for demo apps, prototypes, or small projects.

2. Fast, Global Delivery

• Use Case: Ensure your package is served quickly and reliably worldwide.
• Example:
  • A website using your library benefits from jsDelivr or Unpkg’s globally distributed edge servers, which reduce latency.
• Relevance:
  • Ideal for high-traffic applications or when performance is critical.

3. Avoiding Build Steps

• Use Case: Provide a ready-to-use version of your library for users who don't want to deal with transpilation or bundling.

• Example:

  • Your package provides a pre-bundled UMD or IIFE build. Developers can include it directly without setup:

     <script src="https://cdn.jsdelivr.net/npm/my-library"></script>
  

• Relevance:

  • Great for rapid development environments or non-Node.js ecosystems.

4. Embedding Libraries in Static Sites

• Use Case: Simplify inclusion of libraries in static sites without complex setups.

• Example:

  • A blogger wants to use a Markdown renderer in their blog:

     <script src="https://cdn.jsdelivr.net/npm/marked@latest"></script>
  

• Relevance:

  • Perfect for small-scale use where installing and managing dependencies is overkill.

5. Legacy Environments

• Use Case: Enable users working in environments without modern build tools or Node.js.
• Example:
  • A developer maintaining a legacy application can use your library via CDN links rather than modifying their outdated setup.
• Relevance:
  • Supports legacy apps or non-modern JavaScript environments.

6. Demos and Sandboxes

• Use Case: Provide quick access to your library for online demos, sandboxes, or testing platforms.

• Example:

  • On platforms like CodePen or JSFiddle, you can directly load your library:

     <script src="https://unpkg.com/my-library@1.0.0"></script>
  

• Relevance:

  • Simplifies showcasing and experimenting with your library.

7. Version-Specific Loading

• Use Case: Allow users to load specific versions of your library without worrying about npm install commands.

• Example:

  • A user wants version 2.3.0:

     <script src="https://cdn.jsdelivr.net/npm/my-library@2.3.0"></script>
  

• Relevance:

  • Helps developers test or lock their projects to a specific version without bundling tools.

8. Sharing Packages in Multi-Framework Projects

• Use Case: A package is shared between projects using different ecosystems (React, Angular, Vue, etc.), and CDN hosting avoids bundling conflicts.

• Example:

  • A design system library (my-ui-library) is hosted on a CDN, and teams can include it directly in multiple projects:

     <script src="https://cdn.jsdelivr.net/npm/my-ui-library"></script>
  

• Relevance:

  • Promotes reuse without dependency management overhead.

9. Backup or Alternative to npm

• Use Case: Provide an alternative way to access your package if npm registry issues arise.
• Example:
  • jsDelivr can serve packages even if npm is temporarily down.
• Relevance:
  • Adds redundancy and reliability.

When to Avoid CDN Hosting

• Modern Applications:
  • If most of your users use Node.js or modern bundlers (Webpack, Rollup, etc.), they likely don’t need a CDN.
• Package Size:
  • Large libraries served via CDN may increase browser load times.
• Version Conflicts:
  • If multiple versions of your library might load simultaneously, it could lead to unexpected behavior.

Summary of Use Cases

CDN hosting is a great complement to npm distribution, particularly for web-focused libraries. If you have specific requirements, feel free to ask!