Vite入门 ｜ 青训营笔记

Vite入门 ｜ 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第13天。

认识Vite

Webpack 是目前整个前端使用最多的构建工具，但是除了 Webpack 之后也存在其他一些构建工具。比如：rollup, parcel, gulp, Vite 等等。

Vite的官方定位是下一代前端开发和构建工具。

如何定义下一代开发和构建工具呢？

在实际开发中，我们在编写的代码往往是不能被浏览器直接识别的，比如ES6, TypeScript, Vue文件等。所以此时我们必须通过构建工具来对代码进行转换，编译，类似的工具有 Webpack, rollup, parcel。但是随着项目越来越大，需要处理的Javascript呈指数级增长，模块越来越多。构建工具需要很长时间才能开启服务器，HMR 也需要几秒钟才能在浏览器反应过来。所以出现了 Vite。

Vite 具有以下特点：

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译

Vite的安装和使用

安装：

npm install vite -g   //全局安装
npm install vite -D   //局部安装

通过vite来启动项目：

npx vite

使用Vite后，在浏览器中加载文件的数目大幅减少。

项目启动后，可以通过import_from加载第三方模块，比如：
import _ from "lodash-es"

Vite对常见文件的支持

1. CSS：直接在主文件中导入 CSS 即可，不需要任何其他的配置信息
2. less：使用命令 npm install less -D 直接导入 less 文件，并且安装 less。如果不安装 less 的话，则会报错
3. postcss：使用命令 npm install postcss -D 安装 postcss，再使用命令 npm install postcss-preset-env -D 安装相关的插件，并且在 postcss.config.js 中配置相应的插件即可
4. Typescript：Vite 完全可以支持 Typescript,不需要任何配置，只需要直接引入 Typescript 即可
5. Vue：使用命令 npm install @vitejs/plugin-vue -D 安装相关的 Vue，然后再新增一个 vite.config.js ，再在其中配置信息

Vite打包

Vite 打包执行的代码是：npx vite build

当我们执行该命令时，会在 node_modules 中创建一个 .vite 文件夹，在其中存放一些打包的文件，当下次打包时，就可以直接使用 .vite 文件夹中的文件。

Vite预览

打包后的文件可以不开启 live serve，此时我们可以执行命令： npx vite preview 来进行开启服务进行预览。

Vite脚手架工具

在开发中我们不可能一个项目所有的内容都使用vite从头开始搭建。此时我们应该考虑使用Vite脚手架工具@vitejs/create-app，它类似于 vue-cli, create-react-app。

使用Vite脚手架工具的代码是：

npm install @vitejs/create-app -g
create-app 项目名称