Vite 是一个构建工具,最初只是作为 Vue 单文件组件(SFC)的开发服务器,但现在已经发展成为一个无捆绑的 JavaScript 开发服务器。它旨在为现代 Web 项目提供更快、更精简的开发体验。
Vite 不会在开发环境中捆绑我们的项目,而是使用原生 ES 模块导入。
根据官方文档:
Vite 是一个固执己见的 Web 开发构建工具,它在开发过程中通过原生 ES 模块导入为您的代码提供服务,并将其与用于生产的 Rollup 捆绑在一起。
Vite 与当前可用的其他开发服务器之间的主要区别在于,它在开发过程中不会捆绑您的文件。
它是如何工作的?
模块打包器如今流行的原因之一是,当 ES 模块首次在 ES2016 中引入时,浏览器对 ES6 模块的支持较差。许多现代浏览器现在都支持原生 ES 模块,您可以使用原生的 import
和 export
语句,我们可以使用 script
标签中的 type="module"
属性在 HTML 中包含我们的导入,以指定我们要导入的模块:
<script type="module" src="/path/to/file.js"></script>
根据文档,源代码中的 ES 导入语法直接提供给浏览器,任何支持原生 <script module>
的浏览器都会自动解析它们,然后为每次导入发出 HTTP 请求。开发服务器拦截来自浏览器的 HTTP 请求,并在必要时执行代码转换。
启动时间大幅提升。
Vite 特性
使用 Vite 的一些好处包括:
- 裸模块解析
- 热模块替换(HMR)
- 按需编译
- 配置选项
您可以通过在开发模式下的配置文件中添加 Koa 中间件和为构建生成一个 Rollup 插件来添加对自定义文件转换的支持。
Vite 的其他功能包括:
- 支持
.tsx
和.jsx
文件使用 esbuild 进行编译 - 对 TypeScript 的开箱即用支持,也使用 esbuild 进行编译
- 资源 URL 处理
- 支持 CSS 预处理器、PostCSS 和 CSS 模块
- 支持模式选项和环境变量
- ...
基本用法
为了开始使用 Vite,我们将使用 create-vite-app
,这是一个引导新 Vite 项目的样板文件,除了 Vue 以外,它还支持 React 和 Preact 等多个样板。
依次输入以下命令,使用模板创建新的 Vite 应用程序:
$ npx create-vite-app my-vite-project
$ npm i
$ npm run dev
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/e821a5b9f69adc964a993b5c59a76d4b.png)
运行以下命令打包应用程序:
$ vite build
Vite 使用 Rollup 进行生产构建,生产构建输出位于项目根目录中的 dist
目录中。它包含可以部署在任何地方的静态资产(并且可以进行 polyfill 以支持旧版浏览器)。