訪問包而不安裝它。

您知道無需安裝即可存取您的軟體包嗎？

是的，您可以，借助 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中文網其他相關文章！