在 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