Vite--新一代前端开发与构建工具

Vite的初衷？为什么要选择它？

1. 在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制，让开发者以模块化的方式进行开发。
2. 性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间才能启动开发服务器
3. 影响开发者的开发效率

1. 新一代前端开发与构建工具；

// 兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

2. 特点：

(1)极速启动
(2)动态模块热重载（HMR）
(3)支持ts和js
(4)可选“多页应用”或“库”
(5)模式的预配置Rollup构建
(6)丰富通用的插件
(7)灵活的api和完整的ts.

3.启动

（传统打包器）：在提供服务前，急切的抓取和构建整个应用。
（Vite）:将应用中的模块区分为依赖和源码两类。

依赖：使用esbuild预构建依赖（比js编写的打包器预构建依赖快10-100倍）
源码：以原生ESM方式（实际是让浏览器接管了打包程序的部分工作），在浏览器请求源码时进行转换并按需提供

4. 搭建Vite项目：

1. npm create vite-app //创建
2. cd vite-app //进入
3. npm run dev //启动
4. npm run build //打包
   5.npm run serve //本地预览

5. Vite项目目录的改动：

（1）index.html 在项目最外层（不是在 public 文件夹内）

6. CSS 预处理器

npm install -D sass
npm install -D less
npm install -D stylus

7.功能

1.NPM 依赖解析和预构建

  import { someMethod } from 'my-dep'

2.模块热重载

3.TypeScript

Vite 天然支持引入 .ts 文件。

4.Vite 为 Vue 提供第一优先级支持：

Vue 3 单文件组件支持：@vitejs/plugin-vue
Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
Vue 2 支持：underfin/vite-plugin-vue2

8. 依赖预构建的目的：

（1）commonJS和UMD兼容性
（2）性能：Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能

9. 缓存（Vite 会将预构建的依赖缓存到 node_modules/.vite）

（文件）
（1）package.json 中的 dependencies 列表
（2）包管理器的 lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml
（3）可能在 vite.config.js 相关字段中配置过的
只有当上面的一个步骤发生变化时，才需要重新运行预构建步骤
如果出于某些原因，想要强制 Vite 重新绑定依赖，可以用 --force 命令行选项启动开发服务器，或者手动删除 node_modules/.vite 目录

（浏览器）:解析后的依赖请求会以 HTTP 头 max-age=31536000,immutable 强缓存 一旦被缓存，这些请求将永远不会再到达开发服务器。
如果安装了不同的版本（这反映在包管理器的 lockfile 中），则附加的版本 query 会自动使它们失效
（1）通过浏览器 devtools 的 Network 选项卡暂时禁用缓存；
（2）重启 Vite dev server，使用 --force 标志重新打包依赖；
（3）重新载入页面

10. 环境变量与模式

import.meta.env.MODE: string 应用运行基于的 模式。
import.meta.env.BASE_URL: string 应用正被部署在的 base URL。它由 base 配置项 决定。
import.meta.env.PROD: boolean 应用是否运行在生产环境
import.meta.env.DEV: boolean 应用是否运行在开发环境 (永远与 import.meta.env.PROD 相反)

11. 模式

开发服务器 (serve 命令) 运行在 development （开发）模式，而 build 命令运行在 production （生产）模式

“staging” 模式，它应该具有类似于生产的行为，但环境变量与生产环境略有不同 执行（vite build --mode staging）
为了使应用实现预期行为，我们还需要一个 .env.staging 文件：
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

12. 构建应用：

npm run build
npm run preview
preview 命令会启动一个本地静态 Web 服务器，将 dist 文件夹运行在 http://localhost:5000 上
{
“scripts”: {
“preview”: “vite preview --port 8080”
}
}

13.参考官网地址

https://vitejs.cn/