这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
前端构建工具的意义
模块化方案
提供模块加载方案，兼容不同模块规范
语法转译
高级语法转义，如Sass，Typescript
产物质量
产物压缩，无用代码删除，语法降级
开发效率
热更新
Vite概览
在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。
它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite上手使用
对于开发者，任何时候都推荐查阅官方文档来获取工具的最新使用方式。
安装
# npm
npm create vite@latest
# yarn
yarn create vite
#pnpm
pnpm create vite
新建项目
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
其他模板，例如ts支持可以在官方文档找到
Vite整体架构
依赖项预打包
实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100x 局限性：不支持类型检查；不支持语法降级到ES5
代码压缩
Esbuild作为默认压缩工具
插件机制
开发阶段：模拟Rollup插件机制 生产阶段：直接使用Rollup
进阶主题
插件开发
通过上述Hook，我们可以在不同的构建阶段插入自定义逻辑
