访问包而不安装它。

您知道无需安装即可访问您的软件包吗？

是的，您可以，借助 unpkg 和 jsDelivr 等流行 CDN！

这是什么？

Unpkg 和 jsDelivr 是托管公共 npm 包的 CDN。它们允许基于浏览器的应用程序在全球范围内快速访问包，而无需包管理器或捆绑器。

如何访问？

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

它是如何运作的？

1. 您发布到 npm： 当您运行 npmpublish 时，您的包将上传到 npm 公共注册表。
2. CDN 从 npm 获取：
   • 它们在 npm 注册表中检测新版本。
   • 获取包 tarball 并解压。
   • 根据 package.json 中的 main、unpkg 或 jsdelivr 等字段提供文件。
3. 自定义字段： package.json 中的 unpkg 和 jsdelivr 等字段指定 CDN 应提供哪个文件。除非明确支持，否则其他工具会忽略这些字段。

示例：@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 和 jsdelivr 是自定义字段，而不是标准字段，这些可以被其他工具忽略，除非它们明确识别它们。它用于确定当通过 CDN unpkg / jsdelivr 请求包时要提供哪个文件。

使用案例

1.基于浏览器的应用程序

• 用例：开发人员希望将您的库直接包含在 HTML 文件中，而不使用包管理器或捆绑器。

• 示例：

  • 前端开发人员希望在他们的项目中包含 @monaco-editor/react，而不需要设置 npm、Webpack 或其他构建工具。
  • 他们可以直接使用：

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

• 相关性：

  • 这简化了不使用现代 JavaScript 工作流程的开发人员的采用过程。
  • 常见于演示应用程序、原型或小型项目。

---

2.快速的全球交付

• 用例：确保您的包裹在全球范围内快速可靠地送达。
• 示例：
  • 使用您的库的网站可以受益于 jsDelivr 或 Unpkg 的全球分布式边缘服务器，从而减少延迟。
• 相关性：
  • 非常适合高流量应用程序或性能至关重要的情况。

---

3.避免构建步骤

• 用例：为不想处理转译或捆绑的用户提供库的即用版本。

• 示例：

  • 您的软件包提供了预捆绑的 UMD 或 IIFE 版本。开发者可以直接包含它，无需设置：

  {
    "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"
  }
  

• 相关性：

  • 非常适合快速开发环境或非 Node.js 生态系统。

---

4.在静态站点中嵌入库

• 用例：简化静态站点中库的包含，无需复杂的设置。

• 示例：

  • 一位博主想要在他们的博客中使用 Markdown 渲染器：

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

• 相关性：

  • 非常适合小规模使用，在这种情况下安装和管理依赖项是多余的。

---

5.旧环境

• 用例：使用户能够在没有现代构建工具或 Node.js 的环境中工作。
• 示例：
  • 维护遗留应用程序的开发人员可以通过 CDN 链接使用您的库，而不是修改他们过时的设置。
• 相关性：
  • 支持旧版应用程序或非现代 JavaScript 环境。

---

6.演示和沙箱

• 用例：提供对在线演示、沙箱或测试平台的库的快速访问。

• 示例：

  • 在CodePen或JSFiddle等平台上，您可以直接加载您的库：

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

• 相关性：

  • 简化库的展示和实验。

---

7.特定于版本的加载

• 用例：允许用户加载库的特定版本，而不必担心 npm install 命令。

• 示例：

  • 用户想要 2.3.0 版本：

  {
    "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"
  }
  

• 相关性：

  • 帮助开发人员测试或将其项目锁定到特定版本，而无需捆绑工具。

---

8.在多框架项目中共享包

• 用例：使用不同生态系统（React、Angular、Vue 等）的项目之间共享包，CDN 托管避免了捆绑冲突。

• 示例：

  • 设计系统库（my-ui-library）托管在 CDN 上，团队可以将其直接包含在多个项目中：

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

• 相关性：

  • 促进重用，无需依赖管理开销。

---

9. npm 的备份或替代方案

• 用例：如果出现 npm 注册表问题，提供访问包的替代方法。
• 示例：
  • 即使 npm 暂时关闭，jsDelivr 也可以提供包。
• 相关性：
  • 增加冗余和可靠性。

---

何时避免 CDN 托管

• 现代应用：
  • 如果大多数用户使用 Node.js 或现代捆绑器（Webpack、Rollup 等），他们可能不需要 CDN。
• 包装尺寸：
  • 通过 CDN 提供服务的大型库可能会增加浏览器加载时间。
• 版本冲突：
  • 如果您的库的多个版本可能同时加载，则可能会导致意外行为。

---

用例摘要

Use Case	Ideal For	Example Usage
Browser Inclusion	Simplicity
Fast Delivery	High-traffic apps	Use of jsDelivr or Unpkg for caching
Avoiding Build Steps	Prototypes or small projects	UMD or IIFE pre-bundled files
Embedding in Static Sites	Blogs, lightweight sites	Markdown renderer, chart libraries
Demos and Sandboxes	Quick testing	Platforms like CodePen or JSFiddle
Sharing Across Frameworks	Multi-framework apps	Shared libraries or design systems

CDN 托管是对 npm 分发的一个很好的补充，特别是对于以 Web 为中心的库。如果您有具体要求，请随时询问！

以上是访问包而不安装它。的详细内容。更多信息请关注PHP中文网其他相关文章！