vite的简单介绍和使用

63 阅读2分钟

一、什么是Vite ?

vite (法语意为 “快速的”,发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

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

二、创建一个vite 项目

第一步 创建命令 npm init vite-app (project 项目名) |  yarn create vite-app  (project 项目名)

第二步 切换到目录 cd project

第三步 安装依赖包  npm install   |  yarn

第四步 启动项目  npm run dev  |  yarn dev

三、vite项目使用TypeScript

 vite原生支持ts,使用方式非常简单直接把script 的lang 换成ts即可,如果开发环境我们查看浏览器中的请求,会发现请求的依然是ts的代码

注意:在vite2中,已经不再使用Koa了,而是使用Connect来搭建的服务器

四、vite项目使用css

  1. vite可以直接支持css的处理
  2. vite项目使用less sass scss,只需要下载各自的loader和依赖即可
  3. vite处理postcss,只需要安装postcss,并且配置 postcss.config.js 的配置文件即可npm install postcss postcss-preset-env -D

五、vite打包和预览

本地局部安装可以直接运行npx vite build

六、vite打包快的原因

因为vite是基于ESBuild,所以速度快,且对ESBuild生态支撑好

1.什么是ESBuild?

ESbuild 是一个类似webpack构建工具。它的构建速度是 webpack 的几十倍。

2.ESBuild为什么这么快?

  • 使用GO语言编写的, 可以直接转换成机器代码, 而无需经过字节码;
  • ESBuild可以充分利用CPU的多内核,尽可能让它们饱和运行;
  • ESBuild的所有内容都是从零开始编写的,而不是使用第三方,所以从一开始就可以考虑各种性能问题;

3.ESBuild的特点

注意: 在当前前端环境中,直接使用 esbuild 代理 webpack 是不现实的。在目前的主流方案是在 webpack 中使用 esbuild 去做一些代码的 transform (代替 babel-loader)。或者使用 vite

七、vite原理

  • vite1: 使用的是 koa
  • vite2: 使用的是 Connext; Connext更加是做一个转发功能

请求服务器 --> 获取自己的代码 --> Connext拦截 -->vite工具处理成 es6.js代码---> Connext转发--->发送给浏览器