这是我参与「第四届青训营 」笔记创作活动的第13天
一、重点内容
- 浅谈构建工具
- 概要介绍Vite的概念、初次使用、整体架构
二、详细知识点
为啥需要构建工具？
- 从开发方面：避免重复造轮子；
- 从运行方面：对代码进行处理（压缩、优化...），使文件更小；
- 从维护方面：出现了很多模块化工具。
Vite是啥？
先在这里引用一下Vite官网的描述：下一代前端开发与构建工具。Vite是作者尤雨溪基于浏览器原生ES imports开发的服务器，所以Vite的特点为：
- 高性能:不用打包原生ESM文件；不管应用程序有多大，热重载速度都极快。
- 功能丰富:对于JSX、CSS、TypeScript等等都可以达到开箱就用。
Vite的初次使用
兼容性注意： Vite 需要 Node.js 版本 >= 12.0.0。
- 使用 NPM:
$ npm init vite@latest
- 使用 Yarn:
$ yarn create vite
- 使用 PNPM:
$ pnpm create vite
然后就可以跟着提示操作走了！ 2. 可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。假如要构建一个 Vite + Vue 项目，运行:
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init 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
查看create vite就可以获取各个模板的更多细节。
Vite整体架构
依赖预打包
- 为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
- 优势：编译速度提升10-100
- 局限性：
-
- 不支持类型检查
-
- 不支持语法降级到ES5
插件机制
- 开发阶段->模拟Rollup插件机制
- 生产环境->直接使用Rollup
