为什么需要构建工具

前端工程的痛点

模块化：在前端JS没有统一的模块化规范

（三个主要的规范： ESM、CommonJS、UMD）

资源编译：高级语法（如：TS、JSX）浏览器是不认识的，所以需要编译成浏览器认识的形式
产物质量：减小代码体积（如：对没有用到的代码需要剔除掉）、优化代码性能
开发效率：热更新（想要改动代码就能立即看到效果）

😁而构建工具就能解决如上的问题

前端构建工具的意义

Vite 是什么

概览

定位：新一代前端构建工具

两大组成部分：

No-bundle 开发服务，源文件无需打包
生产环境基于Rollup的Bundler B

核心特征：

高性能，dev启动速度和热更新速度非常快！
简单易用，开发者体验好

Dev Server

扩：浏览器原生ESM支持
两大要素：
1. script 标签增加 type=“module” 属性
2. 使用ESM模块导入导出语法

基于原生ESM的开发服务优势，Vite开发了一套Dev Server，基于ESM的服务，可以去除bundle的开销，按需编译。

优势：

无需打包项目源代码
天然的按需加载
可以利用文件级的浏览器缓存

性能优化

扩：Esbuild—基于Golang开发的前端工具，具备如下能力：
1. 打包器 Bundler
2. 编译器Transformer
3. 压缩器Minifier

基于Esbuild的编译性能优化，在Vite 被深度使用，提高性能

内置的Web构建能力

而 Vite 的默认集成度到达什么样的水平呢？

默认集成度很高

Vite 上手使用

项目初始化

使用Sass/Scss & CSS Modules

//src目录
src
|--App.css
|--App.tsx
|--components
|----Header
|------index.module.scss
|------index.tsx
|--favicon.svg
|--index.css
|--logo.svg
|--main.tsx
|--vite-env.d.ts

//安装Sass
pnpm i sass -D

//index.tsx
import styles from'./index.module.scss';
//使用CSS Modules模块化方案，防止cLassName命名冲突export function Header（）{
return <p className={styles.header}>This is Header</p>
};

// index.module.scss
.header {
  color: red;
}

//引入 Header 组件
import { Header } from "./components/Header"; 
function App(){
  return(
    <div>
      <Header/>
    </div>
); 
}
export default App;

使用静态资源

/src目录
src
|--App.css
|--App.tsx
|--components
|----Header
|------index.module.scss
|------index.tsx
|--favicon.svg
|--index.css
|--logo.svg
|--main.tsx
|--vite-env.d.ts

//以svg图片为例
import { Header } from "./components/Header"; 
import logoUrl from './Logo. svg'; 
function App(){
return(
  <div>
    <Header/>
    <img src={logoUrl} alt=""/>
  </div>
); 
}
export default App;