Vite 构建 React 项目

领航猿麦兜
988 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情

Vite 构建 React 项目

前面，我们了解了如何通过 Vite 构建 Vue3 和 Vue2 的项目。下面我们如何通过 Vite构建 React 的项目。

为什么我们单独要把 React 单独拿出来讲呢？大家可能觉得 Vite 是尤老师开发的，而且他又开发了 Vue，那么 Vue 和 React 又是一个竞争的关系。Vite 会不会支持 React 呢？答案其实是会的，而且 Vite 对于 React 提供了官方支持，比 Vue2 还要优先。

原因是 Vite 是一个服务于不同的前端框架的工具，它应该要选择支持更多的不同的框架。React 作为现今最流行的一个前端框架来说，如果 Vite 不支持，那么这样的决策是不合理的。

对于 React，原来 Vite 使用插件名称是 React FastRefresh。为什么要叫这个名字呢？其实这跟 React 的 Hot Module Replacement 工具的迭代有关系。在19 年底，官方在推一个 React FastRefresh 热更替的工具。这个工具是用来替代 react-host-loader。如果你没有自己去搭建过 React 的项目，可能对这个不太熟悉，这是 Webpack 提供的 Hot Module Replacement，也就是热更新，你写的代码不需要刷新页面，就可以刷新内容的一个功能。

在 React 生态当中，你需要通过 react-host-loader 工具来帮助，已经存在了非常久了，从 React 诞生到现在，一直有在用 creat-react-app，同时也是一直支持 react-host-loader。

直到 19 年年底开始，官方主推的就是 FastRefresh 的插件。 FastRefresh 相比于 react-host-loader，它解决了很多 react-host-loader 一直遗留并且很难以解决的问题，速度更快，同时它还支持局部更新的功能，局部更新就是某一个大的配置组件里面用到了一个小组件更新了，在 react-host-loader 下，你可能需要去把整个组件重新渲染。但是FastRefresh 就可以实现它的一个局部更新。

在这样的一个前提下，Vite 提供的 React 插件的名称是 plugin-react-refresh。21 年，将 plugin-react-refresh 迁移到 plugin-react。

image.png

同时，我们在后面会有单独的课程讲解什么是 Hot Module Replacement、实现原理，在 Vite 的生态当中的作用，以及如何去使用它，这里我们就先不详细的讲解。

 

我们主要来介绍如何使用 Vite 构建 React 的项目，Vite 构建 React 的项目也非常的简单了。我们直接 npm init @vitejs/app 即可，跟构建 Vue3 项目类似，在选择支持框架时选择 react 框架即可。

image.png  

介绍到这里，我们之前一直都是用 npm 来初始化 Vite 的项目的，其实用 yarn 也是可以的，这里不给大家做演示，如果大家感兴趣，可以自行查找相关资料学习。

使用 VS Code 集成工具打开 vite-react 项目，大致的看一下它的目录结构。

image.png

它的目录结构跟 Vite 构建的 Vue3 项目差不多的。

首先来看 vite.config.js，这里面就使用了 react vite plugin。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

同样，在项目的根目录下有一个 index.html 文件，在该文件中引入了 src/main.jsx。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

可以看到它引入的是 main.jsx，jsx 文件并不是标准的 js 文件。这个路径为什么可以生效呢？其实 Vite 本身会启动一个本地的 Server，通过浏览器加载 src/main.jsx 时，它发送了一个 HTTP 的请求，代表 js 的路径。作为 Vite 服务，它并不会直接给你返回 main.jsx 的内容，是经过一系列的编译返回 js 的内容。那么作为浏览器来说，它并不关心你引用路径的后缀名，只关心你返回的内容是不是标准并且符合 JavaScript 语法的内容。

src 目录下的 main.js 通过 ReactDOM.render 渲染了 App。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

运行 vite-react 项目。

 image.png

打开浏览器访问 localhost:3001，验证结果如下。

image.png  

OK，可以看到项目启动成功，并且功能都是正常的。这就是我们通过 Vite 的命令构建 React 应用的过程。

avatar
文章
阅读
粉丝