这是我参与「第四届青训营」笔记创作活动的第9天

Vite

什么是Vite

vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

一个开发服务器，它基于原生ES模块提供了丰富的内建功能，速度快模块热更新（HMR）。一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

部分前端开发已经离不开SASS，LESS等工具了，在多人协作项目中还会引入Lint和Test。前端文件在上线前就需要运行这些任务。

JS/CSS/HTML在设计之初并未料及它们会这样流行，整个Web已经形成一个大的分布式文档。低层语言的更换或升级都因兼容性问题而面临着巨大困难。这催生了各种中间语言个预处理器，例如SASS，LESS，CoffeeScript，Babel等。

这些预处理工具可以将我们的中间代码转换为可运行的JavaScript。这些预处理器使得我们可以预先使用ECMA Script6，以结构化的方式编写CSS，或者在CommonJS环境中编写JavaScript等等。

在一个典型的工作流中，每次Push主分支或npm发布都应首先运行代码风格检查和单元测试。我们需要这些操作能够在合适的时候自动执行。

在开发网站代码时，我们希望模块化地进行编码。每个业务逻辑，通用工具，或者架构元素都需要组织在单独的文件中。但是如果用户浏览网页时也载入这么多源文件，那么页面打开速度会大打折扣。

因此在网站发布时需要将源码合并压缩， JavaScript可能还会需要模块化（AMD，CommonJS等）， CSS文件可能也需要合并、添加兼容性前缀（ -webkit- , -moz- ）等。这些重复性工作我们也希望写成脚本。

最为复杂的构建需求是静态资源的URL替换。因为生产环境中的资源地址可能和开发环境中很不一样，可能是由于JS合并、CSS合并，也可能是由于应用了CDN加速。需要在部署时更改所有HTML文件中的静态资源地址。