7

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

 1 year ago
source link: https://www.fly63.com/article/detial/12393
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

一、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/页面就可以看到示例项目了。

63fd53e765e10.jpg

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

63fd53ec4dea4.jpg

四、项目入口

首先，我们打开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 会对文件的内容进行编译处理，转化成浏览器能够运行的代码，如下图所示。

63fd53f220b48.jpg

需要说明的是，在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 命令预览一下打包产物的执行效果。

63fd53fa04d8d.jpg

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK