vite 简介

快速开发和构建工具​

在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如 ES6、TypeScript、Vue 文件等，而且之前的浏览器并不支持 ES 模块，所以我们必须通过构建工具来对代码进行转换、编译。

但是随着项目越来越大，需要处理的 js 和模块越来越多，构建工具需要很长时间才能开启服务器和热更新。

另一方面，现代浏览器已经大部分支持 ES6 语法、ES 模块等新特效，但是直接使用 ES Module 开发仍然会有一些缺点：

• 加载的文件必须明确写上后缀名；
• 如果某一个模块加载了许多其他 js 文件，那么这些 js 文件都需要依次加载，浏览器需要将所有的 js 文件请求下来；
• 不能识别 TypeScript、vue、less 代码

vite 皆在解决上面的问题。

vite 核心理念​

开发环境充分使用现代浏览器支持 ES6 语法、模块化的特性，不进行打包，使用 ESBuild 对代码进行简单转换；生产环境才使用 rollup 打包，去适配低版本浏览器。

目前来说，ESBuild 作为生产环境构建器还有些功能不完善和稳定，rollup 更成熟灵活，但不排除在未来会使用 ESBuild 打包。

vite 构造​

vite 主要由两部分组成：

• 一个开发服务器：基于原生 ES 模块，使用 connect 开启服务器对浏览器请求转发，返回经过 ESBuild 对原文件进行简单转换后的 js 代码，编译效率极大提高，HMR 速度非常快。
• 一套构建指令：使用 rollup 打开代码，并且是预配置的，可以输出生产环境优化过的静态资源。

ESBuild 解析​

特点​

• 超快的构建速度，并且不需要缓存
• 支持 ES6 和 CommonJS 的模块化
• 支持 Tree Shaking
• 支持 Go、JavaScript 的 API
• 支持 TypeScript、JSX 等语法编译
• 支持 SourceMap
• 支持代码压缩
• 支持扩展其他插件

速度快的原因​

• 使用 Go 语言编写，可以直接转换成机器代码，而无需经过字节码
• 充分利用 CPU 多核，尽可能让它们饱和运行
• 所有内容从零开始编写，而不是使用第三方，从一开始就可以考虑各种性能问题

vite 安装​

npm i vite -g # 全局安装

npx vite # 启动项目

CSS 支持​

1. 原生支持 css 文件，直接引入即可

import './css/style.css'

2. 对 css 预处理器的支持，只需安装对应依赖即可

npm i less -D

import './css/normal.less'

3. 使用 postcss 转换，先安装依赖，再在项目根目录创建 postcss.config.js

npm i postcss postcss-preset-env -D

module.exports = {
  plugins: [require('postcss-preset-env')]
}

TypeScript 支持​

vite 原生支持 TypeScript 文件，它会使用 ESBuild 完成编译，只需直接导入即可。

import { formatPrice } from 'format.ts' // 后缀名可省略

我们查看浏览器中的请求，会发现请求的仍然是 ts 文件，但是文件内容已经转化成 js。

这是因为 vite 中的服务器 connect 会对请求进行转发，获取 ts 编译后的代码，返回给浏览器直接解析。

Vue 支持​

vite 对 vue 提供第一优先级的支持：

• vue3 单文件组件支持：@vitejs/plugin-vue
• vue3 jsx 支持：@vitejs/plugin-vue-jsx
• vue2 支持：@vitejs/vite-plugin-vue2

安装 @vitejs/plugin-vue 插件，再配置 vite.config.js 使用插件即可：

npm i @vitejs/plugin-vue -D

import { defineConfig } from 'vite' // 添加提示
import vue from '@vitejs/plugin-vue'
// 支持 ES6 模块，直接使用 export 导出
export default defineConfig({
  plugins: [vue()]
})

跟 ts 文件一样，浏览器请求的是 .vue 文件，实际上转发返回的是编译后的 js 代码。

react 支持​

jsx 文件和 tsx 文件同样开箱即用，它们也是通过 ESBuild 来完成编译，所以我们只需要直接编写 react 的代码即可。

vite 打包​

执行命令 npx vite build 即可

打包后预览​

执行命令 npx vite preview 即可

使用脚手架​

在开发中，我们不可能所有的项目都使用 vite 从零去搭建，这个时候 vite 还给我们提供了对应的脚手架工具。

所以 vite 实际上是有两个工具的：

• vite：构建工具，相当于 webpack、rollup
• @vitejs/create-app：相当于 vue-cli、create-react-app

执行以下命令创建个项目：

npm create vite