学会这20个库，让你快速看懂 vue3 和 vite3 源码( 四 ) _vue3

说直白一点就是通过 ws，咱们可以实现服务端和客户端的长连接，且通过 ws 对象，就可以获取到客户端发送过来的信息和主动推送信息给客户端。
使用：

server.js

const WebSocket = require('ws')const WebSocketServer = WebSocket.Server;// 创建 websocket 服务器 监听在 3000 端口const wss = new WebSocketServer({port: 3000})// 服务器被客户端连接wss.on('connection', (ws) => {// 通过 ws 对象，就可以获取到客户端发送过来的信息和主动推送信息给客户端var i=0var int = setInterval(function f() {ws.send(i++) // 每隔 1 秒给连接方报一次数}, 1000)})

client.js

const WebSocket = require('ws')const ws = new WebSocket('ws://localhost:3000')// 接受ws.on('message', (message) => {console.log(message)// 当数字达到 10 时，断开连接if (message == 10) {ws.send('close');ws.close()}})

16. connectconnect 是一个最早期的 HTTP 服务器框架，亦可称为中间件插件；express 就是基于此框架做的扩展；
注意：从 vite2 开始官方已从依赖 koa 转成 connect 了；
至于为什么使用 connect 而不是 koa，咱们看官方的回答：

文章插图

大概意思就是：由于大部分逻辑应该通过插件钩子而不是中间件来完成，因此对中间件的需求大大减少；所以使用 connect优先级会高于 Koa 。
17. esnoesno 是一个基于 esbuild 的 TS/ESNext 的 Node.js 运行时；
说直白点就是可以类似 ts-node 一样直接运行 TS 文件，那为甚么还用 esno 呢？
因为 esno 是基于 esbuild 运行的，esbuild 有多快，上面我们有讲到了吧，这里就不复述了。
使用：
{"scripts": {"start": "esno index.ts"},"dependencies": {"esno": "*"}}复制代码npm run start复制代码18. tsuptsup 是一个轻小且无需配置的，由 esbuild 支持的打包工具；
它可以直接把 .ts.tsx 转成不同格式 esm、cjs、iife 的文件，快速打包你的工具库；
使用：

安装 tsup

pnpm i tsup -D

在根目录下的 package.json 中配置

{"scripts": {"dev": "pnpm run build -- --watch --ignore-watch examples","build": "tsup src/index.ts --dts --format cjs,esm"},}

19. vitepressvitepress 是在 vuepress 的基础上实现的静态网站生成器，区别在于 vitepress 是建立在 vite 之上做的开发；
优势：

基于 vite 而不是 webpack，所有更快的启动时间，热重载等；
使用 vue3 来减少 js 的有效负载；

所以如果你想写一个在线文档仓库，那么 vitepress 就是一个很好的选择。

20. vitestvitest 是一个由 vite 提供支持的快速单元测试框架。
优势：

由 Vite ??提供支持的极速单元测试框架。
与 Vite 的配置通用，watch 模式下极快的反应（相当于测试中 HMR）。
可以对 Vue/React 组件进行测试。
开箱即用 Typescript/JSX/ESM（这一点我想配过 jest 的人应该懂是什么意思）
与 Jest 几乎相同的 API，同时也有 Jest 的快照功能（这个非常好用！）
模拟 DOM
生成测试覆盖率
ESM优先，顶级等待
开箱即用的 TypeScript / JSX 支持
套件和测试的过滤、超时、并发
等等

所以你还有什么理由不使用 vitest 呢？

其它【学会这20个库，让你快速看懂 vue3 和 vite3 源码】其实细心的同学可能会发现，目前 vue3 和 vite3 都是一个 monorepo 仓库，且都是使用 pnpm workspace 来进行仓库管理的；
所以了解 monorepo 和 pnpm workspace 对源码的阅读也是有很大的帮助的；
关于这块更多详细可以查看《如何入门 vite 源码》进行了解。
当然，上面的分享的工具库只是在源码中使用场景较多的库，还有一些库由于场景较少所以这里没有做详细的解释说明，如果您想了解源码中的哪个工具库，欢迎补充，取舍后我会做及时的更新；