这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

0x00 浅谈构建工具

前端工程痛点

• 资源
• 模块化：ESM、CommonJS、UMD
• 资源编译：高级语法编译
• 产物质量：代码体积/性能
• 开发效率：热更新

前端构建工具的意义

• 模块化：提供模块加载方案兼容不同模块规范
• 语法转译：高级语法转移以及资源加载
• 产物质量：产物压缩、无用代码删除、语法降级
• 开发效率：热更新

0x01 Vite 概览

• 两大组成部分

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

• 核心特征

  • 高性能
  • 简单易用，开发者体验好

• 基于原生 ESM 开发服务优点

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

0x02 安装 Vite

# 安装 pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev

启动成功后输入 http://127.0.0.1:5173/ 即可。

0x03 使用 Sass/Scss & CSS Modules

使用 pnpm i sass -D 安装 Sass

• index.tsx

import styles from './index.module.scss'

export function Header() {
    return <p className={style.header}>This is Header</p>
};

• index.module.scss

.header {
    color: red;
}

0x03 使用静态资源

• App.tsx

import logoUrl from './logo.svg';

function App() {
    return (
        <div>
            <img src={logoUrl} alt="" />
        </div>
    );
}

export default App;

0x04 生产环境 Tree Shaking

用于删除未使用的代码

优化原理

1. 基于 ESM 的 import/export 语句依赖关系，与运行时无关
2. 在构建阶段将未使用代码进行删除

0x05 Vite 插件开发

Hook

根据 Hook 可以在不同的构建阶段插入自定义逻辑

1. 服务启用阶段：config->configResovled->optionss->configureServer->buildStart
2. 请求相应阶段：transformIndexHtml->resolveId->load->transfrom
3. 热更新阶段：headleHotUpdate
4. 服务关闭阶段：buildEnd->closeBundle

插件示例

const fileRegex = /.(my-file-ext)$/

export default function myPlugin() {
    return {
        name: 'transform-file',
        
        transform(src, id) {
            if (fileRegex.test(id)) {
                return {
                    code: compileFileToJS(src),
                    map: null
                }
            }
        }
    }
}

使用插件

• vite.config.js

import plugin from './myPlugin'

export default defineConfig({
    plugins: [plugin()]
})

0x06 一些功能

• 代码分割
• JS 编译工具（Babel）
• 语法安全降级
• 服务端渲染（SSR）