这是我参与「第四届青训营 」笔记创作活动的第4天
一、什么是Vite?
vite是下一代前端开发与构建工具。 Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
Vite 提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh 中。
二、Vite的使用
(1) 安装
npm i -g pnpm
(2) 输入初始化参数
Project name: vite-project
Select a framework: > react
Select a variant: >-Use arrow-keys.Return to submit.
React
react-ts
三、使用Sass/Scss&CSS Modules
(1) 安装
pnpm i sass -D
(2) 配置
import styles from '. /index.module.scss';
//使用 CSS Modules 模块化方案， 防止 className 命名冲突export
function Header() {
return <p className = {
styles.header
} > This is Header </p>
};
//引入Header
import {
Header
} from "./components/Header";
function App() {
return ( <div><Header/></div>);
}
export default App;
四、Vite 静态资源处理
(1) 将资源引入为 URL
服务时引入一个静态资源会返回解析后的公共路径：
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
(2) 显式 URL 引入
未被包含在内部列表或 assetsInclude 中的资源，可以使用 ?url 后缀显式导入为一个 URL。
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
(3) 将资源引入为字符串
资源可以使用 ?raw 后缀声明作为字符串引入。
import shaderString from './shader.glsl?raw'
(4) 导入脚本作为 Worker
脚本可以通过 ?worker 或 ?sharedworker 后缀导入为 web worker。
// 在生产构建中将会分离出 chunk
import Worker from './shader.js?worker'
const worker = new Worker()
// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()
// 内联为 base64 字符串
import InlineWorker from './shader.js?worker&inline'
五、Vite的特性
- 支持HMR。
- 生产环境使用Rollup进行打包，以便使用tree-shaking、懒加载和 chunk 分割等优化。
- 支持vue、React、Lit-element、svelte等框架及其对应的TS版本。
- 内部使用esbuild将TS转译为JS，但是不进行类型检查，可安装tsc、vue-tsc进行检查。
- index.html为项目的入口文件，会自动解析其中引入的JS和CSS，进行路径转换。支持多个.html，即多页应用。
- 得益于rollup，有丰富的插件支持。
