前端_008_Vite

官网：https://vitejs.cn/vite3-cn/guide/

一句话简介：前端的一个构建工具

Vite项目结构

index.html

package.json

vite.config.js

public目录

src目录

#新建一个vite项目 
npm create vite@latest原有项目引入vite需要1.index.html移至根目录2.新增vite.config.js文件3.npm install vite

依赖构建

第一次使用vite后会将依赖预缓存到node_modules/.vite

• package.json 中的 dependencies 列表
• 包管理器的 lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml
• 可能在 vite.config.js 相关字段中配置过的

只有在上述其中一项发生更改时，才需要重新运行预构建。

支持自动依赖搜寻

如果没有找到相应的缓存，Vite 将抓取你的源码，并自动寻找引入的依赖项（即 “bare import”，表示期望从 node_modules 解析），并将这些依赖项作为预构建包的入口点

作用：

1.兼容CJS和UMD，统一转换为ES模块使用，当转换 CommonJS 依赖时，Vite 会执行智能导入分析，这样即使导出是动态分配的（如 React），按名导入也会符合预期效果

// 符合预期
import React, { useState } from 'react'

2.Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块

插件

https://vitejs.cn/vite3-cn/guide/using-plugins.html#conditional-application

插件部分根据具体项目需要参考官网引入即可