Vite 的安装和基本使用

41,604 阅读3分钟

「这是我参与2022首次更文挑战的第14天,活动详情查看:2022首次更文挑战」。

注意: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 开启的本地服务器关了:

image-20211219135615058

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

image-20211219140209427

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

image-20211219140051042

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

image-20211219141009682

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

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

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

  1. 有关文件的后缀名可以省略了(在 Webpack 中也有这个功能),如 src/main.js 中之前导入的 js 文件现在可以省略 .js 后缀:

    import _ from '../node_modules/lodash-es/lodash.default'
    import { sum } from './js/math'
    
  2. node_modules 中导入模块时可以不写长长的路径了,直接写模块名即可,如 src/main.js 中导入 lodash-es 模块现在可以直接这么写:

    import _ from 'lodash-es'
    
  3. 会把有很多依赖的包(如 src/main.js 中导入的 lodash-es 模块)打包成一个文件,解决了之前上百个依赖文件发送上百次请求造成的性能消耗问题:

    image-20211219144432249

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

可见,Vite 确实是帮我们做了一些事的。以上,就是 Vite 最基本的使用过程。