使用 Vite 创建一个新的 React 应用

虽然每个 React 应用都是独一无二的，但它们都从同一个起点开始：

• 你需要 index.js、App.js 和 App.css 文件。
• 你需要安装 React 和 React DOM。
• 你需要一个工具链才能使用 JSX
• 你需要一个打包工具，将所有 .js、.css 等文件打包成一个易于部署的文件。

这个基础至关重要！

但是，每次项目都要进行这样的设置，也很单调乏味。

我相信您更愿意把时间花在开发您应用独有的功能上，而 Vite 可以帮到您！

Vite（发音为“veet”，法语意为“快速”👀）能让你更高效。

只需一条命令和几秒钟时间，它就能为您生成以上所有样板代码以及更多内容！

此外，Vite：

• 启用热模块更换 (HMR) 功能，如下方动画所示。
• 让您轻松地将网站部署到互联网上。
• 帮助您导入和管理（可能包含敏感信息的）环境变量
• 它使你可以轻松地添加所需的技术，例如 TypeScript。

毋庸置疑，这是你开发者教程库中必不可少的一部分！

在本教程中，我将一步一步地向您展示：

• 如何使用 Vite 搭建 React 应用脚手架
• 如何启用 HMR，如上所示。
• 您将学习如何轻松地将应用程序部署到 Netlify。

为了给这篇✨终极✨文章画上句号，我将快速介绍一下Vite的一些高级功能。

Vite 和 Create React App 有什么区别？

如果你对 React 生态系统有所了解，你可能会认出 Create React App (CRA)，从表面上看，它与 Vite 非常相似。

由于 CRA 是由 React 自己开发和维护的，因此人们自然会想知道这两个工具相比如何。

加拿大税务局

大约七年前，React 设计并发布了 CRA，以帮助新开发者更容易地采用 React。

特别是，React 承认，要使用 JSX，你需要一些工具链，这使得 React 的学习曲线比 Vue 等其他框架陡峭得多，因为 Vue 不需要构建工具。

经验丰富的 React 开发者也使用并欣赏 CRA。不过，当项目变得更加复杂时，他们有时需要使用其他工具。

维特

自 CRA 设计以来的 7 年里，网络发生了根本性的变化。

根据 Vite 的文档，“随着我们构建的应用越来越复杂，我们需要处理的 JavaScript 代码量也在急剧增加。大型项目包含数千个模块的情况并不少见。”

由于构建 React 应用所需的依赖项变得如此庞大且相互关联，像 CRA 这样的工具有时启动起来可能需要过长的等待时间（有时甚至长达几分钟！），而更改可能需要几秒钟才能反映在浏览器中。

Vite 指出：“缓慢的反馈循环会极大地影响开发人员的生产力和幸福感。”

总而言之，React 应用变得越来越复杂，对我们的工具提出了更高的要求。与此同时，Web 浏览器也在不断发展。例如，最新的浏览器现在支持直接导入模块。

只有工具更新换代，我们才能从这些进步中受益。

这就是Vite发挥作用的地方。

Vite旨在充分利用生态系统的进步，不仅加快加载速度，还能提供即时、近乎神奇的开发者体验，正如您在上面的HMR视频中所看到的那样。

与 Create React App 不同，Vite 本身并不与 React 耦合。例如，您可以将 Vite 与 Vue 一起使用！

虽然你可能近期没有使用其他前端库的计划，但开源维护者在整个生态系统中联合起来，将使你受益，因为更多的功能会发布到版本中，错误也会更快地得到修复。

Vite入门指南

好了，现在你已经了解了 Vite 的所有信息（以及它与 CRA 的比较），让我们开始实际操作吧。

在本节中，我鼓励您跟随我们的步骤，快速安装 Vite 并搭建一个 React 项目。

我需要了解什么？要跟着教程操作，你需要安装 npm。如果你已经熟悉 npm 和命令行程序，那就更好了，但这并非必要条件！

如何运行 Vite

运行 Vite 的官方方法是使用 npm create 命令。打开你选择的终端，复制并运行以下命令：

npm create vite@latest

Vite 通过提出问题来简化您的生活。

首先，Vite 会询问您的项目名称。

然后，Vite 会想知道你使用的是 React 还是其他库（记住，Vite 并不局限于 React）。

在这里，我将我的项目命名为vite-app，并选择了react：

正如其名，Vite 将快速生成项目所需的所有脚手架以及一些方便的脚本来启用 HMR。

命令运行完毕后，进入你的文件夹并运行以下命令：

cd vite-app # Vite made a new folder named after your project
npm install
npm run dev

由于两者npm create都npm install依赖于您的互联网连接，因此可能需要一两分钟才能运行。

一切设置完毕后，看看 Vite 加载应用的速度有多快——仅仅 5 秒！这就是 Vite 的神奇之处。

接下来，在浏览器中打开localhost:5173 。您将看到 Vite 的默认模板：

当然，您肯定想进行一些更新。为什么不利用HMR功能呢？

什么是HMR？

过去，无论你对代码进行多么微小的更改，都需要重新构建整个应用程序并刷新页面。

为了一个小小的改动而重建整个应用程序太慢了。

刷新浏览器虽然不算太糟糕，但每次刷新都会丢失变量（也称为状态）中的所有值。

有时这样做是可取的，但在调整或迭代应用程序时，最好只改变呈现部分（尤其是样式）。

进入HMR！

HMR 能够智能地重建并重新加载应用程序中实际发生更改的部分。它速度很快，而且如果您愿意，还可以保留应用程序的状态。

HMR 可以节省您原本用于等待或输入数据以重建应用程序状态的时间。更重要的是，它还能减少操作摩擦，让您专注于任务，从而提高工作效率。

测试 Vite HMR

让我们来体验一下 Vite 内置的 HMR 功能。

1. 在编辑器中打开 src/App.js 文件。
2. 打开localhost:5173（最好在屏幕的另一侧打开，以便观察效果）
3. 计数器加一
4. 从 src/App.js 中删除第 10-17 行（本质上是从应用程序中移除两个徽标）。

如果您并排打开窗户，则应注意以下事项：

就我而言，我在移除徽标之前将计数器加到 12。

通常情况下，页面会重新加载，计数器会减半至默认值 0。HMR 在后台默默工作，只更改页面中代码实际发生变化的部分。

将应用部署到生产环境

Vite 让您可以轻松地将 React 网站部署到 Vercel、GitHub pages 或Netlify。

非常容易上手，我鼓励您跟随我们的步骤，将生成的应用程序部署到 Netlify。这​​样，当您进行更改时，更新线上网站就会容易得多。

我需要了解什么？要跟随本教程操作，您需要：一个 GitHub 帐户、本地安装的 Git 以及Git 的基本知识。

从 Git 开始

如今，持续部署这种做法很普遍，并且受到鼓励。

简单来说，当你将代码推送到 GitHub 的主分支时，像 Netlify 这样的服务会检测到这一操作，下载你的更新，并更新你的线上网站。Vite 可以帮助你实现这一点。

这听起来可能有点匪夷所思，所以我鼓励你亲自尝试一下。当你看到它实际运作时，就会更容易理解了。

首先，创建一个 GitHub 仓库并记下 URL。

接下来，运行以下命令（请务必将 `<repository URL>` 替换为您的仓库 URL！）：

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your_github_repository_url_goes_here>
git push -u origin main

在 Netlify 中导入项目

太棒了！您已经创建了一个 GitHub 代码库，并将 Vite 生成的代码上传到了那里。

接下来，我们将通知 Netlify 有关 GitHub 代码库的信息。

如果你还没有注册Netlify账号，现在正是注册一个免费账号的好时机。

登录后，点击“添加新站点”，然后点击“导入现有项目”。

您将看到以下页面：

点击GitHub。

GitHub 会询问您是否要授予 Netlify 查看和下载您的代码仓库的权限。您可以继续！

Netlify 获得与您的 GitHub 帐户交互的权限后，它将加载并列出您的所有仓库。选择您刚刚创建的仓库。您可能还记得，我的仓库名为 vite-app：

部署您的应用

选择代码仓库后，系统会提示您进行一些设置。Vite 了解 Netlify 的要求，并遵循默认设置，让您轻松上手。这意味着您无需在此处进行任何更改。只需点击“部署站点”即可。

部署完成后，您应该会看到此页面以及指向您网站的链接：

在我们的例子中，链接是elastic-gaufre-20030a.netlify.app :

下次有空的时候，可以看看网站设置。

在这里，您可以更改与您的网站相关的所有内容，甚至可以分配自定义域名！

当您更改代码并将其推送到 GitHub 时，Netlify 应该能够检测到这些更改并更新线上网站！

如需了解有关将 Vite 应用部署到其他托管提供商的更深入教程，您可以访问 Vite文档中的“部署站点”部分。

高级活力

Vite 的建立得益于两位巨人的贡献——即Rollup和EsBuild：

从宏观层面了解 Vite 的底层工作原理，有助于您利用一些高级功能。

插件

Vite 可以通过基于 Rollup 精心设计的插件界面的插件进行扩展，并提供一些 Vite 特有的额外选项。

这意味着 Vite 用户可以依靠成熟的 Rollup 插件生态系统，同时根据需要扩展开发服务器和 SSR 功能。

简而言之，插件通过与其他工具集成，并在 Vite 的基础上添加额外功能，使您的网站应用程序能够做得更多，从而简化开发过程。

Vite的文档中有一份非常详尽的插件指南。您可以阅读该指南来开始使用插件。

环境变量

环境变量是在代码本身之外设置的变量，但对于代码的运行非常重要，并且不能随代码库一起泄露。

它们可以是您正在使用的 API 的令牌、身份验证令牌、数据库密码，或者任何您不希望其他人通过查看您的代码发现的信息。要设置环境变量，您需要.env在应用程序的根目录创建一个文件，然后以 `<variables>` 的格式添加变量TOKEN=secret_token。在大多数 JavaScript 应用程序中，您可以使用 `<value>` 对象在代码中访问环境变量process.env。

Vite 使用对象import.meta.env来暴露您的环境变量。默认情况下，为了防止令牌泄露，环境变量不会暴露给前端。要将变量暴露给您的代码，您可以在变量名前加上前缀VITE_。

# This will not be exposed to the frontend
SECRET_TOKEN=i_should_not_be_exposed_to_the_client

# This will be exposed to the frontend
VITE_NORMAL_TOKEN=i_can_be_exposed_to_the_client

现在，要在代码中使用这些标记：

console.log(import.meta.env.SECRET_TOKEN)
console.log(import.meta.env.VITE_NORMAL_TOKEN)

如果你的项目需要更多功能，例如后端集成和服务端渲染，你可能还需要了解一些其他概念，但这超出了本文的范围。

判决

根据 npm 的数据，Vite 每周的下载量高达 140 万次，而且这个数字还在不断增长！读完这篇文章，或许你就能明白其中的原因了！

在这篇文章中，我们探讨了 Vite 的基础知识以及它与 Create React App 的比较。

你会亲身体验到，当你使用 Vite 开始你的项目时，启用其他提高生产力的功能（例如 HMR）甚至将你的网站部署到 Netlify 等都变得相当简单。

Vite之所以简单易用，是因为它将许多繁琐的细节隐藏在命令背后。同时，用户仍然可以深入底层，利用久经考验的Rollup插件。回顾过去，Vite团队显然观察了开发者的实际操作，从而设计并构建了一款既适合新手React开发者也适合专家级开发者的工具。