这是我参与「第四届青训营 」笔记创作活动的的第13天
为什么需要构建工具
前端工程的痛点
- 模块化：ESM、CommonJS、UMO
- 资源编译：高效语法的编译
- 产物质量：代码体积、代码性能
- 开发效率：热更新
前端构建工具的意义
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高效语法转译，如：Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量
- 产物压缩、无用代码删除、语法降级
开发资源
- 热更新
Vite是什么？
vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
组成
一个开发服务器，它基于原生ES模块 提供了丰富的内建功能，速度快模块热更新（HMR）。
一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
核心特征
- 高性能：dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
如何使用Vite
浏览器支持
开发环境中：Vite需要在支持原生 ES 模块动态导入的浏览器中使用。生产环境中：默认支持的浏览器需要支持 通过脚本标签来引入原生 ES 模块 。可以通过官方插件 @vitejs/plugin-legacy 支持旧浏览器。
vite的常用使用指令
- 创建 vite 的项目
- 梳理项目的结构
- vite项目的运行流程：在工程化的项目中，vue 要做的事情很单纯：通过main.js 把 App.vue 渲染到 index.html 的指定区域中。
-
App.vue 用来编写待渲染的模板结构
-
index.html 中需要预留一个el 区域
-
main.js 把 App.vue 渲染到了 index.html 所预留的区域中（按照vue 3.x 的标准用法，把App.vue 中的模板内容渲染到 index.html 页面的el 区域中）
Vite整体架构
关键技术：依赖预打包
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX
- 优势：编译速度提升 10-100x
- 局限性：不支持类型检查，不支持语法降级到ES5
