这是我参与「第五届青训营 」笔记创作活动的第14天。
前言
本课程主要分为五个方面:
- 构建工具的意义
- Vite 概览介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
安装 Node.js
可以选择以下一种方式：
- 从 Node.js 官网安装 nodejs.org/en/
- Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm NVM_NODEJS_ORG_MIRROR=npmmirror.com/mirrors/nod… nvm install 16
安装 pnpm
执行如下命令即可:
npm i -g pnpm
前端构建工具的意义
- 模块化方案：提供模块加载方案；兼容不同模块规范
- 语法转译：高级语法转译，如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
