이 20개의 라이브러리를 알고 있다면 Vue3+Vite3 소스 코드를 몇 초 안에 이해하세요!
- 青灯夜游앞으로
- 2022-07-28 17:55:254484검색
속담처럼: 일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 합니다! 오픈 소스 프로젝트를 작성하는 것도 예외는 아닙니다. 중국에서 매우 인기 있는 vue3 프레임워크와 vite 도구를 사용하면 구현 및 아키텍처 설계가 모두 동일합니다. 그리고 거대한 프로젝트, 그리고 이러한 프로젝트의 원활한 운영을 지원하는 것은 차례차례 바퀴에 불과합니다. 최근에 vue3 및 vite3의 소스 코드를 읽다가 좀 더 실용적인 것을 발견했습니다. 바퀴. 여기 있는 모든 사람과 공유하세요. vue3 框架 和 vite 工具 来讲，其中的实现与架构设计无不是一个 复杂而庞大的工程，而支撑这些工程能顺利运行的无不是一个又一个的轮子，正好最近有在阅读 vue3 和 vite3 的源码，发现一些较实用的轮子，在这里分享给大家。
如果你想对 前端工程化 有所涉猎的话，我相信下面的工具总有一款是你想要的！
1. picocolors
picocolors 是一个可以在终端修改输出字符样式的 npm 包，说直白点就是给字符添加颜色；
可能有的同学想到了，这不是跟 chalk 一样的吗？
没错，他们的作用其实就是一样的！
为什么选择 picocolors：
- 无依赖包；
- 比 chalk 体积小 14 倍，速度快 2 倍；
- 支持 CJS 和 ESM 项目；
所以大家明白选什么了吧！
当然因为 picocolors 包比较小，所以功能边界没有 chalk 的全面，但是用在一些自研等绝大部分的需求中是完全可以满足的。
注意：
因为历史等原因
vue3目前还在使用chalk；vite 已全面用
picocolors替代作为终端样式输出；不过
chalk为了优化，在最近的最新版本 v5 中已剔除依赖包；
2. prompts vs enquirer vs inquirer
乍一看，可能有的同学会有点懵，其实一句话交代就是：其实他们三都是用来 实现命令行交互式界面 的工具；
之所以放在一起是因为 vue3 和 vite
프론트엔드 엔지니어링에 참여하고 싶다면 다음 도구 중 하나가 당신이 원하는 것일 것이라고 믿습니다!
1. picocolors
지난 2년간 npm 다운로드 인기 추세:
간단한 요약:
실제로
vite도enquirer를 사용했습니다. 먼저, 크로스 플랫폼 사용 시 사용자가 겪는 버그를 해결하기 위해프롬프트로 대체했습니다. 물론enquirer가 좋지 않다는 의미는 아닙니다. , 단지 시나리오가 다르기 때문에 선택도 달라질 뿐입니다. ;vite起初也是使用的enquirer，只是后面为了满足用户跨平台使用时出现的 bug，才替换成了prompts，当然也并不是说enquirer不好，只是场景不同，所以选择会有所不同罢了；其实如果你想在自己的项目中使用
交互式界面工具，我这边还是比较推荐inquirer的，毕竟社区受欢迎程度和功能都是完全满足你的需求的。
3. cac
cac 是一个用于构建 CLI 应用程序的 JavaScript 库；
通俗点讲，就是给你的 cli 工具增加自定义一些命令，例如 vite create，后面的 create 命令就是通过 cac 来增加的；
因为该库较适用于一些自定义的工具库中，所以只在 vite 中使用， vue3 并不需要该工具；
主要是因为 vite 的工具是针对一些自定义的命令等场景不是特别复杂的情况；
我们看看 cac 的优势：
-
超轻量级：没有依赖，体积数倍小于
commander和yargs； -
易于学习：只需要学习 4 API
cli.option、cli.version、cli.helpcli.parse即可搞定大部分需求； - 功能强大：启用默认命令，可以像使用 git 的命令一样方便去使用它，且有参数和选项的校验、自动生成 help 等完善功能；
当然，如果你想写一个功能较多的 cli 工具，也是可以选择
commander和yargs的；不过一些中小型的 cli 工具我还是比较推荐
cac的；
4. npm-run-all
npm-run-all 是一个 cli 工具，可以并行、或者按顺序执行多个 npm 脚本；npm-run-all 在 vite 工具源码中有使用；
通俗点讲就是为了解决官方的 npm run 命令 无法同时运行多个脚本的问题，它可以把诸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一长串的命令通过 glob 语法简化成 npm-run-all clean build:* 一行命令。
提供三个命令：
-
npm-run-all：- 可以带
-s和-p参数的简写，分别对应串行和并行；
# 依次执行这三个任务命令 npm-run-all clean lint build # 同时执行这两个任务命令 npm-run-all --parallel lint build # 先串行执行 a 和 b, 再并行执行 c 和 d npm-run-all -s a b -p c d
- 可以带
-
run-s：为npm-run-all --serial的缩写； -
run-p：为npm-run-all --parallel的缩写；
上面只是简单的介绍了下，想要了解更多实用功能的，可以去官网查看；
最后：这个库属实是好用，良心推荐！
5. semver
semver 是一个语义化版本号管理的 npm 库；semver 在 vue3 框架源码和 vite 工具源码中都有使用；
说直白一点，你在开发一个开源库的时候，肯定会遇到要提醒用户不同版本号不同的情况，那么如何去判断用户版本过低，semver 就可以很好的帮助你解决这个问题；
semver 内置了许多方法，比如 判断一个版本是否合法，判断版本号命名是否正确，两个版本谁大谁小之类
실제로 자신의 프로젝트에서 대화형 인터페이스 도구를 사용하려면 여전히 inquirer를 추천합니다. 결국 커뮤니티는 인기가 높습니다. 범위와 기능은 귀하의 요구에 완전히 맞춰져 있습니다. 3.cac
cac는 CLI 애플리케이션 구축을 위한 JavaScript 라이브러리입니다.
간단히 말하면vite create와 같은 사용자 정의 명령을 CLI 도구에 추가한 다음 create 명령은 cac를 통해 추가됩니다. 🎜🎜이 라이브러리는 일부 사용자 정의 도구 라이브러리에 더 적합하기 때문에 <code>vite, vue3에서만 사용되며 이 도구는 필요하지 않습니다. 🎜🎜🎜 commander🎜 또는 yargs🎜 ? 🎜🎜🎜 주로 vite의 도구는 특별히 복잡하지 않은 일부 사용자 정의 명령 및 기타 시나리오를 위해 설계되었기 때문입니다. 🎜🎜 cac의 장점을 살펴보겠습니다. 🎜🎜🎜🎜초경량🎜: 있습니다. 종속성이 없으며 크기가 commander 및 yargs보다 몇 배 더 작습니다. 🎜🎜배우기 쉬움🎜: 4개의 API만 배우면 됩니다. cli.option , cli.version, cli.help cli.parse는 대부분의 요구 사항을 처리할 수 있습니다.🎜🎜 강력함🎜: 활성화 기본 명령은 git 명령처럼 쉽게 사용할 수 있으며 매개변수 및 옵션 확인, 자동 도움말 생성 등과 같은 완전한 기능을 갖추고 있습니다. 🎜물론, 더 많은 기능을 갖춘 cli 도구를 작성하려면commander및yargs를 선택할 수도 있습니다. 🎜🎜그러나 저는 여전히cac를 권장합니다. 일부 중소형 CLI 도구의 경우 ;🎜
4. npm-run-all
🎜npm-run-all🎜은 여러를 실행할 수 있는 <code>cli 도구입니다. npmin 병렬 또는 순차적 코드> 스크립트; npm-run-all은 vite 도구 소스 코드에서 사용됩니다. 🎜🎜일반 용어로 해결하는 것입니다. 공식 npm run 명령 동시에 여러 스크립트를 실행할 수 없는 문제는 npm run clean && npm run build:css &&와 같은 긴 명령 목록을 전달할 수 있습니다. npm run build:js && npm run build:html through glob 구문은 npm-run-all clean build:* 한 줄 명령으로 단순화되었습니다. 🎜🎜🎜세 가지 명령을 제공합니다: 🎜🎜🎜🎜npm-run-all: 🎜🎜-s 및 -p 매개변수를 사용할 수 있습니다. 각각 직렬 및 병렬에 해당 const semver = require('semver')
semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean(' =v1.2.3 ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
semver.minVersion('>=1.0.0') // '1.0.0'
semver.valid(semver.coerce('v2')) // '2.0.0'
semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'🎜run-s: npm-run-all --serial 약어 ; 🎜run-p: npm-run-all --parallel의 약어 🎜 간단한 소개만 하시면 됩니다. 좀 더 실용적인 기능을 알고 싶으시다면 공식 웹사이트 🎜보기; 🎜🎜마지막으로: 🎜이 라이브러리는 정말 사용하기 쉬우므로 강력히 추천합니다! 🎜🎜
🎜5. semver🎜
🎜semver 🎜 의미론적 버전 관리를 위한npm 라이브러리입니다. semver는 vue3 프레임워크 소스 코드 및 vite 도구 소스에 있습니다. code 모두 사용됩니다. 🎜🎜 직설적으로 말하면 오픈 소스 라이브러리를 개발할 때 사용자에게 버전 번호가 다르다는 점을 상기시켜야 하는 상황이 발생하므로 사용자 버전이 너무 낮다고 판단하는 방법은 무엇입니까? , semver는 이 문제를 매우 잘 해결하는 데 도움이 될 수 있습니다. 🎜🎜semver에는 버전이 합법적인지, 버전 번호의 이름이 올바르게 지정되었는지, 두 버전 중 어느 버전이 더 오래되었는지 확인하세요. 및 기타 방법 🎜🎜🎜다음은 공식 웹사이트의 몇 가지 예입니다. 🎜🎜const args = require('minimist')(process.argv.slice(2))🎜자세한 사용 방법은🎜을 참조하세요. 자세한 내용은 문서🎜🎜6. minimist
minimist 是一个命令行参数解析工具；minimist 在 vue3 框架源码和 vite 工具源码中都有使用；
使用：
const args = require('minimist')(process.argv.slice(2))
例如：
# 执行以下命令
vite create app -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
# 将获得
{ _: [ 'foo', 'bar', 'baz' ],
x: 3,
y: 4,
n: 5,
a: true,
b: true,
c: true,
beep: 'boop' }
特别要说明的是返回值其中首个 key 是_，它的值是个数组，包含的是所有没有关联选项的参数。
如果你的工具在终端有较多的参数，那么这个工具就非常的适合您！
7. magic-string
magic-string 是一个用于操作字符串和生成源映射的小而快的库；
其实它最主要的功能就是对一些源代码和庞大的 AST 字符串做轻量级字符串的替换；
在 vite 工具源码和 @vue/compiler-sfc 中大量使用；
使用：
import MagicString from 'magic-string';
const s = new MagicString('problems = 99');
// 替换 problems -> answer
s.overwrite(0, 8, 'answer')
s.toString() // 'answer = 99'
// 生成 sourcemap
var map = s.generateMap({
source: 'source.js',
file: 'converted.js.map',
includeContent: true
})
8. fs-extra
fs-extra 是一个强大的文件操作库， 是 Nodejs fs 模块 的增强版；
这个就不多讲了，因为它在千锤百炼之下只能形容它是 YYDS，查看 更多官方文档。
9. chokidar
chokidar 是一款专门用于文件监控的库；chokidar 只在 vite 工具源码中有使用；
其实 Node.js 标准库中提供 fs.watch 和 fs.watchFile 两个方法用于处理文件监控，但是为什么我们还需要chokidar 呢？
主要是由于 兼容性不好、无法监听、监听多次 等大量影响性能的问题；
chokidar 用法：
const chokidar = require('chokidar');
const watcher = chokidar.watch('file, dir, glob, or array', {
ignored: /(^|[\/\\])\../,
persistent: true
});
watcher
.on('add', path => console.log(`File ${path} has been added`))
.on('change', path => console.log(`File ${path} has been changed`))
.on('unlink', path => console.log(`File ${path} has been removed`))
.on('addDir', path => console.log(`Directory ${path} has been added`))
.on('unlinkDir', path => console.log(`Directory ${path} has been removed`))
.on('error', error => console.log(`Watcher error: ${error}`))
.on('ready', () => console.log('Initial scan complete. Ready for changes'))
.on('all', (event, path) => console.log(event,path))
.on('raw', (event, path, details) => {
log('Raw event info:', event, path, details);
});
10. fast-glob
fast-glob 是一个快速批量导入、读取文件的库； fast-glob 只在 vite 工具源码中有使用；
基本语法：
*：匹配除斜杆、影藏文件外的所有文件内容；**：匹配零个或多个层级的目录；?：匹配除斜杆以外的任何单个字符；[seq]：匹配[]中的任意字符 seq；
如何使用：
const fg = require('fast-glob');
const entries = await fg(['.editorconfig', '**/index.js'], { dot: true });
在 vite 中使用：
vite 工具中 import.meta.glob 方法（如下）就是基于这个库来实现，所以如果你在自己的工具库中有批量文件等的操作，这个库是以很不错的选择；
const modules = import.meta.glob('./dir/*.js', { query: { foo: 'bar', bar: true } })
vite 通过 fast-glob 工具把它生成如下代码
// vite 生成的代码
const modules = {
'./dir/foo.js': () =>
import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup),
'./dir/bar.js': () =>
import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup)
}
11. debug
debug 是一个模仿 Node.js 核心调试技术的小型 JavaScript 调试程序，在适用于 Node.js 和 Web 浏览器 都可使用；debug 只在 vite 工具源码中有使用；
说直白点就是你可以使用 debug 来对你的程序进行 毫秒级别时间差的统计 对你程序代码进行优化；
使用：
var debug = require('debug')('http')
, http = require('http')
, name = 'My App';
// fake app
debug('booting %o', name);
http.createServer(function(req, res){
debug(req.method + ' ' + req.url);
res.end('hello\n');
}).listen(3000, function(){
debug('listening');
});
// fake worker of some kind
require('./worker');
如果你对你的代码或者自研的工具等有较高性能要求，强烈建议可以使用
debug来进行调式。
12. dotenv
dotenv 是一个零依赖模块，可将 .env 文件 中的环境变量加载到 process.env 中；dotenv 只在 vite 工具源码中有使用；
如何使用：
1、创建 .env 文件
S3_BUCKET="YOURS3BUCKET" SECRET_KEY="YOURSECRETKEYGOESHERE"
2、使用
import * as dotenv from 'dotenv' dotenv.config() console.log(process.env)
13. esbuild
esbuild 是一个基于 Go 语言开发的 JavaScript 打包工具，被 Vite 用于开发环境的依赖解析；
相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍；
到现在知道为啥
vite为啥快了吧，esbuild就是第一功臣。
优势：
- 没有缓存机制也有极快的打包速度
- 支持es6和cjs模块
- 支持es6 modules的tree-shaking
- 支持ts和jsx
- sourcemap
- 压缩工具
- 自定义的插件开发
使用：
esbuild 在 API 层面上非常简洁, 主要的 API 只有两个: Transform 和 Build, 这两个 API 可以通过 CLI, JavaScript, Go 的方式调用；
1、transform：调用这个API能将 ts，jsx 等文件转换为js文件；
// cli
exbuild ./test.ts --loader=ts // 输出 const str = 'Hello World';
// js api调用
const esbuild = require('esbuild');
const fs = require('fs');
const path = require('path');
const filePath = path.resolve(__dirname, 'test.ts');
const code = esbuild.transformSync(fs.readFilesync(filePath), {
loader: 'ts',
})
console.log(code);
// 输出
// {
// code: 'const str = 'Hello World'',
// map: '',
// warnings: []
// }
2、build：整合了transform后的代码，可以将一个或者多个文件转换并保存为文件；
// cli
esbuild test.ts --outfile=./dist/test.js // { errors: [], warnings: [] }
// js api调用
const esbuild = require('esbuild');
const path = require('path');
const result = esbuild.buildSync({
entryPoints: [path.resolve(__dirname, 'test.ts')],
outdir: path.resolve(__dirname, 'dist'),
});
console.log(result); // { errors: [], warnings: [] }
更多详细使用可查看链接
14. rollup
rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，我们熟悉的 vue、react、vuex、vue-router 等都是用 rollup 进行打包的。
在 vite 中的生产环境（Production） 就是基于 rollup 打包来构建主要代码的。
使用：
1、创建 rollup.config.js 文件
2、配置文件
export default {
input: 'src/index.js',
output: {
name: 'amapUpper',
file: 'dist/amapUpper.js',
format: 'umd'
},
plugins: []
};
3、运行
{
"scripts": {
"dev": "rollup -i src/index.js -o dist/bundle.js -f es"
},
}
4、执行 npm run dev
15. ws
ws 是一个简单易用、速度极快且经过全面测试的 WebSocket 客户端和 服务器 实现；完全可以是 Socket.io 的替代方案；ws 只在 vite 工具源码中有使用。
说直白一点就是通过 ws，咱们可以实现服务端和客户端的长连接，且通过 ws 对象，就可以获取到 客户端发送过来的信息 和 主动推送信息给客户端。
使用：
1、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=0
var int = setInterval(function f() {
ws.send(i++) // 每隔 1 秒给连接方报一次数
}, 1000)
})
2、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. connect
connect 是一个最早期的 HTTP 服务器框架，亦可称为中间件插件；express 就是基于此框架做的扩展；
注意：从 vite2 开始官方已从依赖 koa 转成 connect 了；
至于为什么使用 connect 而不是 koa，咱们看官方的回答：
大概意思就是：由于大部分逻辑应该通过插件钩子而不是中间件来完成，因此对中间件的需求大大减少；所以使用 connect优先级会高于 Koa。
17. esno
esno 是一个基于 esbuild 的 TS/ESNext 的 Node.js 运行时；
说直白点就是可以类似 ts-node 一样直接运行 TS 文件，那为甚么还用 esno 呢？
因为 esno 是基于 esbuild 运行的，esbuild 有多快，上面我们有讲到了吧，这里就不复述了。
使用：
{
"scripts": {
"start": "esno index.ts"
},
"dependencies": {
"esno": "*"
}
}
npm run start
18. tsup
tsup 是一个轻小且无需配置的，由 esbuild 支持的打包工具；
它可以直接把 .ts、.tsx 转成不同格式 esm、cjs、iife 的文件，快速打包你的工具库；
使用：
1、安装 tsup
pnpm i tsup -D
2、在根目录下的 package.json 中配置
{
"scripts": {
"dev": "pnpm run build -- --watch --ignore-watch examples",
"build": "tsup src/index.ts --dts --format cjs,esm"
},
}
19. vitepress
vitepress 是在 vuepress 的基础上实现的静态网站生成器，区别在于 vitepress 是建立在 vite 之上做的开发；
优势：
-
webpack대신vite를 기반으로 시작 시간, 핫 리로딩 등이 모두 빨라졌습니다. - 使用
vue3来减少 js 的有效负载；
vite 而不是 webpack，所有更快的启动时间，热重载等；所以如果你想写一个在线文档仓库，那么
vitepress就是一个很好的选择。
20. vitest
vitest 是一个由 vite 提供支持的快速单元测试框架。
优势：
由 Vite ⚡️ 提供支持的极速单元测试框架。
与 Vite 的配置通用，watch 模式下极快的反应（相当于测试中 HMR）。
可以对 Vue/React 组件进行测试。
开箱即用 Typescript/JSX/ESM（这一点我想配过 jest 的人应该懂是什么意思）
与 Jest 几乎相同的 API，同时也有 Jest 的快照功能（这个非常好用！）
模拟 DOM
生成测试覆盖率
ESM优先，顶级等待
开箱即用的 TypeScript / JSX 支持
套件和测试的过滤、超时、并发
等等
所以你还有什么理由不使用
vitest呢？
其它
其实细心的同学可能会发现，目前 vue3 和 vite3 都是一个 monorepo 仓库，且都是使用 pnpm workspace 来进行仓库管理的；
所以了解 monorepo 和 pnpm workspace 对源码的阅读也是有很大的帮助的；
关于这块更多详细可以查看《如何入门 vite 源码》进行了解。
https://juejin.cn/post/7094984070999834655
当然，上面的分享的工具库只是在源码中使用 场景较多的库，还有一些库由于 场景较少vue3를 사용하여 이를 줄이세요. js payload;
따라서 온라인 문서 창고를 작성하고 싶다면장점:🎜🎜🎜🎜Vite ⚡️에서 제공하는 매우 빠른 단위 테스트 프레임워크를 제공합니다. 🎜🎜🎜Vite 구성과 공통, 시계 모드에서 매우 빠른 응답(테스트 중인 HMR과 동일). 🎜🎜🎜Vue/React 구성 요소를 테스트할 수 있습니다. 🎜🎜🎜Typescript/JSX/ESM은 즉시 사용할 수 있습니다(jest를 사용해본 사람들은 이것이 무엇을 의미하는지 이해해야 한다고 생각합니다)🎜🎜🎜Jest와 거의 동일한 API가 있으며, 또한 Jest의 Snapshot 기능(매우 유용합니다!)🎜🎜🎜DOM 시뮬레이션🎜🎜🎜테스트 적용 범위 생성🎜🎜🎜ESM 먼저, 최상위 레벨 대기🎜🎜🎜 즉시 사용 가능한 TypeScript/JSX 지원🎜🎜🎜도구 모음 및 테스트에 대한 필터링, 시간 초과, 동시성🎜🎜🎜등🎜🎜🎜그 이유는 무엇입니까? 그렇지 않나요?vitepress가 좋은 선택입니다.20. vitest
vitest는
vite로 구동되는 빠른 단위 테스트 프레임워크입니다.
vitest를 사용하는 것은 어떻습니까? 🎜🎜기타
🎜사실 주의 깊은 학생들은 현재vue3와 vite3가 모두 동일하다는 것을 알 수 있습니다. monorepo 창고이며 모두 창고 관리를 위해 pnpm 작업 공간을 사용합니다. 🎜🎜그러므로 monorepo 및 pnpm 작업 공간을 이해하세요. 소스 코드도 매우 유용합니다. 🎜🎜🎜이에 대한 자세한 내용은 "Vite 소스 코드 시작 방법"을 참조하세요. 🎜🎜https://juejin.cn/post/7094984070999834655🎜🎜🎜물론 위에서 공유한 도구 라이브러리는 소스코드에서 더 많은 시나리오가 있는 라이브러리만 사용하고 일부 라이브러리는 로 인해 발생합니다. > 시나리오가 적기 때문에 여기에는 자세한 설명이 없습니다. 소스 코드에 어떤 도구 라이브러리가 있는지 알고 싶으면 추가해 주시면 됩니다. 🎜 🎜🎜원본 주소 : https://juejin .cn/post/7124112069355372581🎜🎜작성자 : Master Yi🎜🎜