字节历险记(二)

前言

不知不觉已经在字节待了20天了,整体感觉还行吧,卷的人很卷,因为本人比较菜,上次有个需求看了半天都没理清楚逻辑,所以加班到晚上十点多,准备走的时候看到还有一些人在奋斗,感觉还没有要走的意思,走在回家的路上就比较感慨,果然心脏和字节只有一个能跳动~

聊聊我遇到的问题吧,当时本地修改完代码之后发现刷新没有效果,然后有些组件是以项目依赖的形式存在于项目之中,所以看着有点懵,后面mentor跟我说这里涉及到一个yarn workspace和monorepo的知识,然后去学习了一下,仿佛开辟了新大陆。

yarn workspace

Yarn Workspace(工作空间)是Yarn提供的monorepo的依赖管理机制,从Yarn 1.0开始默认支持,用于在代码仓库的根目录下管理多个package的依赖。

monorepo

monorepo 单点仓库是一种软件开发方式,它将多个相关的项目或软件包(package)集中管理在同一个代码仓库(repository)中,Babel、React、Vue、Jest等都使用了menorepo的管理方式。Menorepo的优点是可以在一个仓库里维护多个package,可统一构建,跨package调试、依赖管理、版本发布都十分方便,搭配工具还能统一生成CHANGELOG;缺点是代码仓库体积会变大,只开发其中一个package也需要安装整个项目的依赖。

为什么要使用yarn workspace

开发多个互相依赖的package时,workspace会自动对package的引用设置软链接(symlink),比yarn link更加方便,且链接仅局限在当前workspace中,不会对整个系统造成影响,所有package的依赖会安装在最根目录的node_modules下,节省磁盘空间,且给了yarn更大的依赖优化空间,所有package使用同一个yarn.lock,更少造成冲突且易于审查

如何使用workspace

这一点其实也可以叫做如何去辨别项目中是否使用了workspace,因为刚拿到一个项目你也不知道他到底使用了哪些技术,最根本的方法就是去看package.json文件,如果看到workspace的配置,那就是使用了工作区。

private

根目录一般是项目的脚手架,无需发布,"private": true会确保根目录不被发布出去。

workspaces:

声明workspace中package的路径。值是一个字符串数组,支持Glob通配符。

其中"packages/*"是社区的常见写法,也可以枚举所有package: "workspaces": ["package-a", "package-b",...]

常见命令

你可以把工作区里的模块看成是单独的子项目(跟submodule如出一辙),子项目里的组件修改后保存主项目是不会同步修改的,所以你会遇到修改里面的代码保存刷新页面页面不会更新,那是因为workspace是独立的模块,需要单独运行。

yarn workspace <workspace_name> <command>

在指定的package中运行指定的命令。

csharp 复制代码
# 在foo中添加react,react-dom作为devDependencies
yarn workspace foo add react react-dom --dev

# 移除bar中的lodash依赖
yarn workspace bar remove lodash

# 运行bar中package.json的 scripts.test 命令
yarn workspace bar run test

yarn workspaces run <command>

在所有package中运行指定的命令,若某个package中没有对应的命令则会报错。

go 复制代码
# 运行所有package中package.json的 scripts.build 命令
yarn workspaces run build

# 运行所有package中的scripts.dev 命令
yarn workspaces run dev

结语

这里面其实可以引申出很多知识点,比如我上面提到的submodulemonorepo的其他实现方式,以及yarn甚至是包管理工具的发展史,最常见的应该就是npmyarn的区别了,后面有时间再和大家分享吧,上班确实比较忙了,今天又是11点才下班,果然心脏和字节只能跳动一个,感觉最先停下的是我的小心脏。

相关推荐
爱勇宝14 分钟前
《道德经》第6章:别把团队的创造力用到枯竭
前端·后端
无双_Joney17 分钟前
[四期 - 4] NestJS专栏 - 征召一下大家的意见,非常想知道大家都想看看Nest的哪些方面
前端·后端·nestjs
彭亚川Allen19 分钟前
停更的这一年,All In AI、陪媳妇生娃、还考了个研
前端·后端·产品经理
爱分享的程序猿-Clark37 分钟前
【前端开发】前端开发者如何使用 Claude Code 快速搭建 React 项目!(小白都能学会的教程)
前端·react.js
_kerneler1 小时前
cgroup :限制cpu原理
java·服务器·前端
yingyima2 小时前
AWK 速查手册:不仅仅是文本处理,更是性能与简洁的抉择
前端
悟空瞎说2 小时前
WebSocket 前端丢包处理实战:原理与完整代码实现
前端
秋天的一阵风2 小时前
✨ 原来文本转换可以这么丝滑!UnifiedJS 实战指南来了
前端·github·markdown
南川琼语2 小时前
HTTP——AJAX
前端·javascript·ajax
用户47949283569152 小时前
专升本前端毕业 1 年,从初创到大厂,我的开源项目上了 github trending,顺便聊聊做开源的收获
前端·后端·github