Vite是一个构建工具，它大大改善了前端开发体验。你可以用Vite为Vue和React等框架建立一个开发环境，甚至可以用三个命令建立一个带有开发服务器和热重载的vanilla JavaScript应用。
在没有额外配置的情况下，你也可以将Vite用于TypeScript，并且通过一个额外的命令，你可以将它用于Sass。(对于一个webpack项目来说，这需要大量的配置。你需要对加载器进行调整，并单独安装webpack开发服务器）。
一旦你安装了Vite，你就会有一个构建工具和开发服务器，并准备开始使用最新的工具和语言。
在这个介绍中，你将了解到使用Vite启动和运行是多么简单。你还会了解到Vite的速度有多快，如何迈出第一步，将其与Vue等库一起使用，以及当你使用它时，它在多大程度上摆脱了你的困扰。
有趣的是："Vite "这个名字来自法语中的 "快速 "一词，读作 "vit"。
Vite如何工作
Vite遵循最近的趋势，如Svelte（框架基本上被编译掉了）和其他工具，如Snowpack，利用现代JavaScript功能（如ES模块），提供流畅、快速的开发体验，几乎没有配置，也没有安装包的开销。你基本上是用一两个插件来安装Vite，只做很少的配置，然后就开始开发你的应用。
Vite提供了一个现代化的开发环境，它可以放弃捆绑步骤，因为它为浏览器提供原生ES模块。它为一些框架和vanilla JavaScript提供模板（一组启动文件），还提供TypeScript、JSX和Sass支持（尽管你需要为Sass安装一个依赖项）。
Vite的速度非常快，因为它利用了原生的ES模块，当有变化时不需要重建整个软件包。这使得HMR的更新速度始终如一，无论你的应用程序有多大。在为生产捆绑时，Vite提供了一个预配置的构建命令，在开箱时就加入了许多性能优化。
除了速度快之外，Vite还提供了热模块替换（意味着你在开发时可以在浏览器中看到代码的刷新），你可以用它来编译你的项目的最小化版本，以便在生产中服务。通过使用它，你可以快速启动和运行一个Vue或React项目，而不需要购买Vue CLI或Create React App，这两个项目都包含了厨房水槽。这使得它成为快速原型设计和小型项目的理想选择，尽管也没有什么可以阻止你在大型项目中使用它。
因此，让我们带着Vite转一转，看看我们的进展如何。看看我们有多少正常的工作流程可以用Vite处理得更好，这将是很有趣的。(Spolier: 我发现有些事情用Vite会更好，但不是所有事情。)
第一次安装
让我们从安装Vite开始吧。
注意：为了跟上本指南，你需要在你的机器上安装一个Node副本。
在运行npm init @vitejs/app ，我们可以选择一个项目名称和模板。在写这篇文章的时候，可供选择的是。
vanillavuevue-tsreactreact-tspreactpreact-tslit-elementlit-element-tssveltesvelte-ts
现在，让我们选择vanilla。这将生成一个目录（基于项目名称），里面有一些文件。有一个index.html,main.js,style.css,favicon.svg, 还有一些npm和Git的文件。package.json 只包含作为依赖关系的vite 和一些启动开发环境和开始构建的脚本。
正如屏幕上的说明所说，我们需要换到项目文件夹中并安装这些依赖项。
cd vite-project
npm install
然后我们可以用npm run dev 启动开发服务器，在http://localhost:3000/ 查看我们的应用程序。编辑我们的任何项目文件，都会在屏幕上立即反映出变化。
运行npm run build ，将项目编译成一个dist ，在那里可以找到JavaScript和CSS文件。这两个文件似乎都被最小化了。
文档中指出，TypeScript文件是支持开箱即用的。因此，尽管vanilla 选项没有专门的TypeScript模板，但我们应该能够将main.js 改名为main.ts ，Vite应该自动编译，对吗？是的，它是这样的!在重命名文件和添加一些TypeScript专用语法后，似乎都能很好地编译。
让我们对CSS进行同样的尝试，把它重命名为style.scss ，并添加一些Sass特有的语法。下面的错误在控制台和网页上都有显示。
我喜欢一个（相当）有描述性的错误!在运行npm install sass --save-dev ，并重新启动观察器后，我们现在可以尽情地使用Sass了。很好。
通常情况下，我会提前考虑堆栈的问题，安装我需要的依赖，并花费大量的时间来配置和弄清楚为什么有些工具不能很好地一起使用。当然，我们还是应该提前考虑我们的堆栈，但能够以如此小的努力从JavaScript切换到TypeScript，从CSS切换到Sass，是相当强大的。
在这一点上我很兴奋，因为我们可以在一两分钟内建立一个相当先进的堆栈。鉴于Vite使用index.html 作为切入点，并构建成普通的HTML、CSS和JavaScript，Vite已经被证明是静态网站和潜在的Jamstack应用程序的一个伟大工具。
继续阅读：什么是Vitejs？ SitePoint上的新前端构建工具概述
