Vite基础入门

coderklaus
502 阅读7分钟

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

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

  • 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等;
  • 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel
  • 但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多;
  • 构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来
  • 所以也有这样的说法:天下苦webpack久矣

Vite主要由两部分组成：

  • 一个开发服务器，它使用connect基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速
  • 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源;

浏览器原生支持ESM

js/math.js

export const sum = (num1, num2) => num1 + num2

index.js

// 在浏览器环境下，并不能自动识别和加上js后缀，所以需要显示手动进行添加
import { sum } from './js/math.js'

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>浏览器原生支持ESM</title>
</head>
<body>
  <!-- type为module的时候，必须启动服务来运行，浏览器才可以正常加载模块化相关的代码 -->
  <script src="./index.js" type="module"></script>
</body>
</html>

此时代码在浏览器中可以正常执行，所以现如今大多数浏览器原生支持ESM

但是在实际开发中我们会使用TypeScript、less、vue等来编写我们的代码，浏览器并不能直接识别;

而且浏览器原生虽然可以识别ESM，但是没有构建依赖关系图和tree shaking的功能，所以导致我们在实际构建的时候会使用到很多并不会使用到的代码

vite的诞生就是为了解决上述的问题，在编译阶段，vite只是将代码编译成ESM的代码并进行相应的类似于tree shaking的优化操作，随后将优化后的代码直接交给浏览器去执行，只有到打包上线的时候，才会将对应的代码转换为ES5的代码

也就是vite将浏览器可以实现的功能尽可能的交给浏览器去做，减少自己的工作量从而提升构建速度和性能

安装和使用

安装

npm install vite -g

本地服务

vite是以项目根目录下的index.html为入口文件的。所以必须在项目的根目录下新建index。html

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>
  <!-- 需要手动引入js的入口文件，并设置type为module -->
  <script src="./src/index.js" type="module"></script>
</body>
</html>

package.json

"scripts": {
  // 直接使用vite命令就可以使用vite开启一个本地服务
  // 默认的端口号是3000
  "serve": "vite"
}

在启动vite的时候，如果遇到因为esbuild没有安装而无法运行的错误的时候，可以查看这个issue来解决

vite在v1.x的时候。开启本地服务使用的是Koa，但是自Vite2.X的版本的时候，vite内部已经使用connect这个库来取代原本的koa

因为在vite中，做的更多的是转发(重定向)操作，而不是使用中间件

例如: 查看浏览器请求的时候，就会发现我们请求的资源是类似于main.less,math.ts之类的文件，vite的本地服务在接收到请求的时候

会将我们的请求转发给对应的编译后的js文件，如main.js,math.js等，所以此时实际返回的是对应的编译后的js文件

IEWNQ4.png

CSS处理

vite内部使用了rollup进行相关的预配置，所以vite默认就可以对css和css预处理器进行支持

但是vite默认是没有安装less，sass，postcss之类的工具的，所以对于他们依旧需要自行手动安装

css支持

// 直接引入即可支持
import './css/index.css'

预处理支持

以less为例

npm i less -D

// 直接引入即可支持
import './css/index.less'

postcss

npm i postcss postcss-preset-env -d

postcss.config.js

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

重启vite服务

js

// 此时引入的css文件会自动先被postcss进行相应的处理
import './css/index.css'

ts支持

vite自身就可以实现对于ts的编译

math.ts

export const sum = (num1: number, num2: number) => num1 + num2

main.js

import { sum } from './utils/math'
console.log(sum(10, 20))

此时，浏览器是可以正常显示对应的效果的

文件支持

vite自身就可以对外部文件进行支持，直接使用即可

import avatar from './imgs/avatar.jpg'

const image = document.createElement('img')
image.src = avatar
// 引入的方式类似于file-loader
document.body.appendChild(image)

vue文件

vite对vue提供第一优先级支持，但是需要安装对应的插件:

  • Vue 3 单文件组件支持: @vitejs/plugin-vue
  • Vue 3 JSX 支持: @vitejs/plugin-vue-jsx
  • Vue 2 支持: @vitejs/vite-plugin-vue2

vite.config.js --根目录下

import vue from '@vitejs/plugin-vue'

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

此时vite就可以对vue文件进行正常的解析和处理，同时Vite默认就开启了vue的HMR

IEWBY2.png

从打包的信息可以看出，vite在第一次构建的时候，会使用ESbuild对位于dependencies的包进行预编译

对应的编译内容会存放在node_modules/.vite文件夹下

只有dependencies发生改变或配置文件发生改变的时候，预编译才会重新执行

其余时候，直接从预编译好的文件夹中去取对应的内容，这样就可以大大提升对应的编译和构建的速度

react文件

vite底层构建的时候是依赖esbuild的，所以vite原生就可以实现对应jsx文件的支持

APP.jsx

import React from 'react'
import { Component } from 'react'

class App extends Component {
  render() {
    return <h2>App</h2>
  }
}

export default App

index.jsx

Tips：入口文件需要将后缀名修改为jsx，且react组件的后缀名需要为jsx，

只有这样，vite的依赖的Esbuild才可以正常将这些文件识别为react文件，并进行相应的解析

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

ReactDOM.render(<App />, document.getElementById('app'))

构建

vite底层在构建的时候是依赖rollup的，并对rollup进行了相关的预配置，

所以在构建的时候，我们直接执行vite build就可以对我们的项目进行构建

在构建后的代码，vite会自动将第三方代码，css等文件进行抽离，并对所有的文件进行丑化和压缩

预览

为了方便我们查看构建后的代码，vite提供了preview命令

执行vite preview后会再次开启一个本地服务来预览我们构建后的资源在实际运行下的效果

这个预览服务的端口默认为5000

Esbuild

Esbuild是一个使用go语言编写的构建工具，具有如下特点:

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

可以看出Esbuild的功能完全可以取代babel的相关功能

ESBuild的构建速度和其他构建工具速度对比:

IEW2fU.png

ESBuild为什么这么快呢?

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

vite脚手架工具

vite为了方便我们在开发的时候，基于vite进行项目搭建，vite提供了自己的脚手架工具@vitejs

# 执行下面这行命令后 vite就会开启命令行交互指引我们配置
# 配置后就可以生成对应的项目
npm init vite

IEWDH5.png

可以看到这个脚手架和vue/cli,create-react-app最大的不同是，这个脚手架支持多种框架，具有多种框架对应的项目模板

npm init vite
# 这行命令其实是下面两条命令的组合
npm i @vitejs/create-app -g  # 首次使用需要安装，之后再次使用就不需要了
create-app # 直接执行会以交互式输入项目名，也可以直接在后面跟上项目名 ---> create-app vite-vue-demo
avatar
文章
阅读
粉丝