Vite 的基本使用 (第一版）

TimYang
177 阅读4分钟

Vite

1.Vite介绍

  • Webpack是目前整个前端使用最多的构建工具，除了webpack也有其他的一些构建工具:

  • 比如rollup、parcel、gulp、vite等等

  • 什么是Vite呢？上官网：Next Generation Frontend Tooling

  • 那么如何定义什么是下一代开发的构建工具呢？

    • 在实际的开发中,我们编写的代码是不能被浏览器直接识别的,比如TS,Vue,ES6,etc...
    • 所以必须通过构建工具来进行代码转换编译
    • 但是如果项目越来越大,需要处理JS呈指数级增长,模块多起来了,构建工具就需要很长时间进行服务器的开启,即使是HMR也需要几秒钟才能在浏览器反应出来

    • 那么Vite作为新的前端构建工具,可以有效的提升前端开发的体验

    • Vite主要有两部分组成:

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

2.Vite的安装和使用

  1.  npm install vite –g # 全局安装 
 npm install vite –D # 局部安装

  2. npx vite

  3. 使用后会搭建服务

  1. Vite本身会对css进行编译，无需跟webpack一样去配置loader

    • 创建css文件下下面放着style.css样式

      body {
  font-size:18px
  background-color: red
}

    • 在js文件中导入

      import "./css/style.css";

    • 使用npx vite可以直接编译出结果

  1. 虽然会识别css,然而less是不进行识别

    • 创建title.less文件在css文件下

      @fontSize: 50px;
@fontColor: yellow;
​
.title {
  font-size: @fontSize;
  color: @fontColor;
  
  user-select: none; //(查看第6点跟这个有关)
}

    • 在上面的js文件中导入

      import "./css/style.css";
import "./css/title.less";
​
const titleEl = document.createElement('div');
titleEl.className = "title";
titleEl.innerHTML = "Hello Vite";
document.body.appendChild(titleEl);

    • 这就需要去安装less了

      npm install less -D

    • 这样npx 进行编译后就能成功输出

  2. 还有一个问题就是如果浏览器样式前缀如何加入呢?

    • 那么在这里就需要去使用postcss了

    • 因为Vite3已经集成了postcss就无需再去下载直接进行相关配置就可以了,直接创建出postcss.config.js配置

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

    • 再进行npx vite编译：结果如下

3.Vite对TypeScript的支持

  • 创建一个ts后缀文件

    export default function add(num1:number,num2:number):number {
  return num1 + num2
}

  • 在js文件中导入

    import "./css/style.css";
import "./css/title.less";
import add from "./ts/add" //我这里创建的是add.ts,你们使用的时候可以创建自己的名字
​
console.log(add(10,20)) //编译成功
​
​
const titleEl = document.createElement('div');
titleEl.className = "title";
titleEl.innerHTML = "Hello Vite";
document.body.appendChild(titleEl);

  • 使用npx 编译

    • 你就会发现上面的方法 10 + 20 直接打印出来在浏览器中,那么就可以说其实Vite是支持ts文件的编译
    • 问题来了?为什么可以进行ts支持的呢？(包括前面的css和less)

[注意⚠️​]  上图可以理解为vite其实就是做了转发

4.Vite对vue的支持

  • 安装vue

    npm install vue@next -D

  • 创建一个App.vue文件

    <template>
  <div>
    <h2>{{firstName}}</h2>
  </div>
</template>
​
<script setup>
  const firstName = ref("法外狂徒张三")
  return {
    firstName
  }
</script>
​
<style scoped>
  h2 {
    color: white;
  }
</style>

  • 在js中导入

    import { createApp } from 'vue';
import App from './vue/App.vue';
​
createApp(App).mount("#app");

  • 在模版中带入ap

    <!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>

  • npx 编译

    • 你就会发现解析错误,提示你安装对应的插件

那么你就要下载插件,官方提供了以下插件对vue进行一个支持

下载完插件就必须进行配置,创建一个vite.config.js

import vue from '@vitejs/plugin-vue'
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [vue()]
})

[注意]  从vue3.2.13+ 和@vitejs/plugin-vue1.9.0+ 开始，@vue/compiler-sfc不再需要作为对等依赖项

然后执行npx vite就可以显示在浏览器中了。

这边还有一个知识点!!!!!!!!!!!!!!!

现在更新版本了,所以找到.vite下面会有一个deps文件夹,下面才是这些相关的三方包,而且解决了路径问题

如果vite会给下载的lodash和vue进行一个预打包,假设你重新开启项目跑起来那么,下一次就不需要解析着两个东西,这样会大大加快了编译速度。大家动手试试吧,但是不仅仅是这两个文件进行预打包哦，其他的也会。

5.Vite打包相关操作

  1. 使用 npx vite build进行dist文件的打包,打包生成相对应的dist文件

  2. 使用 npx vite preview 可以预览打包后的效果

  3. 真实开发不会总是使用npx,一般都在package.json中进行设置

    "scripts": {
  "serve":"vite",
  "build":"vite build",
  "preview":"vite preview"
}

6.ESBuild解析

ESBuild的优点:

  1. 极速，无需缓存
  2. ES6 和 CommonJS 模块
  3. ES6 模块的 Tree Shaking
  4. JavaScript 和 Go的API
  5. TypeScript和JSX语法
  6. 支持Source maps
  7. 支持代码压缩Minification
  8. 支持扩展其他插件Plugins

为什么您这么快！啊🤔

  • 使用的是Go语言编写的,可以直接转换成机器代码,无需经过字节码
  • 充分利用CPU多内核,尽可能的饱和运行
  • 没有第三方的东西,从零开始搭建的
avatar
文章
阅读
粉丝