使用Vite快速构建前端React项目

一、Vite简介

Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端开发体验。除了Vite外，前端著名的构建工具还有webpack和Gulp。目前，Vite已经发布了Vite3，Vite全新的插件架构、丝滑的开发体验，可以和vue3完美结合。

相比Webpack和Gulp等构建工具，Vite有如下一些优势：

Vite主要对应的应用场景是开发模式，跳过打包按需加载，因此更新的速度非常快；
在大型项目上可以有效提高本地开发编译打包的速度，解决“改一行代码等半天”的问题；
浏览器解析 imports，利用了 type="module"功能，然后拦截浏览器发出的 ES imports 请求并做相应处理；
闪电般的冷启动速度；
即时热模块更换（热更新）；
真正的按需编译；

总的来说，Vite希望提供开箱即用的配置，同时它的插件api和JavaScript API带来了高度的可拓展性。不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理。

Vite构建工具由两部分组成：

开发服务器：基于原生 ES 模块提供了丰富的内建功能，如模块热更新（HMR）。
构建指令：使用 Rollup 打包代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

同时，在浏览器支持方面，Vite也区分了开发环境和生产环境：

开发环境：Vite需要在支持原生 ES 模块动态导入的浏览器中使用。
生产环境：默认支持的浏览器需要支持通过脚本标签来引入原生 ES 模块。可以通过官方插件 @vitejs/plugin-legacy 支持旧浏览器。

二、环境搭建

“工欲善其事，必先利其器”。首先，我们需要的是代码编辑器和浏览器，推荐VSCode和Chrome浏览器。其次，是安装Node.js，如果还没有安装Node.js，可以从Node,js官网下载相应的安装包并手动安装。

Vite需要Node.js 12.0.0 及以上版本，如果低于这个版本，推荐安装一下nvm工具，然后安装多个Nodo.js版本并进行多版本切换。同时，Node.js自带的npm和yarn镜像源是在国外，因此包管理器方面我推荐使用 pnpm，或者使用下面的命令更改镜像源：

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

三、初始化项目

环境搭建完成之后，接下来我们就进入到项目初始化阶段。首先，在终端命令行中输入如下的命令：

npm create vite

在执行完上面的命令后，npm 首先会自动下载create-vite这个第三方包，然后执行这个包中的项目初始化逻辑。输入项目名称之后按下回车，此时需要选择构建的前端框架：

✔ Project name: vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla // 无前端框架
    vue     // 基于 Vue 
 >  react   // 基于 React
    preact  // 基于 Preact（一款精简版的类 React 框架）
    lit     // 基于 lit（一款 Web Components 框架） 
    svelte  // 基于 Svelte

此处，我们选择构建的框架为React。接着，执行如下命令在启动本地项目：

cd vite-project
npm install
npm run dev

安装完成之后，去浏览器中打开http://localhost:5173/页面就可以看到示例项目了。

很多人说，Vite是Webpack的替代工具，那Vite相比Webpack究竟有啥优势呢。下面我们拿基于 Webpack 的脚手架create-react-app来测试一下项目初始化到依赖安装所花的时间对比：

四、项目入口

首先，我们打开Vite构建的项目，项目的目录结构如下：

.
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

和其他前端工具构建的项目一样，Vite构建的项目的入口也是index.html。也就是说，当我们访问http://localhost:5173的时候，Vite 的 Dev Server 会自动返回这个 HTML 文件的内容，index.html文件的内容如下。

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

可以看到，在 body 标签中除了 id 为 root 的根节点之外，还包含了一个声明了type="module"的 script 标签。

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

由于现代浏览器原生支持了 ES 模块规范，因此原生的 ES 语法也可以直接放到浏览器中执行，只需要在 script 标签中声明 type="module" 即可。main.tsx 的内容如下：

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


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

看到这段代码，大家可能会不太理解：浏览器并不识别 tsx 语法，也无法直接 import css 文件，那上面这段代码是如何被浏览器正常执行的呢？答案是，Vite 会对文件的内容进行编译处理，转化成浏览器能够运行的代码，如下图所示。

需要说明的是，在Vite项目中，一个 import 语句即代表了一个 HTTP 请求，下面的代码就代表了两个不同的请求：

import "/src/index.css";
import App from "/src/App.tsx";

五、配置文件

和WebPack构建工具一样，使用Vite构建的项目也需要进行一些配置才能满足日常开发的需要，如配置启动端口vite --port=8888。

通常，Vite的配置支持两种方式，一是通过命令行参数，二是通过配置文件，推荐使用配置文件的方式来声明。Vite 当中支持多种配置文件类型，包括.js、.ts、.mjs三种后缀的文件，实际项目中一般使用vite.config.ts作为配置文件，比如：

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


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

可以看到，我们在配置文件配置了react 插件，所以会提供 React 项目编译和热更新的功能。接下来，我们可以基于这个文件进行更加丰富的配置，比如将入口文件index.html放到src目录下，此时就需要添加如下配置：

import { defineConfig } from 'vite'
// 引入 path 包注意两点:
// 1. 为避免类型报错，你需要通过 `pnpm i @types/node -D` 安装类型
// 2. tsconfig.node.json 中设置 `allowSyntheticDefaultImports: true`，以允许下面的 default 导入方式
import path from 'path'
import react from '@vitejs/plugin-react'
export default defineConfig({
  // 手动指定项目根目录位置
  root: path.join(__dirname, 'src')
  plugins: [react()]
})

当我们在配置文件中指定root参数之后，Vite 会自动从这个路径下寻找index.html文件，也就是说当我们启动项目的时候，Vite会从src目录下读取入口文件，从而实现上面的需求。

六、生产环境配置

在开发阶段，为了加快项目的构建速度，Vite通过 Dev Server 实现了不打包的特性；而在生产环境中，Vite 依然会基于 Rollup 进行打包，并采取一系列的打包优化手段。关于这一点，可以从package.json中找到答案：

"scripts": {
  // 开发阶段启动 Vite Dev Server
  "dev": "vite",
  // 生产环境打包
  "build": "tsc && vite build",
  // 生产环境打包完预览产物
  "preview": "vite preview"
},

看到上面的脚本，你可能会比较疑惑：为什么在vite build命令执行之前要先执行tsc命令呢？事实上，tsc 作为 TypeScript 的官方编译命令，可以用来编译 TypeScript 代码并进行类型检查，而这里的作用主要是用来做类型检查，我们可以从项目的tsconfig.json中注意到这样一个配置。

{
  "compilerOptions": {
    // 省略其他配置
    "noEmit": true,
  },
}

虽然 Vite 提供了开箱即用的 TypeScript 以及 JSX 的编译能力，但实际上底层并没有实现 TypeScript 的类型校验系统，因此需要借助 tsc 来完成类型校验，从而在打包前提早暴露出类型相关的问题，保证代码的运行没有任何问题。

接下来，我们可以使用 npm run build来生成线上包，然后通过 npm run preview 命令预览一下打包产物的执行效果。

到此，我们对Vite有了一些基本的认识：相比于Webpack等传统构建工具，Vite利用了浏览器原生 ES 模块的支持，在开发阶段使用Dev Server进行模块的按需加载，而不是先整体打包再进行加载，因此效率会比较高。

原文：https://segmentfault.com/a/1190000043477902

链接: https://www.fly63.com/article/detial/12393