快速开始

启动项目

shell

npm create vite

说明

npm create vite 实际调用的是 create-vite
npm create 是 npm init 的别名
npm init <initializer> 相当于 npm exec <create-initializer>
- 这里 create 是固定前缀
- npm init @scope/init -> npm init @scope/create-init
- npm init @scope -> npm init @scope/create

vite 对应用中的模块区分为依赖(需要预构建) 和源码(加载时转换)，并基于 ESM 进行模块加载

预构建：服务启动后会对 node_modules 内容进行预编译(基于 esbuild, 速度极快)，以提高加载效率
- 对依赖模块统一化处理，转换为 ESM (兼容 CommonJS 和 UMD)
- 对多个子模块进行合并，减少请求数(如 lodash)
- 预编译后，对应文件将缓存在 node_modules/.vite/ 下
- 只有当 package.json 依赖和 lockfile 依赖调整时才会重新预构建
- 若存在本地依赖包，需要删除 node_modules/.vite/ 文件夹或使用 vite --force 启动开发服务器
加载流程：利用 <script type="module" src="xxx" /> 实现按需模块化加载
1. 浏览器在加载入口文件后，遇到内部 import 引入的包，则会发起对应的 HTTP 请求，
2. vite 会启动 koa 服务拦截对应地址的请求
3. 服务端对源码资源处理转换后再以 ESM 格式返回给浏览器
热更新：监听文件系统变更(使用 chokidar)并通知浏览器
- 通过 websocket 建立浏览器与服务器的通信
- 本地服务监听文件的修改
- 文件修改时服务器通知浏览器进行对应的更新

补充说明：生产环境使用 rollup 进行打包