Vite入门与了解
一、认识vite
- Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具
- 比如rollup、parcel、gulp、vite等等
什么是vite呢？官方的定位：下一代前端开发与构建工具- 如何定义下一代开发和构建工具呢？
- 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等
- 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel
- 但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多
- 构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来
- 所以也有这样的说法：天下苦webpack久矣
- Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验
- 它主要由两部分组成
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源
| Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持 |
|---|
二、浏览器原生支持模块化
- 现在浏览器已经支持es语法，在使用的时候，只需要在script标签里加上type=‘module’即可
通过一个示例来看一下
math.js
export function sum(num1, num2) {
return num1 + num2;
}
main.js
import {
sum } from './js/math.js';
console.log("Hello World");
console.log(sum(20, 30));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
通过live-server解决跨域，运行index.html
- 但是如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？
- 首先，我们会发现在使用lodash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗
- 其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别
三、Vite的安装和使用
- 注意：Vite本身也是依赖Node的，所以也需要安装好Node环境
- 并且Vite要求Node版本是大于12版本的
- 首先，我们安装一下vite工具
npm install vite –g # 全局安装npm install vite –D # 局部安装- 通过vite来启动项目
npx vite
四、Vite对css的支持
- vite可以直接支持css的处理
- 直接导入css即可
- vite可以直接支持css预处理器，比如less
- 直接导入less
- 之后安装less编译器
npm install less -D- vite直接支持postcss的转换
- 只需要安装postcss，并且配置 postcss.config.js 的配置文件即可
npm install postcss postcss-preset-env -D
五、Vite对TypeScript的支持
- vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译
- 只需要直接导入即可
- 如果我们查看浏览器中的请求，会发现请求的依然是ts的代码
- 这是因为vite中的服务器Connect会对我们的请求进行转发
- 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析
六、Vite对vue的支持
- vite对vue提供第一优先级支持
- Vue 3 单文件组件支持：
@vitejs/plugin-vue - Vue 3 JSX 支持：
@vitejs/plugin-vue-jsx - Vue 2 支持：
underfin/vite-plugin-vue2 - 安装支持vue的插件
npm install @vitejs/plugin-vue -D- 在vite.config.js中配置插件
七、Vite打包项目
- 我们可以直接通过vite build来完成对当前项目的打包工具
npx vite build
- 我们可以通过preview的方式，开启一个本地服务来预览打包后的效果
npx vite preview
八、ESBuild解析
- ESBuild的特点
- 超快的构建速度，并且不需要缓存
- 支持ES6和CommonJS的模块化
- 支持ES6的Tree Shaking
- 支持Go、JavaScript的API
- 支持TypeScript、JSX等语法编译
- 支持SourceMap
- 支持代码压缩
- 支持扩展其他插件
九、Vite脚手架工具
- 在开发中，我们不可能所有的项目都使用vite从零去搭建，比如一个react项目、Vue项目
- 这个时候vite还给我们提供了对应的脚手架工具
- 所以Vite实际上是有两个工具的
- vite：相当于是一个构件工具，类似于webpack、rollup
- @vitejs/create-app：类似vue-cli、create-react-app
- 如果使用脚手架工具呢？
npm init @vitejs/app- 上面的做法相当于省略了安装脚手架的过程
npm install @vitejs/create-app -gcreate-app
以上内容主要来自coderwhy老师的讲解内容