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

文章目录

- 前言
- 在浏览器中使用es模块
- 初始化环境
- vite依赖预构建解决了什么问题
- 创建vite.config.js配置vite
- 为什么vite.config.js可以用esmodule规范

前言

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>
<!-- 开启es 模块化 -->
<script src="./main.js" type="module"></script>

main.js

import _ from "lodash";
import { count } from "./counter.js";console.log(count)

counter.js

export var count = 0

浏览器报错，无法识别非相对路径或非绝对路径的资源

在这里插入图片描述

初始化环境

 yarn init -y

 yarn add lodash

yarn add vite -D // 生产环境不使用vite

改造 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"}
}

通过vite启动项目服务器

yarn dev

在这里插入图片描述
成功打印count

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

在这里插入图片描述

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

不同的第三方依赖包，有不同的导出格式（commonjs或者es module）。
对路径的处理上，可以直接使用.vite/deps。
网络多包传输性能问题

第一个问题，vite将所有的第三方模块全部统一编译为es module的格式
第二个问题，将编译好的所有模块都统一放置到 .vite/deps 文件夹下，这样就可以使用绝对路径，直接引入。
在这里插入图片描述
第三个问题，第三方的包，可能会有很多依赖，如果分开下载这些依赖就会形成特别多的包，vite将这些依赖的包和第三方包本身全部编译成一个文件。

在这里插入图片描述

创建vite.config.js配置vite

如果关闭依赖预构建会是什么情况。

yarn add lodash-es

创建 vite的配置文件 vite.config.js

import { defineConfig } from "vite"export default defineConfig ({optimizeDeps: {exclude: ['lodash-es'] // 让lodash-es这个包不适用依赖预构建}
})

main.js 中引入lodash-es

import lodash from "lodash-es";
import { count } from "./counter.js";console.log(lodash);console.log(count);

重启服务器

yarn dev

lodash-es所有依赖的包都被分开下载了！！
在这里插入图片描述
还原 vite.config.js以后

import { defineConfig } from "vite"export default defineConfig ({optimizeDeps: {// exclude: ['lodash-es'] // 让lodash-es这个包不适用依赖预构建}
})

在这里插入图片描述
vite不仅仅集成了服务器，还集成了HMR, 允许在应用程序运行时替换、添加或删除模块，而无需重新加载整个页面。这使得开发者能够更快地查看和测试他们对代码的更改，而无需手动刷新整个应用程序。

为什么vite.config.js可以用esmodule规范

vite.config.js本身是在node端运行，node端本身是不支持esmodule规范的，vite在读取vite.config.js这个文件的时候，如果发现文件采用的是esmodule规范编写的，会将文件的内容再次编译。
vite用fs.readFile转为字符串，然后再用字符串的replace语法，替换关键代码，将esmodule转化为commonjs规范后再运行。
当然，如果你配置vite.config.js的时候，像webpack.config.js那样，使用commonjs规范，也是可以的。

在这里插入图片描述