Vite的定义
Vite是一种新型前端构建工具，基于ECMAScript标准原生模块系统(ES Modules)能够显著提升前端开发体验。
它主要由两部分组成：
- 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新(HMR)
- 一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。
Vite意在提供开箱即用的配置，同时它的插件API和Js API带来了高度的可扩展性，并有完整的类型支持。
为什么选Vite
如果应用比较复杂，使用Webpack的开发过程相对低效：
Webpack Dev Server冷启动时间会比较长；
Webpack HMR热更新的反应速度比较慢。
Webpack Dev Server 在启动时，需要先build一遍，而build的过程是需要耗费很多时间的。
image.png
而Vite则完全不同，当我们执行vite serve 时，内部直接启动了Web Server,并不会先编译所有的代码文件。
image.png
浏览器支持
- 开发环境中： Vite需要在支持原生ES模块动态导入的浏览器中使用。
- 生产环境中： 默认支持的浏览器需要支持通过脚本标签引入原生ES模块。
快速上手
使用 NPM:
npm init @vitejs/app
使用 Yarn:
yarn create @vitejs/app
通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
支持的模板预设包括：
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
命令行界面
在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：
{
"scripts": {
"dev": "vite", // 启动开发服务器
"build": "vite build", // 为生产环境构建产物
"serve": "vite preview" // 本地预览生产构建产物
}
}
配置 Vite
当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录下名为 vite.config.js 的文件.
// 具体参数请访问官网： https://vitejs.cn/config/
// vite.config.js
export default {
// 配置选项
}
感兴趣的可以看尤大大的视频分享：
https://www.bilibili.com/video/BV1kh411Q7WN?from=search&seid=16735981559223298572
网友评论