Vite 的安装和基本使用

news2024/9/27 15:28:01

注意：Vite 本身也是依赖 Node.js 的，所以也需要安装好 Node 环境，并且 Vite 要求 Node 的版本要大于等于 12 版本。

下面，我们不会按照 Vite 官方文档中那样直接用 Vite 的脚手架搭建出一个完整的项目（npm init vite@latest），因为这样做很难理解 Vite 到底在这个项目中帮我们做了哪些事情。所以我们这里会从零开始，先安装 Vite 这个工具，再通过 Vite 对我们的代码一步步地做处理。

首先，我们安装一下 Vite 工具，这里我们只想在当前项目（vite的基本使用）下使用 Vite 对当前项目进行打包，所以我们选择局部安装：

npm install vite -D
复制代码

当然，你也可以全局安装：

npm install vite -g
复制代码

安装完 Vite 之后，我们想要用 Vite 对项目中的代码做一些处理，该怎么做呢？之前我们是通过 Live Server 插件启动的本地服务器打开的 index.html 文件，现在，我们可以把 Live Server 开启的本地服务器关了：

关掉 Live Server 的服务器后，我们再来执行 npx vite 命令（会使用局部的 vite 来搭建本地服务器）启动项目：

npx vite 执行的即 node_modules/.bin/vite 命令：

可以看到，执行 npx vite 之后，Vite 就会默认在 localhost 的 3000 端口上给我们搭建一个本地服务（这个服务和之前的 Live Server 没有关系），我们打开这个 http://localhost:3000/：

可见，Vite 已经对我们项目中的代码做了支持，这一过程中 Vite 会对我们 src 中的代码进行构建，构建完成后会搭建一个本地服务，之后浏览器访问的是 Vite 搭建的这个服务，Vite 的这个服务会提供相应的源代码。

而且，你会发现，Vite 的构建速度是非常快的，因为它是基于 ES modules 的，会直接把代码转成 ES modules 的代码，而我们的代码本来就是 ES modules 的代码，所以转换起来非常快。

那么，现在使用了 Vite 搭建的本地服务之后，和之间没有使用构建工具直接跑在 Live Server 服务上有什么区别呢？区别有三：

有关文件的后缀名可以省略了（在 Webpack 中也有这个功能），如 src/main.js 中之前导入的 js 文件现在可以省略 .js 后缀：
```
import _ from '../node_modules/lodash-es/lodash.default'
import { sum } from './js/math'
复制代码
```
从 node_modules 中导入模块时可以不写长长的路径了，直接写模块名即可，如 src/main.js 中导入 lodash-es 模块现在可以直接这么写：
```
import _ from 'lodash-es'
复制代码
```
会把有很多依赖的包（如 src/main.js 中导入的 lodash-es 模块）打包成一个文件，解决了之前上百个依赖文件发送上百次请求造成的性能消耗问题：

当然，这里还有几个额外的文件（client、env.js），这是 Vite 内部自动加载的，因为这里面需要做一些其它东西，所以它会加载一些环境相关的东西。