尽管每个 React 应用程序都是独一无二的，但它们都从同一个地方开始：
- 您需要一个 index.js、App.js 和 App.css 文件
- 你需要安装 react 和 react-dom
- 你需要一个工具链来使用 JSX
- 您需要一个捆绑器将所有 .js、.css 等文件捆绑到一个易于部署的文件中
这个基础很重要！
…但是为每个项目设置也很单调。
我相信您更愿意花时间在您的应用程序独有的功能上，Vite 可以提供帮助！
Vite（发音为“veet”，法语为“quick”👀）让你更有效率。
只需一个命令和几秒钟，它就可以为您生成以上所有样板，甚至更多！
此外，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 更陡峭，例如，您不需要构建工具。
更有经验的 React 开发人员也会使用并欣赏 CRA。虽然，一旦他们的项目变得更加复杂，他们有时需要使用其他东西。
快的
自 CRA 设计以来的 7 年里，Web 已经发生了根本性的变化。
根据 Vite 文档，“随着我们构建越来越雄心勃勃的应用程序，我们正在处理的 JavaScript 数量也在急剧增加。大型项目包含数千个模块的情况并不少见。”
由于构建 React 应用程序的依赖关系变得如此庞大且相互关联，因此像 CRA 之类的工具有时可能需要等待很长时间（有时长达几分钟！）才能启动，并且更改可能需要几秒钟才能反映在浏览器中.
Vite 指出，“缓慢的反馈循环会极大地影响开发人员的生产力和幸福感。”
总之，React 应用程序正变得越来越复杂，对我们的工具的要求越来越高。同时，网络浏览器也在不断发展。例如，最新的浏览器现在支持直接导入模块。
只有更新我们的工具，我们才能从这些进步中受益。
这就是 Vite 的用武之地。
Vite 旨在利用生态系统的进步。
与 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 进入您的文件夹并运行以下命令：
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 可以节省您等待或输入数据以重新创建应用程序状态的时间。不仅如此，它还可以减少摩擦，让您专注于您的任务并提高工作效率。
HMR 快速测试
让我们来看看 Vite 的内置 HMR。
- 在编辑器中打开 src/App.js
- 打开 localhost:5173（最好在屏幕的另一边观察效果）
- 增加计数器
- 从 src/App.js 中删除第 10-17 行（基本上从应用程序中删除两个徽标）
如果您并排打开窗户，您应该注意以下事项：
就我而言，我在删除徽标之前将计数器增加到 12。
通常，页面会重新加载，计数器会减少到其默认值 0。HMR 在幕后施展魔法，只更改代码中实际更改的页面部分。
将您的应用部署到生产环境
Vite 使您可以轻松地将您的 React 网站部署到 Vercel、GitHub 页面或Netlify。
如此平易近人，我鼓励您跟随我们将生成的应用程序部署到 Netlify。当您进行更改时，更新实时网站会容易得多。
我需要知道什么？要继续学习，您需要：一个 GitHub 帐户、本地安装的 Git，以及 Git 的基本知识。
从 Git 开始
如今，一种称为持续部署的做法很普遍并受到鼓励。
简单来说，当您将代码推送到 GitHub 上的主分支时，Netlify 等服务会检测到这一点，下载您的更新并更新您的实时网站。Vite 可以帮助解决这个问题。
这听起来可能有点令人费解，所以我鼓励你自己尝试一下。当你看到这一切都在行动时会更容易理解。
首先，创建一个 GitHub 存储库并记下 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 帐户的好时机。
登录后，单击Add New Site，然后单击Import Existing Project。
您将看到以下页面：
单击GitHub。
GitHub 会询问您是否要授予 Netlify 查看和下载存储库的权限。你可以继续！
一旦 Netlify 有权与您的 GitHub 帐户进行交互，它将加载并列出您的所有存储库。选择您刚刚创建的存储库。您可能还记得，我的称为 vite-app：
部署您的应用
选择存储库后，系统会提示您设置一些设置。Vite 知道 Netlify 想要看到什么，并通过遵守默认设置让您的生活更轻松。这意味着您不必在此处更改任何内容。只需点击部署站点：
部署后，您应该会看到此页面以及指向您网站的链接：
在我们的例子中，链接是弹性-gaufre-20030a.netlify.app：
当您下次有空闲时间时，请浏览一下站点设置。
在这里，您可以更改与您的网站相关的所有内容，甚至可以分配自定义域名！
当您对代码进行更改并将它们推送到 GitHub 时，Netlify 应该会检测到这一点并更新实时站点！
有关将 Vite 应用程序部署到其他托管服务提供商的更深入的教程，您可以访问 Vite在其文档中的部署站点部分。
进阶版
Vite 建立在巨人的肩膀上——即Rollup和EsBuild：
了解 Vite 在高级别的底层是如何工作的，可以为您提供一些可以利用的高级功能。
插件
Vite 可以使用基于 Rollup 精心设计的插件界面的插件进行扩展，并带有一些额外的 Vite 特定选项。
这意味着 Vite 用户可以依赖 Rollup 插件的成熟生态系统，同时根据需要扩展开发服务器和 SSR 功能。
简而言之，插件通过提供与其他工具的集成并在 Vite 之上添加其他功能以简化开发，让您可以在站点应用程序上做更多事情。
Vite在其文档中有关于插件的非常深入的指南。您可以阅读它以开始使用插件。
环境变量
环境变量是在代码本身之外设置的变量，但对于代码运行非常重要，并且不能与您的代码库一起泄漏。
它们可以是您正在使用的 API 中的令牌、身份验证令牌、数据库密码，或者您不希望其他人查看您的代码发现的任何内容。要设置环境变量，您可以.env在应用程序的根目录中创建一个文件，然后以 格式添加您的变量，在大多数 JavaScript 应用程序中，您可以使用该对象TOKEN=secret_token在代码中访问您的环境变量。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 开发人员和专家等工具的行动。
