工具用的順手嗎?
你的回饋能幫助我們做得更好
快速查詢常用JS庫的CDN連結,一鍵複製引入程式碼,提升前端開發效率。
按內建固定版本和路徑生成 jsDelivr、unpkg 或 esm.sh 的網址與標籤;不查詢最新版,也未驗證每個資源當前可訪問。使用前檢查路徑、版本、授權及瀏覽器載入結果。 參考來源
https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js<script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js"></script>import * as React from "https://esm.sh/react@18.3.1";概覽
了解工具能解決的問題、計算或處理邏輯,以及資料邊界。
這個頁面協助你在一份預先整理的前端函式庫清單中搜尋,再依選定項目產生 jsDelivr、unpkg 或 esm.sh 的資源網址與程式片段。CDN 是透過網路提供靜態檔案的服務;網址中的套件名稱、版本與檔案路徑會決定請求哪個資源。頁面不會連線查詢 npm 的全部套件,也不會替你搜尋最新版本。
清單涵蓋框架、介面、圖表、工具函式、網路請求、動畫、編輯器與媒體等類別。每筆資料會顯示套件名稱、固定版本、分類、標籤,以及部分項目的全域變數名稱。使用前應先確認它與專案所需的版本和檔案格式相符。
jsDelivr 與 unpkg 的檔案網址會帶入清單中的套件名稱、版本和 JavaScript 檔案路徑;頁面會據此提供直接網址及 <script src="…"> 標籤。若該項目另有 CSS 路徑,這兩種服務也會提供 <link rel="stylesheet"> 片段。沒有 CSS 路徑的套件不會出現樣式表片段。
esm.sh 會以套件與固定版本產生模組網址。頁面同時列出 ESM 的 import 範例;這段匯入網址固定使用 esm.sh,不會隨上方服務分頁改變。選擇 esm.sh 時,頁面不另產生 CSS 片段。jsDelivr、unpkg 和 esm.sh 的網址格式可參考各服務文件;實際回應仍須由你的環境測試。
指南
依步驟完成操作,並透過範例核對輸入與結果。
輸入函式庫名稱、套件名稱、版本、標籤或用途關鍵字,也可先切換類別。搜尋只會篩選頁面內建項目;若沒有結果,試試套件的正式名稱或清除分類條件。
選取項目後,確認顯示的 package 名稱和版本符合專案預期。若介面列出全域變數或 npm 安裝命令,也可用來辨認套件;這些資訊不代表頁面已檢查該版是否最新或仍受維護。
切換 jsDelivr、unpkg 或 esm.sh,查看網址、script 標籤、可用的 CSS 標籤與 ESM import,使用對應的複製按鈕。傳統 script 與模組 import 的執行環境不同,請按專案設定選用。
把片段放在合適的 HTML 或模組檔案中,重新載入頁面並檢查瀏覽器開發者工具的網路請求與主控台。確認資源成功載入、匯出名稱正確,且相依函式庫的載入順序符合需求。
情境
查看這項工具在不同工作與生活流程中的用法。
想在單一 HTML 頁面試用圖表、介面或日期函式庫時,可先從清單挑選項目並複製 script 或模組範例。把程式片段放入自己的頁面後,再確認載入順序和需要的 CSS,適合快速驗證想法。
若舊頁面以 HTML 直接載入外部檔案,可用清單產生明確版本與檔案路徑的引用片段,方便與現有標記比對。正式替換前仍要確認舊程式碼依賴的全域變數、套件功能和版本相容性。
問答
集中解答常見疑問與容易混淆的問題。
搜尋範圍是頁面內建的函式庫項目,不是 npm 全站索引。清單未收錄時,搜尋不會自動補上資料;你需要自行查證套件的正式名稱、版本和檔案路徑。
不一定。清單使用已設定的固定版本,不會即時比較套件發布資訊。若專案要求特定版本,請以專案鎖定檔或維護者發布紀錄核對後再使用。
此頁在 esm.sh 分頁不產生獨立 CSS 標籤;另外只有資料中設定 CSS 檔案路徑的項目才會在 jsDelivr 或 unpkg 分頁顯示樣式片段。
不行。靜態 import 語句需要放在 JavaScript 模組環境,例如標記為 type="module" 的 script 或專案模組檔案。一般傳統 script 請選用頁面提供的 script 標籤形式,並依套件文件確認用法。
須知
使用前了解適用範圍、結果限制與必要提醒。
這個頁面按內建的固定版本和路徑組合網址,不會實際請求每個檔案來確認它現在能否下載,也不會檢查套件授權、漏洞、瀏覽器相容性或你的專案是否能使用該匯出形式。服務商可能有不同的檔案解析與模組處理方式;看到一段格式正確的 URL,不等於資源一定存在或程式能正常執行。
將外部指令碼加入網站前,請依維護流程檢查來源、套件版本、檔案路徑和授權條款,並在實際部署環境測試。載入外部程式碼也會受網路或服務狀態影響;正式環境是否採用 CDN、自行託管或其他依賴管理方式,應依你的穩定性與安全要求決定。
推薦
查找相關工具、專題與可用的 API 能力。