vite

什么是vite
浏览器原生支持模块化
vite使用
Vite对css的支持
Vite对TypeScript的支持
Vite对vue的支持
vite脚手架
ESBuild解析

# 什么是vite

官方的定位：下一代前端开发与构建工具；

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

我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等；

所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel；但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多；

构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来；

Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。

vite它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块 (opens new window) 提供了丰富的内建功能 (opens new window)，如速度快到惊人的模块热更新（HMR） (opens new window)。
一套构建指令，它使用 Rollup (opens new window) 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

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

# 浏览器原生支持模块化

<script src="./src/main.js" type="module"></script>

如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？

首先，我们会发现在使用loadash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗；

p其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别；

事实上，vite就帮助我们解决了上面的所有问题

# vite使用

npm i -D vite less postcss-preset-env postcss @vitejs/plugin-vue @vue/compiler-sfc vue-tsc typescript
npm i vue@next

vite  # 运行
vite build # 打包  
vite preview #预览

1
2
3
4
5
6

# Vite对css的支持

vite可以直接支持css的处理，直接导入css即可；

vite可以直接支持css预处理器，比如less

p直接导入less；

p之后安装less编译器；

n vite直接支持postcss的转换：

p只需要安装postcss，并且配置 postcss.config.js 的配置文件即可；

npm install less  postcss postcss-preset-env -D

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-preset-env")
  ]
}

1
2
3
4
5

# Vite对TypeScript的支持

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译：

只需要直接导入即可；

如果我们查看浏览器中的请求，会发现请求的依然是ts的代码：这是因为vite中的服务器Connect会对我们的请求进行转发；

获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析；

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

# 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 @vue/compiler-sfc  -D

在vite.config.js中配置插件：

const vue = require('@vitejs/plugin-vue'); // 引入vue插件

module.exports = {
  plugins: [
    vue()
  ]
}

1
2
3
4
5
6
7

# 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 -g

create-app XX项目

1
2
3

# ESBuild解析

ESBuild的特点：

超快的构建速度，并且不需要缓存；
支持ES6和CommonJS的模块化；
支持ES6的Tree Shaking；
支持Go、JavaScript的API；
支持TypeScript、JSX等语法编译；
支持SourceMap；
支持代码压缩；
支持扩展其他插件；

ESBuild为什么这么快呢？

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

← grunt介绍 rollup→