引言

出人意料的Advent Calendar首日，是从过去系列的纪念开始的。非常抱歉。

在这个《Webpack?Create React App?No、Vite!!》系列中，我们将分为五次来讨论以下内容。

1. 通过使用标题中的工具来构建React开发环境，理解以下内容：

1. – JS中的“编译”、“捆绑”和“构建”的含义。

– 体验vite技术的强大和其“爆速”。

我正在考虑以下情况的标题。

理解编译、打包和构建的概念。

使用webpack构建React开发环境（打包器/编译器版）。

用Webpack搭建React开发环境 [开发服务器/HMR部分]。

使用Create React App来构建React开发环境←上次

本次我们将介绍通过Vite构建React开发环境以及其技术方面的强大之处。

相当长时间过去了。
好吧，从编译和构建的理解开始，我们已经使用webpack和CRA来进行React环境的设置。在使用webpack进行环境设置时，我们从编译器的配置到开发服务器的搭建都进行了操作，通过实际进行配置，我相信您已经体验到了在编写代码之前的困惑。另一方面，通过使用CRA进行环境设置，我们充分体验了它的NoConfig特性。但是，CRA已经不再流行了。最近（至少两年前），Vite这个构建工具似乎更受欢迎。这次我们将介绍一下Vite是什么，并使用Vite来进行React环境的设置。

5.1 Vite 是什么？

Vite1是由Evan You在2020年发布的前端构建工具。可以说，它基本上与我们之前使用的webpack和CRA等产品处于相同的位置。然而，与前述的产品有所不同的是，Vite不仅灵活地结合了当今前端开发所必不可少的现代技术栈，而且作为一款非常方便易用的工具，为曾经混乱的前端构建领域带来了光明，并迅速成为热门工具。

当访问Vite官方网站时，我们可以看到以下特点：

瞬時にスタートするサーバ
ネイティブ ESM により要求時にファイルが提供されるため、バンドルが不要です！

超高速なHMR
アプリのサイズに関係なく高速を維持する HMR を提供します。

豊富な機能
TypeScript、JSX、CSS などがすぐに使えるようにサポートされています。

最適化されたビルド
設定済みの Rollup によるビルドによってマルチページおよびライブラリモードをサポートします。

ユニバーサルなプラグイン
開発とビルドの間で共有される Rollup と互換性のあるプラグインを提供します。

完全に型定義がされている API
完全な TypeScript の型定義を備えた柔軟なプログラミング志向の API です。

在此，我们将主要详细讨论前四个方面。

5.2 Vite中使用的技术（主要是关于Rollup和ESBuild）

在第一次会议中，Bundle 将各种 JavaScript 文件和其他资源文件合并在一起。当项目规模变大时，这项工作可能会非常耗时。

实际上，需要进行 Bundle 的原因是 JavaScript 已经进行了模块化。通过模块化，我们可以消除变量冲突并实现分工，但为了在浏览器中加载和使用这些模块，需要在 Node.js 环境中解决所有依赖关系并将其合并到一个 JavaScript 文件中。

然而，ES2015（ES6）标准化了模块形式（ESM），并在各种现代浏览器中正式运行，使得浏览器可以根据需要加载所需的模块。

根据这种趋势，一些工具开始原生支持这种模块形式，其中最著名的是被称为 rollup 的 Bundle 工具和 esbuild 的构建工具。

Vite 在开发环境中使用 esbuild 进行构建，在生产环境中使用 rollup 进行 Bundle。

特别是在开发环境中使用的 esbuild 不同于过去主要使用 JavaScript 编写的构建工具，而是使用 Go 编写，这一点对构建性能有相当大的影响。

5.3 使用Vite搭建React开发环境

很快，我們就開始吧。儘管如此，這個任務非常簡單。

npm create vite@latest react-vite-app
Need to install the following packages:
  create-vite@5.0.0
Ok to proceed? (y)

是的 (shì de)

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

有很多选择啊。这次我们要使用React，所以选择React吧。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
    JavaScript
 ❯  JavaScript + SWC

有一个叫作SWC的不太熟悉的东西，它是最近用很流行的Rust语言编写的编译器，是Babel的替代品。暂时选择这个吧。

Done. Now run:

  cd react-vite-app
  npm install
  npm run dev

我将按照指示尝试移动。

最后

在这个“Webpack? Create React App? No、Vite!!”系列中，我体验了一下熟悉的webpack和超快的Vite，包括了迎头赶上前端生态系统的含义。到现在为止，我觉得在不久之前，为了开始使用React开发环境，相当困难，但是在过去几年中，像Vite这样的工具出现了，感觉门槛降低了很多。另一方面，我觉得使用Vite时，如果想做些复杂的事情，肯定还是需要之前所需的知识，所以在那种情况下，我希望能够停下来，利用这次的经验，能够冷静地阅读代码和进行错误调试。