首頁 > web前端 > js教程 > 訪問包而不安裝它。

訪問包而不安裝它。

Patricia Arquette
發布: 2024-12-06 15:59:12
原創
624 人瀏覽過

Access package without Installing it.

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

是的,您可以,借助 unpkgjsDelivr 等流行 CDN!

這是什麼?

UnpkgjsDelivr 是託管公共 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板