如何使用 JSDelivr
從 npm 和 GitHub 輕鬆下載 JavaScript 庫
將庫添加到項目中最適合新手的方法是：
- 搜索圖書館
- 查找源文件
- 複製源文件
- 將您複製的內容粘貼到項目中。
這行得通，但這是一個痛苦的過程。如果你使用像 JSDelivr 這樣的 CDN 會更容易。
什麼是 CDN？
CDN 代表內容分發網絡。它的主要目的是讓用戶更快地下載文件。如果您想知道是否應該使用 CDN，請閱讀 Fastly 的這篇文章。
CDNS 通過將數據中心分佈在世界各地，讓用戶可以更快地下載文件。當瀏覽器看到 CDN 鏈接時，他們將從離用戶最近的數據中心提供庫。這就是 CDN 的工作原理。
什麼是 JSDelivr？
JSDelivr 是一種特殊的 CDN。它旨在讓用戶下載託管在 npm 和 Github 上的 JavaScript 庫。 （如果 Wordpress 插件託管在 Wordpress.org 上，您也可以加載它們）。
如果您使用 JSDelivr（或任何其他提供 JavaScript 庫的 CDN），則無需將源文件複製粘貼到您的項目中。您可以使用這樣的鏈接：
<script src="https://cdn.jsdelivr.net/npm/package-name"><;/script>
JSDelivr 允許您指定要下載的庫的版本。如果要指定版本，請在 @ 後添加版本號 ，像這樣：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>我如何使用 JSDelivr
我使用 JSDelivr 更像是一個包管理器 因為 JSDelivr 允許您指定庫的版本。我可以通過更改數字來升級或降級庫。無需將原始源代碼複製粘貼到我的項目中。
然而，我現在很少使用 JSDelivr 因為我已經有一個使用 Webpack 的構建過程。 Webpack 讓你 require 庫到前端 JavaScript。它讓你可以使用 npm 作為包管理器。
我只將 JSDelivr 用於以下項目：
- 需要一個庫
- 該庫存在於 JSDelivr（或其他 CDN）上
- 該項目未安裝 Webpack（或類似工具）
Learn JavaScript 中的 20 個組件就是此類項目的一個示例。
原因如下。
註冊 Learn JavaScript 的學生正在嘗試學習 JavaScript。我不想讓他們學習 Webpack 來分散他們的注意力。
相反，我想幫助他們專注於他們來這裡的目的——學習 JavaScript。我通過消除我們共同構建的項目的複雜性來做到這一點。我將所有內容都剝離為普通的舊 HTML、CSS 和 JavaScript。
我們已經討論了 JSDelivr 是什麼，為什麼使用它，以及何時使用它。現在讓我們深入了解它的使用細節。
在本文的其餘部分，我們將使用名為 zl-fetch 的庫作為示例。
安裝庫
要安裝一個庫，你需要添加一個 <scri pt> 標籤指向 JSDelivr 上的庫。您可以根據自己的喜好從 npm 或 Github 加載庫。
我傾向於從 npm 加載庫。
<script src="https://cdn.jsdelivr.net/npm/package-name"><;/script>
您需要更改 package-name 到您正在安裝的庫的名稱。在這種情況下，它是 zl-fetch .
<script src="https://cdn.jsdelivr.net/npm/zl-fetch"><;/script>如果不確定庫的名稱，可以在 npm 上搜索，或者直接在 JSDelivr 上搜索。
指定版本
默認情況下，JSDelivr 會下載最新版本的庫。
我不建議您使用最新版本，因為作者可能會更新他們的庫。如果他們更新他們的庫，您的代碼可能會中斷。
您總是想指定一個版本號。 您可以通過添加 @ 來添加版本號 , 包名後面跟著版本號，像這樣：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>版本號遵循 Semver 格式。 您可以通過查看 Github 上的可用標籤來判斷可用的版本。
在我們的例子中，當前版本的 zl-fetch 是 2.1.9 ：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>加載特定文件
JSDelivr 依賴於作者為上述格式指定一個默認文件。 如果沒有指定默認文件，則需要指向正確的文件。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/path-to-file"><;/script>有兩種方法可以知道哪些文件可用。
首先，您可以在 JSDelivr 上搜索該包。您將看到可以指向的文件和文件夾列表：
其次，如果您了解 npm，您可以使用 npm 將軟件包安裝在您計算機上的某個位置。然後使用 Finder（或資源管理器）瀏覽文件。
在這種情況下，假設沒有指定默認文件，我們想要 dist/index.js 文件。下面是你要寫的：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"><;/script>加載縮小版
縮小的文件通常更小。用戶將能夠比未壓縮文件更快地下載壓縮文件。
如果您使用 .min.js，JSDelivr 會自動縮小文件 擴展名。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"><;/script>結束
我希望這篇文章能讓你對 JSDelivr 能做什麼有一個很好的了解。
謝謝閱讀。這篇文章對你有幫助嗎？如果是這樣，我希望你考慮分享它。你可能會幫助別人。非常感謝！
這篇文章最初發表在我的博客。
如果您想獲得更多文章來幫助您成為更好的前端開發人員，請訂閱我的時事通訊。
