Vite 入门

​ ​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>
      
      
      
      

       
       
1.
      
      

根据​ ​文档​​​，源代码中的 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
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
      
      

效果如下：

使用 Vite 快速构建一个开发环境

运行以下命令打包应用程序：

      
      

       
       $ vite build
      
      
      
      

       
       
1.
      
      

Vite 使用 Rollup 进行生产构建，生产构建输出位于项目根目录中的 ​​dist​​ 目录中。它包含可以部署在任何地方的静态资产（并且可以进行 polyfill 以支持旧版浏览器）。