Vite学习指南

那本课程都适合哪些人群呢？

想要学习前端工程化，在新项目中投入使用 Vite 构建工具的朋友

Webpack 转战到 Vite 的小伙伴

前端架构师们，可以充实自己的工具箱

当然如果你没有项目相关开发经验，也可以从本课程中受益，让你开阔眼界，将你学到的前端知识融会

贯通，应用到你的实战中。

2.1 什么是 Vite

Vite （法语意为 " 快速的 " ，发音 /vit/

，发音同 "veet" ）是一种新型前端构建工具，能够显著提

升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能 ，如速度快到惊人的 模块热更新

（ HMR ） 。

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优

化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整

的类型支持。

首先呢我们来看一下，在 Vite 中如何集成 eslint ，为了使我们的代码具备可预测性，易于浏览并易于理

解，在构建一个大型规模的应用的时候，我们需要在 Vtie 中集成 ESLint 改善咱们开发人员的体验，特别

是与一个团队的合作，我们更需要设置一些自动化的代码提示和格式化。

首先呢，我们来看一看在 Vite 中如何集成 eslint ，返回 vscode ，我们打算在 vite-basiscs-vanilla 这个

项目里边，去使用 eslint ，在没使用之前，我们先来看一下我们这些文件的表现，我们先看一下

main.js ，这个文件很显然好像没有什么问题，包括 main.json.js 也是没有问题的，但事实上呢，我们这

些代码如果在一个团队里边，按着统一的规范的话，可能不规范。

那么接下来呢，我们首先在 vscode 里边去安装一个扩展，点击这个按钮，我们输入一下 eslint ，这样的

话，我们就搜到了关于 eslint 这样的扩展，我们点击安装就好了，这里呢很显然我们已经安装好了，他

的版本是 2.2.2 ，安装好了以后呢，我们回到我们代码里边，很显然这一步还不够，我们得需要去安装

eslint 相关的一些插件。

首先我们在这个目录下面点击右键，在集成终端中打开我们这个目录，我们去安装 eslint 相关的一些插

件，我们执行 pnpm i eslint - config - standard eslint - plugin - import eslint - plugin - promise

eslint - plugin - node eslint - D 稍等就安装好了，这里头有一个 warning 就是他说我们这里边需要依赖

的 7.12.1 的版本 , 但是我们装的是 8.1.0 版本这个无大碍，所以我们暂时不用去关注他。

那安装完了以后呢，我们现在再看一下 main.json 还是没有任何的反馈。那么接下来我们在当前的目录下

面创建一个新的文件，取名为叫做 .eslintrc.js 我们来去通过 module exports 来做一个配置。在配置里边

儿呢，我们去定义一个 extends 这样的一个属性，它的值呢怎么可以定成 stamdard 的是刚才我们安装好

那个标准的的 eslint 配置好了，现在呢我们看到这个 eslintrc.js 已经有关于语法的问题了。

const modules = import.meta.globEager('./glob/*[1].*')
// console.log(modules)
Object.entries(modules).forEach(([key, value]) => {
console.log(key, value.default)
// value().then(module => {
// console.log(key, module.default)
// })
})// eslintrc.js
module.exports = {
extends: 'standard'
}

那我们看一下 problem ，他告诉我们 string 必须要用一个单引号。很显然我们这个字符串呢用的是双引

号，另外呢他告诉我们新行必须要求我们在这个末尾上添加一下，那很显然，我们需要手工的去做一些

调整。

我们可以把这个给改一下，改完了以后我们看到这个文件就没有任何的关于也是语法的问题了，那接下

来我们再来看一下 main-json.js ，我发现这个文件貌似没有什么问题。

再去打开一个文件，再去打开一个文件，再去打开一个文件，我们看到呢这里头貌似好像都满足了们所

谓的 eslint 的一些语法要求。

那如果我们的代码里面有一些不满足的要求会怎么样呢？

比方说我们再打开一个 glob 下面的 m1.js ，好，我们看到这个代码呢给我们的提示 , 新行要求我们在末尾

需要添加一下 , 很显然我没有添加，那大家想一想，如果我们每一个这样的 js 文件都属工的进行真的修改

一来费时间，二来呢可能我们也改不全，会漏改一些内容。

那怎么办呢？哎，我能不能有个工具来帮助我们来去自动的进行这样的问题的发现并且修改呢？我们可

以采用比方说保存文件以后格式化就帮助我们自动实现了呢。这是可以的，我们得需要借助于另外的一

个工具。这个工具呢就是我们介绍的 prettier ，它可以帮助我们实现这个功能。

这功能的添加我们首先得做几个工作，第一步我们先在 vscode 里面安装一个 prettier 的这样的一个所谓

的扩展。我们属于一个 prettier ，好，发现了，这里头就有一个这样的 prettier 的插件，我们的安装好就

可以了，这里我们已经安装好了，他的版本是 9.3.0 。

安装好这个插件以后还没有完成彻底的任务，我们得需要在我们项目的根目录下面去做一个 prettier 的一

个配置，我们这里面呢再去创建一个新的文件。这个配置文件我们可以取名为叫做 .prettierrc ，注意，

这是一个类似于 json 的一个文件，我们呢不要在这里面去编写 .js 的语法，我们先写个花括号，然后在里

头呢我们去写一个叫做 semi 也就是所谓的分号。我们要不要加分号呢？我们可以对应为 false ，不让我们

说的语句加分号，第二呢就是我们在后面要加一个所谓的 singleQuote ，也就是我们语法里面的字符串的

双引号要不要加呢？这头我们可以写个 true 。也就是说我们双引号要变成一个单引号

// .prettierrc
{
"semi": false,
"singleQuote": true
}

这就是定义了我们一个的规则。那以后呢我们在检查的时候，可以按照我们这个规则来继续的定义。关

于 prettier 的其他规则，大家可以参照官网网站去看一下。

配置完了以后呢，那我们来再去看一下 m1.js ，很显然这里头它并没有帮助我们做相关的修改。我们保存

一下文件也没有完成，那怎么办呢？我们还得需要借助于 vscode 的一些功能。

首先呢，我们打开一个配置。在配置里边呢，我们去搜索一下 (format on save) ，我们要把它勾掉，等于

我们在保存这个文件的时候呢去做一些格式化。另外呢，我们还得需要在这后边再去搜索一个叫做

(formatter) ，这里头有一个 default formatter 。我们选择哪一个格式化的工具呢？我们选择这个

prettier 就可以了。好，这个完成了以后，接下来我们打开这个文件按一下 Ctrl+s ，好，发现了它会自动

的帮助我们产生一个新行。以此类推， m2 Ctrl+s 一样的，那么所有的这些文件呢我们都可以看出会帮助

我们做符合 eslint 的这样来一些语法，那 prettier 他会帮助我们完成这个工作。 说到这儿感觉我们的工作呢貌似已经完成了，但事实上如果是我们手工的需要去把每一个文件都进行保

存也是一个问题，我们也会漏保存一些东西。那能不能让 eslint 帮助我们自动的进行检测，看看还有哪些

文件有问题呢？这个也是没有问题的，我们可以在 package.json 里面去配置一个 eslint 的脚本，我们可以

取名 lint 为或者是 eslint 都可以，后面的命令呢就是 eslint --ext 我们要去检查 js 文件，检查哪个目录呢？就

是当前目录下，如果将来我们可以把我们的 js 文件放在 src 这个目录下面，那你就可以写的当前目录下的

src 。目前呢我们没有 src 目录，所以呢我们就检查当前目录下面的 js 文件就好了。

// package.json
{
"name": "vite-basics-vanilla",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext js ./"
},
"devDependencies": {
"eslint": "^8.11.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"husky": "^7.0.4",
"vite": "^2.8.0"
}
}

保存一下，然后在我们的终端上面我们清一下屏，执行一下 pnpm run lint ，大家看到还有一个漏改了

worker.js 就是的，这里边告诉我们的错误是，关于空格方面以及关于 postMessage 没有定义方面，那我

们来打开这个 worker 文件，它是在当前我们这个项目的根目录下面我们打开这个 worker.js 我发现了，你

果然有一些问题，我们先去保存一下。保存完了以后呢，我发现还是有很多问题的，希望我们要像 var 改

为 const, 第二呢，他希望我们在这个 function 的后面加一个空格儿，另外呢 postMessage 并不是我们当

前这个文件里头具有的一个方法。他应该是一个 window 对象，上面带着一个全局的函数。我们现在呢

可以执行一下保存，发现了这些问题并没有直接的解决。

很想来我们那些配置呢可能不全，现在我们先不着急解决这些问题。留着的这个问题以便于我们后边的

测试，我们先把相关的这些文件都关闭掉。

接下来呢我们来看一下另外一个需求，我们也希望在项目打包之前来发现一些 eslint 错误，如果我们这些

错误不解决，我们不希望我们的项目进行 build 首先呢我们来看一下 package.json ，在这里边儿有一个叫

做 pnpm run build 的命令，我们可以看行一下。发现呢，这个 build 的工作已经完成了，很显然在 build

之前没有进行 eslint 的检查。我们可以在这面命令的前面加一个 pnpm run lint && 表示的 build 这个命

令，

// package.json
{
"name": "vite-basics-vanilla",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite","build": "pnpm run lint && vite build",
"preview": "vite preview",
"lint": "eslint --ext js ./"
},
"devDependencies": {
"eslint": "^8.11.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"husky": "^7.0.4",
"vite": "^2.8.0"
}

首先先进行对他的检查，然后再进行 build ，保存一下，然后呢我们再去执行一下 pnpm run build ，

好，我们发现呢这里头有很多问题，这里头有一大堆问题是什么呢？

我们来看是这个编译以后的 js 文件，也就是我们 dist 目录下的文件。这个呢我们暂时不用管它，因为 dist

目录是我们编译后的文件，我们不用检查它的 es 问题。我们只关心我们这个 worker.js 的这个错误。

另外呢，我们也不希望我们的项目在进行代码提交的时候带着我们这些问题提交 , 也就说我们希望在 git 进

行提交的时候，能够检查出我们的一些 es 问题。当我们把这些问题都解决了以后，再进行代码提交，这

个工作我们该怎么实现呢？

我得需要一个 git husky 这样的一个所谓的 hook 。关于 git hook ，大家可以参照 git 相关的一些文档，或者

是参照一下我的 webpack 相关视频。在那个视频里边儿呢详细的介绍了一下 git hook 的一个使用，我们

就直接的去使用它就好了。

返回我们当前的这个目录，在这个下面呢我们来去执行一个关于 git 一些操作。首先在我们当前的目录下

面呢去初始化一个 git 环境，我们执行一下 git init 。

那好，这样的话呢，我们初始化的环境就搞定了，接下来我们再 git 上面去做一个远端的仓库。

好，登录我的 git 我们新建一个项目。我们创建一个新的项目，叫做 (felix-courses-vite-vanilla) 。好，接

下来我们其他的内容按照默认点击 (create response) 就可以了，这样话就创建了一个远端的仓库。

我们可以把这句话 copy 下来。好，回到我们的 vscode ，我们把那个代码粘贴过来，好，这样的话没有任

何反应，表示我们这个远端仓库已经创建好了。好了，接下来呢我们执行一下 git status 。看到我们有很

多的文件需要提交，我们执行一下 git add. ，提交完了以后呢我们执行一下 git commit - m 'vite

init' 。好，这样的话呢，我们就已经提交成功了，打开 .gitignore 。我们看到这里有定义了很多文

件不需要我们提到服务器上的，比方说这个 dist, 但这个文件呢并不能够帮助我们拦截代码里的问题。那

怎么办呢？

我们得需要去做一个所谓的 git husky ，我们需要去安装一下。执行一下 pnpm i husky ， husky 是一个非

常好用的一个好用的工具。好，安装完了以后呢，我们执行一下 npx husky install 。我们安装一下

husky ，安装完了以后呢，大家看到这里有提示说 git hooks installed

这是我们的这个钩子已经安装好了，那现在呢我们来看一下 .husky 下面呢就有一个所谓的叫做

husky.sh 。那接下来呢我们开始准备去编写一个 hook ，也就是在 git 提交之前去执行的一个命令。 那这里呢？我们执行一下 pnpm husky add. husky /pre - commit ， pre-commit 就是我们在提交之前的

一个 hook ，后边我们去输入一个命令叫什么 pnpm run lint 回车。大家看到现在呢在我们的目录下面会

产生一个新的目录叫做 pre-commit, 这里呢就有一个 pnpm run lint ，也就是在 git 提交之前执行一下我们

lint 的检查。

好，那接下来呢我们执行一个 git commit - m 'add husky' 。好，回车。好，大家看到他先去执行了

一下 lint 发现很多问题，那我们可以把这个问题解决了以后再进行所谓 git 的提交。

这里呢为了不让他检查我们 dist 目录里面的问题，我们暂时把 dist 目录给删除掉。其实上呢大家也可以把

我们这些 js 文件放到 src 的目录下面，我们只需要去检查当前目录下 src 的就可以了。暂时呢我们就临时的

把 dist 目录给删除掉。保存一下，那接下来我们来去看一下重新的检查，我们再去进行一次这个提交。

大家看一下，只剩下这三个问题了。那我们就去改这个问题，我们把这个关闭掉打开 worker.js 。第一个

呢是个 warning ，他希望我们不要 var 使用来用 let const 来代替。那很显然，我们得需要去改成 let ，因为

下面我们对 i 还做了一个操作。 let 以后第一个问题就没有了，接着我们看第二个问题说我们丢了一个空格

在我们的 function 这个名字在后面，那我们可以在在后面加个空格，如果说我们就希望他不需要这个空

格的话，那我们也可以做个配置，后边这个配置的语法呢我们可以把它 copy 一下。到我们 eslintrc 这个目

录下面我们去定义一个叫做 rules 的规则。在这里边儿呢，我们可以我们刚才那个过来，后面我们可以定

义成字符串 off 。表示我们要关闭掉它。那很显然下面呢这里头还有其他的问题，一会儿我们再来看这个

问题，

// .eslintrc.js
module.exports = {
extends: 'standard',
rules: {
'space-before-function-paren': 'off'
},
}

那接下来呢我们到 worker.js 的里头看到这个问题果然不存在了。

接着还有一个问题就是 postMessage 没有发现，因为它是挂载到这个对象上面的。所以呢我们还得需要

去做深度的配置， postMessage 这个呢是一个未定义的问题。我们可以来看一下这个 not-undef 我们可

以 copy 一下到我们的 eslint 里头再去加一个规则叫 no-undef 变为 off 。

// .eslintrc.js
module.exports = {
extends: 'standard',
rules: {
'space-before-function-paren': 'off',
'no-undef': 'off'
},
}

保存一下，好，我发现了这回这个问题就不存在了，我们再次编译一下。好，我们看到这里还有两个新

的问题，是 eslintrc 的问题我们打开 eslintrc ，我们看到我们保存一下。发现了 prettier 已经不能够帮助我

们解决这个问题了，我们再来看一下他的问题是什么？就是这个所谓的 comma-dargle 我们可以放在我

们这里头进行一个配置，我们可以在这后边呢去写一个 comma-dargle 那它的规则我们可以去配一下，

或者直接写个 off 。 保存一下，好，我们看到了这里头这个提示就不存在了，我们再次执行一下。好，大家看到现在呢我们

这个提交就已经可以了，但是呢他告诉我们有几个内容还没有加进来，那我们可以执行一下 git add. ,

git commit - m 'test husky' 。

我发现在我们就成功的提交到我们远端的仓库里了。

好，至此呢我们就学会了如何在 Vite 中使用 eslint 以及如何使用 prettier 这个工具，在我们代码保存的时

候呢能够帮助我们自动的修正问题，并且呢我们还可以通过 git husky 这个 hook 工具来进行代码提交之

前的一个 eslint 检查。

好，这一招我们就讲到这里，大家加油！