Vite： 5 篇

前言​

在现代前端开发中，打包工具已经成为不可或缺的一部分。它们可以将多个文件合并为一个或多个文件，使前端应用的加载和运行速度更快。目前，Vite 和 Webpack 是最受欢迎的打包工具之一。本文将介绍它们之间的比较和区别，以帮助你选择适合自己项目的工具。

什么是 Vite？​

Vite 是一种新型的前端构建工具，旨在提高开发过程中的开发体验和构建速度。它支持所有的现代前端框架，如 Vue、React、Angular等，以及原生的 HTML/CSS/JS 应用。

Vite 的核心理念是“快速开发”。它采用了一种新的开发方式，即在开发过程中不需要事先打包应用程序，而是在应用程序运行时即时编译和构建。这种方式使得开发者可以更快地编写代码，而无需等待长时间的编译和构建过程。

什么是 Webpack？​

Webpack 是一个广泛使用的打包工具，为现代 Web 应用程序提供了强大的静态资源管理功能。Webpack 可以将多个文件打包成一个或多个文件，并使它们在浏览器中快速加载。Webpack 是一个高度可配置的工具，因此可以根据项目的需要进行定制。

Webpack 的核心理念是“模块化”。它支持使用各种语言和框架编写模块，并将它们打包成可在浏览器中使用的 JavaScript 文件。Webpack 还提供了强大的插件系统，可以扩展其功能。

使用 Vite 创建前端项目的时候（例如 Vue 3.0 项目）不会自动添加 ESLint 的配置，但 ESLint 又是维护良好代码规范和方便团队合作的重要工具，所以几乎在每个前端项目中都有 ESLint 的存在。这篇文章我们看一下：

• 如何给 Vite 创建的项目配置 ESLint
• 集成 ESLint 到 VS Code 中
• 避免 ESLint 和 Prettier 冲突。

什么是 ESLint​

ESLint 是一个用于检查 JavaScript 代码的工具。由于 JavaScript 的语法松散，并且是即时编译的语言，所以在写代码的时候很容易出现错误，这些错误只能在运行的时候才能够发现，并且难以确定具体的位置，这样就让开发的效率大大的降低。

而 ESLint 可以让我们在编写的代码的时候，就检查语法错误，提前发现 BUG，例如拼写错误。它还可以自定义代码规范，这样在团队合作开发的时候，写出风格统一、清晰的代码，使得代码更容易阅读和维护。

环境变量是在开发中，用于设置可配置的信息。例如在前端开发中，我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量，这篇文章我们来看一下如何在 Vite 2.0 创建的项目中，创建和导入环境变量。

Vite 2.0 创建的项目中，默认有下面 4 个默认的环境变量：

使用 Vite 2.0 创建的项目，默认不会自动打开浏览器。假设我们运行下面的命令启动 Vite 开发服务器：

npm run dev

yarn dev

pnpm run dev

命令行中会提示访问 http://localhost:3000 这个链接，但是并不会帮我们自动打开浏览器。我们还得手动复制 URL 到浏览器打开，或者使用 ctrl/command + 鼠标左键 来打开链接。

那么要如何让 Vite 2.0 创建的项目，在启动之后自动打开浏览器呢？

我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，针对这两种情况，可以直接用同一个配置来解决，即代理配置。 ​

不管是 Vite 还是 Webpack，这些打包工具都支持设置前端代理，它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址，这样前后端就视为使用了相同的域名、协议和端口，就避免了跨域的问题，还能避免繁琐的反复编写域名。