这是我参与「第五届青训营 」伴学笔记创作活动的第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
vite
定位:新一代前端构建工具
两大组成部分:
1.No-bundle开发服务，源文件无需打包 2.生产环境基于Rollup 的 Bundler 核心特征
1.高性能,dev启动速度和热更新速度非常快! 2.简单易用，开发者体验好
相比Webpack需要对entry、loader、plugin等进行诸多配置，Vite的使用可谓是相当简单了。只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，包括：CSS预处理、html预处理、异步加载、分包、压缩、HMR等。他使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。适合前端新手。
Vite的劣势：
- 生态不及webpack，加载器、插件不够丰富
- 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
- 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
如何使用
- 提前安装pnpm npm i -g pnpm
- pnpm create vite #初始化命令
- pnpm install #安装依赖
- npm run dev #启动项目
意义
模块化
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译
- 资源加载
产物质量
产物压缩、无用代码删除、语法降级
开发效率
热更新
