Vite入门与了解

Vite入门与了解

  • 一、认识vite
  • 二、浏览器原生支持模块化
  • 三、Vite的安装和使用
  • 四、Vite对css的支持
  • 五、Vite对TypeScript的支持
  • 六、Vite对vue的支持
  • 七、Vite打包项目
  • 八、ESBuild解析
  • 九、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>Documenttitle>
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入门与了解_第1张图片

五、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入门与了解_第2张图片

七、Vite打包项目

  • 我们可以直接通过vite build来完成对当前项目的打包工具
  • npx vite build
    Vite入门与了解_第3张图片
  • 我们可以通过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 -g
  • create-app

以上内容主要来自coderwhy老师的讲解内容

你可能感兴趣的:(前端编译打包工具,前端)