在 React 中包含使用 CDN 的外部庫
CDN 是內容交付網路的縮寫，它很有幫助，因為它可以在一秒鐘內在你的應用程式中提供數千個包。你可以將 CDN 連結視為使用頂級 React API 快速設定 JavaScript 環境的絕佳方式。
本文將討論包括使用 CDN 連結的外部庫以及在 React 中使用 CDN 的優缺點。
在 React 中包含使用 CDN 的外部庫
在 React 中構建應用程式時，你很可能會使用許多不同的包。僅 React 庫就可以讓你構建漂亮且動態的使用者介面，但它缺乏完整框架的一些基本功能，例如導航。
要開發功能齊全的應用程式，你必須包含其他庫，例如 react-router。
例如，lodash 是一個包，其中包含許多用於 Web 應用程式的不同 JavaScript 實用程式。要在我們的 Web 應用程式中使用它，我們必須找到 CDN 連結並將其放入 React 專案的根目錄 index.html 檔案中。
讓我們看一個例子。
<head>
.....
<script src="https://unpkg.com/lodash" async></script>
</head>
在 HTML 中，<script> 元素嵌入並使得 JavaScript 程式碼在應用程式結構中可用。一旦我們這樣做了，lodash 包就會在全域性 window 名稱空間中可用。
然後你可以通過 window 物件訪問包及其方法。
import "./styles.css";
export default function App() {
console.log(window._.random(1, 10));
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
在這種情況下，我們不會直接在檔案中匯入任何包。儘管如此，我們仍然可以從 lodash 包中訪問 .random() 方法，通常稱為 _。
這是唯一可能的，因為我們的 App 元件最終呈現在主 HTML 檔案中，其中我們在 <head> 標籤之間包含了 CDN 連結。
如果你檢視 CodeSandbox 上的程式碼，你會發現每次我們重新載入應用程式時，該方法都會記錄一個介於 1 和 10 之間的隨機數。因此，它可以正常工作。
替代方案：使用 npm 安裝依賴項
如前所述，CDN 連結可以方便地快速設定環境並立即使用包。但是，如果你正在構建一個嚴肅的應用程式，則應該使用 npm 安裝依賴項。
但是，npm 需要 import 語句來在每個專案檔案中包含包。你將需要一個類似模組捆綁器的 web 包來使用 import 語句。
要了解模組打包程式、載入程式以及 import 語句的轉譯方式，請閱讀官方 webpack 指南。
啟動專案時，請確保包含所有使用 CDN 連結或通過 npm 安裝的包。混合使用這兩種方法將使跟蹤應用程式中使用的所有依賴項變得具有挑戰性。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn