这是我参与「第五届青训营」伴学笔记创作活动的第 16 天
课程重点：
- Vite 介绍
- Vite 实战
知识点介绍：
Vite 是什么
实际上，Vite 和 Webpack 的作用是类似的，都是用于大型项目的构建打包。Vite 有两大部分组成，一部分是 No-bundle 的开发服务，源文件无需打包，启动和热更新速度都极快。另一部分是生产环境，基于 Rollup。
Vite 相对于 Webpack 来说，开发环境启动速度和生产构建速度都有极大幅度的提升。
由于浏览器支持了 ESM 模块的加载，所以 Vite 只需要在浏览器请求模块时，编译相应文件并发给浏览器即可。由于模块的支持，vite在开发环境无需打包项目源代码，且天然按需加载，可以利用文件级的浏览器缓存。
并且在编译上，vite使用了golang写esbuild，编译速度是其他同类产品的几倍。
Vite 安装
Vite 推荐使用 pnpm 作为包管理器
npm i -g pnpm
# 在新版nodejs中，也可直接使用
corepack enable
运行 vite 初始化程序
pnpm create vite
初始化程序会让你选择使用的框架（vue/react等），使用的语言（TypeScript/JavaScript）
安装依赖
pnpm install
启动项目
pnpm dev
使用 scss
在 vite 中使用 scss(sass) 非常方便，只需要安装依赖即可
pnpm add -D sass
引入资源
在 vite 中提供了非常多引入资源的方式
// 引入 css （会直接注入页面）
import styles from './foo.css'
// 引入图片url
import imgUrl from './img.png'
// 加载资源为一个 URL
import assetAsURL from './asset.js?url'
// 以字符串形式加载资源
import assetAsString from './shader.glsl?raw'
// 加载为 Web Worker
import Worker from './worker.js?worker'
// 在构建时 Web Worker 内联为 base64 字符串
import InlineWorker from './worker.js?worker&inline'
对于json文件，vite也有特殊处理
// 导入整个对象
import json from './example.json'
// 对一个根字段使用具名导入
import { field } from './example.json'
vite也支持glob导入方法，在一些例如路由/插件/中间件的自动加载中非常好用
const modules = import.meta.glob('./dir/*.js')
