乐趣区

关于typescript:使用Vite快速构建前端React项目

jiezi

一、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 进行模块的按需加载，而不是先整体打包再进行加载，因而效率会比拟高。

退出移动版