《从零开始学习Vite》第一章：搭建前端项目

Vettel-qin

已于 2024-06-19 17:27:00 修改

阅读量1k

点赞数 24

文章标签：学习前端 react.js vue.js node.js npm

于 2024-05-22 11:11:35 首次发布

本文链接：https://blog.csdn.net/m0_64019547/article/details/139114434

版权

🍎 系列文章

在系列中，将从零学习Vite，系统梳理 Vite 本身的知识，也包括 Vite 底层所使用的 Esbuild、Rollup 双引擎、Babel 编译工具链、模块规范标准等等构建生态。

《从零开始学习Vite》第一章：搭建前端项目

《从零开始学习Vite》第二章：接入 CSS 工程化方案

《从零开始学习Vite》第三章：静态资源处理

《从零开始学习Vite》第四章：自动化代码规范工具的使用

前言

使用 Vite 的初始化命令创建一个React项目，让你理解这个项目究竟是如何运行起来的，不仅体验到 Vite 的快速和轻量，同时也能学会基本的前端开发环境的搭建，安装编辑器、Node.js环境、包管理器pnpm。

环境搭建

首先推荐安装 VSCode 和 Chrome 浏览器

安装 Node.js，可以通过这个命令 :

node -v

检查系统是否安装了 Node.js, 如果没有可以进入 nodejs.org 官网下载相应的安装包进行安装。推荐 v16.0.0 及以上版本,，如果低于这个版本，推荐使用 nvm 、n 工具切换node.js版本。
安装完 Node.js 之后，包管理器 npm 也会被自动安装，你可以执行下面的命令来验证:

npm -v

其中包管理器有npm yarn pnpm，这里推荐使用pnpm,它能前两者都存在比较严重的性能和安全问题。
可以通过这个命令 :

npm install -g pnpm

由于默认的镜像源在国外，包下载速度和稳定性不太好，建议你换成国内的镜像源，命令如下：

pnpm config set registry https://registry.npmmirror.com/

项目初始化

搭建完基本的前端开发环境之后，进入到项目初始化阶段，在终端命令行中输入：

pnpm create vite

pnpm 会自动下载create-vite 并执行这个包中的项目初始化逻辑，然后我们就可以看到一个交互界面，后续的交互流程如下：

输入项目名称，如：vite-project

2. 选择前端框架

Vite内置了以下不同前端框架的脚手架模板，这里我们选择 react 框架为例

Vanilla //无前端框架
Vue     //基于Vue
React   //基于React
Preact  //基于Preact（一款精简版的类React框架）
lit     //基于lit（一款Web Components框架）
Svelte  //基于Svelte
Qwik    //基于Qwik
Others  //其他（如：electron）

3. 选择开发语言

这里我们选择 TypeScript

这样脚手架的模板就已经生成完毕，执行如下命令在本地启动项目：

cd vite-project
pnpm install
pnpm run dev

执行pnpm run dev 之后看到如下界面，表示项目已经成功启动了

在浏览器打开 http://localhost:5173
可以看到：

至此，我们成功搭建了一个 React 前端项目。

项目加载

项目的目录结构如下：

在项目根目录中有一个 index.html 文件，Vite 默认会把这个 index.html 作为入口文件。

可以看到这个 HTML 文件的内容非常简洁，在body标签中除了 id 为 root 的根节点之外，还包含了一个声明了type="module"的script标签:

<script type="module" src="/src/main.tsx"></script>

由于现代浏览器原生支持了 ESM ，因此原生的 ES 语法也可以直接放到浏览器中执行，只需要在 script 标签中声明type="module"即可。比如上面的 script 标签，相当于请求了http://localhost:5173/src/main.tsx 这个资源，Vite 的 Dev Server 此时会接收到这个请求，然后读取对应的文件内容，进行一定的中间处理，最后将处理的结果返回给浏览器。

我们可以来看看 main.tsx 的内容:

现代浏览器并不识别 tsx 语法，也无法直接 import css 文件，上面这段代码究竟是如何被浏览器正常执行的呢？
在读取到 main.tsx 文件的内容之后，Vite Dev Server 会对文件的内容进行编译，把编译后的结果返回给浏览器。其中 Vite 内部的编译流程，会在后面的进阶文章深入分析。