这些前端新技术你很难再忽视了 —— Monorepo

简介: 这些前端新技术你很难再忽视了 —— Monorepo

image.png

新系列《这些前端新技术你很难再忽视了》,包括:SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势,很有必要了解。


咱们将采用 5W1H 分析法,即 What(何事)、Why(何因)、Where(何地)、When(何时)、何人(Who)、How(何法)6 个维度来解析这些“新玩意儿”。

本篇带来 —— Monorepo


闲话少说,冲了~

  • 点赞收藏关注,今晚一夜暴富 👍👍👍


🤔What



什么是 Monorepo?


答:Monorepo可以理解为一种基于仓库的代码管理策略,它提出将多个代码工程“独立”的放在一个仓库里的管理模式。每个代码工程在逻辑上是可以独立运行开发以及维护管理的。Monorepo 在实际场景中的运用可以非常宽泛,甚至有企业将它所有业务和不同方向语言的代码放在同一个仓库中管理。


🧐Why



为什么是 Monorepo?


答:

Monorepo:只有一个仓库,并且把项目拆分多个独立的代码工程进行管理,而代码工程之间可以通过相应的工具简单的进行代码共享。而传统仓库管理模式则是通过建立多个仓库,每个仓库包含拆分好的代码工程,而仓库间的调用共享则是通过 NPM 或者其他代码引用的方式进行。


🌰🌰🌰 举个例子:

通常我们多个项目的结构如下:


// Repository - project1
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
|   ├── ...
├── README.md
// Repository - project2
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
|   ├── ...
├── README.md


如果有公共用到的东西,会通过 npm 发包更新后,两个项目再安装更新,实现公用。这样发包很麻烦。


可能有 jym 问了:


我直接都放到一个项目下不行吗?


├── package.json
├── src/
│   ├── views/
|   |   ├── project1/
|   |   ├── project2/
│   ├── router/
|   |   ├── project1/
|   |   ├── project2/
|   ├── ...
│   └── lib/
└── README.md


当然可以,但是更多时候两个项目杂糅在一起,代码容易造成混乱,并且项目要一同部署,没有做到解耦。


那 Monorepo 会是怎样的展现?示例如下:

// Repository - monorepo
├── node_modules/
├── package.json
├── packages/
│   ├── pacakge1/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
│   ├── package2/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
│   └── lib/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
├── README.md
├── pnpm-workspace.yaml


代码共享只需要在 package.json 添加包名,然后再到项目中各自引用即可,无需再发 npm 包。


Monorepo 和 pnpm 结合使用,pnpm 由于 symlink 和 hard link 机制,既极大的缩小了安装包的体积,同时也解决了幽灵依赖的问题,前一篇文章提到过,有兴趣可以去看一看。


未来包管理 = Monorepo + pnpm


🤫Where



有没有权威一点的学习地址?


答:

英文:danluu.com/monorepo/

中文:刘留-知乎专栏 尤雨溪也关注了~


🙄When



Monorepo 什么时候诞生?


答:Monorepo 概念提出虽然已经有很长的历史,但随着技术的更新迭代,以及各项工具链的完善,最近几年它逐渐开始成为一个热门的话题。


其实很多技术都是这样,很久前就被提出来了,但是真正被广泛使用,又是另外一回事,或许将来某一个时候赖于某个环境的变化、或者技术生态的发展等等,意外就又爆火了,如果没有,则慢慢走向湮灭了。


😄Who



都有谁在用?


答:很多大型的互联网公司都在采取这样的代码管理策略,比如 Google、Facebook、Uber、MicroSoft 等。也有很多著名的前端开源库选择用这种方式来构建和管理自己的代码,比如Vue、React、Vite、Babel、Element-plus等。


😁How



怎么使用?


答:目前有挺多方式可以搭建 monorepo

  • yarn workspaces:Yarn提供的monorepo的依赖管理机制
  • lerna:一个开源的管理工具,用于管理包含多个软件包(package)的JavaScript 项目


更多可见 lernajs 官网

image.png


小结:本文对 Monorepo 有了一个基础的了解,Monorepo 和 pnpm 搭配,能发挥更大的潜力。


相关文章
|
1月前
|
人工智能 Rust 前端开发
前端界的未来趋势:掌握这些新技术,让你的作品走在时代前沿!
【10月更文挑战第30天】前端开发正以前所未有的速度发展,新技术层出不穷。本文探讨了AI助手(如GitHub Copilot)、低代码/无代码平台、跨平台技术(如React Native)和WebAssembly等未来主流技术,并附上示例代码,帮助你走在时代前沿。
82 1
|
1月前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
27 2
|
1月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
46 4
|
1月前
|
前端开发 JavaScript API
前端界的革命性突破:掌握这些新技术,让你的作品引领潮流!
【10月更文挑战第30天】前端技术日新月异,从传统的HTML、CSS、JavaScript到现代的React、Vue、Angular等框架,以及Webpack、Sass等工具,前端开发经历了巨大变革。本文通过对比新旧技术,展示如何高效掌握这些新技术,助你作品引领潮流。
49 2
|
6月前
|
资源调度 前端开发 JavaScript
前端工程化实践:Monorepo与Lerna管理
**前端工程化中,Monorepo和Lerna用于大型项目管理。Monorepo集纳所有项目,便于代码共享、版本控制和CI/CD。Lerna是Monorepo工具,管理多npm包,支持独立或共享版本。安装Lerna用`npm install --save-dev lerna`,初始化后可创建、管理包,通过`lerna bootstrap`、`lerna add`、`lerna publish`等命令协同工作。Lerna配置可在`lerna.json`,与CI/CD工具集成实现自动化。
79 0
|
7月前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
104 3
|
Web App开发 存储 缓存
前端MonoRepo实战:pnpm+nx搭建MonoRepo项目
之前大多数是理论知识,能让我们知道pnpm 和nx 是什么,但是具体要到项目实战就有点懵,不知道从而下手,下面我们就一步步开始搭建pnpm+nx的Monorepo仓库。
1626 0
|
存储 资源调度 前端开发
这些前端新技术你很难再忽视了 —— pnpm
这些前端新技术你很难再忽视了 —— pnpm
|
JSON 前端开发 JavaScript
这些前端新技术你很难再忽视了 —— JSON Schema
这些前端新技术你很难再忽视了 —— JSON Schema
|
Web App开发 Rust JavaScript
这些前端新技术你很难再忽视了 —— Bun
这些前端新技术你很难再忽视了 —— Bun