（01）vite 从启动服务器开始

（01）vite 从启动服务器开始
文章目录
- 前言
  在浏览器中使用es模块
  初始化环境
  vite依赖预构建解决了什么问题
  创建vite.config.js配置vite
前言

Vite（发音为"veet"）是一种现代化的前端构建工具，旨在提供快速的开发体验。它由尤雨溪（Vue.js 的创始人）团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架（如Vue.js、React、以及Svelte等）的应用程序。

与传统的前端构建工具不同，Vite采用了一种基于ESM（ECMAScript模块）的开发服务器，利用浏览器原生支持的模块导入方式，实现了快速的冷启动和开发服务器启动的速度。它使用了一种称为“原生 ES 模块”的方式，允许按需加载模块，从而减少了不必要的初始化时间。

Vite还支持零配置的开发体验，通过约定的目录结构，你可以在不需要额外配置的情况下快速搭建项目。此外，Vite还提供了一些插件系统，使得开发者可以根据需要进行定制和扩展。

在浏览器中使用es模块

index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<script src="./main.js" type="module"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
```
main.js
```
import _ from "lodash";
import { count } from "./counter.js";

console.log(count)
1
2
3
4
```
counter.js
```
export var count = 0
1
```
浏览器报错，无法识别非相对路径或非绝对路径的资源

 初始化环境
```
 yarn init -y
1
```
```
 yarn add lodash
1
```
```
yarn add vite -D // 生产环境不使用vite
1
```
改造 package.json
```
{
  "name": "vite",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
通过vite启动项目服务器
```
yarn dev
1
```
成功打印count

看一下网络资源，counter main lodash全部都成功引入了。

vite依赖预构建解决了什么问题
1. 不同的第三方依赖包，有不同的导出格式（commonjs或者es module）。
2. 对路径的处理上，可以直接使用.vite/deps。
3. 网络多包传输性能问题
第一个问题，vite将所有的第三方模块全部统一编译为es module的格式
第二个问题，将编译好的所有模块都统一放置到 .vite/deps 文件夹下，这样就可以使用绝对路径，直接引入。

第三个问题，第三方的包，可能会有很多依赖，如果分开下载这些依赖就会形成特别多的包，vite将这些依赖的包和第三方包本身全部编译成一个文件。

创建vite.config.js配置vite

如果关闭依赖预构建会是什么情况。
```
yarn add lodash-es
1
```
创建 vite的配置文件 vite.config.js
```
import { defineConfig } from "vite"

export default defineConfig ({
    optimizeDeps: {
        exclude: ['lodash-es'] // 让lodash-es这个包不适用依赖预构建
    }
})
1
2
3
4
5
6
7
```
main.js 中引入lodash-es
```
import lodash from "lodash-es";
import { count } from "./counter.js";

console.log(lodash);

console.log(count);
1
2
3
4
5
6
```
重启服务器
```
yarn dev
1
```
lodash-es所有依赖的包都被分开下载了！！

还原 vite.config.js以后
```
import { defineConfig } from "vite"

export default defineConfig ({
    optimizeDeps: {
        // exclude: ['lodash-es'] // 让lodash-es这个包不适用依赖预构建
    }
})
1
2
3
4
5
6
7
```
vite不仅仅集成了服务器，还集成了HMR, 允许在应用程序运行时替换、添加或删除模块，而无需重新加载整个页面。这使得开发者能够更快地查看和测试他们对代码的更改，而无需手动刷新整个应用程序。
相关阅读:
一些显示和画图的小命令函数用法
 Spring中自定义类型转换器
 一文了解循环神经网络
 1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
 Day62——csrf跨站请求伪造，CBV添加装饰器，auth认证模块，基于django中间件设计项目功能
 salesforce是什么
 Spring框架之AOP
盘点年度最佳10大顶级绘图软件，满足你99%的图表需求，赶紧收藏
 SpringBoot3进阶用法
 Seatunnel系列之：从sqlserver数据库同步表的数据到mysql数据库
原文地址：https://blog.csdn.net/glorydx/article/details/134514594

文章目录

前言

在浏览器中使用es模块

初始化环境

vite依赖预构建解决了什么问题

创建vite.config.js配置vite