有梦想，有干货，微信搜索【大千世界】关注一下这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。前言随着技术的发展，除了编程语言的框架越来越多，就连项目的结构也变得越来越复杂。今天的文章将讨论近年来越来越多的开发人员一直在讨论的一个问题。项目架构：Monorepo。什么是Monorepos？在一般的开发模式下，一个项目通常由一个仓库管理。今天如果要设计一个内容管理系统产品，一般来说，会提供以下两种服务。后台管理系统。首页(H5)。这个时候，按照之前的开发方式，我们会创建两个仓库，分别管理两个网站。本项目架构设计方法称为：Multi-repo。反之，当我们用一个仓库管理两个网站时，这种方式就是Monorepo。为什么我们需要Monorepo？看完上面关于Monorepo的介绍，读者可能还是觉得有点懵。他们觉得集中管理和分开管理没有太大区别。事实上，除了对项目进行集中管理，Monorepo可以做的事情还有很多。其实Monorepo除了可以管理项目，还可以管理一些共享的组件，甚至是共享的utils，这样你就不用麻烦的对两个项目执行ctrc+v。通常，Monorepo上会使用以下项目结构。设计。apps|-后台|-前台node_modulespackages|-components|-utils在apps文件中，我们会放置真正要执行的项目。如果以后这个项目有机会被构建成docker镜像，那么就可以根据apps文件中的项目生成对应的docker镜像。以上面的例子，会生成后台网站和前台网站两张图片。在packages文件中，我们可以放置各种需要共享的组件或utils。这里开发的共享内容可以同时被apps文件中的项目使用。这种架构设计也可以让代码相当好写。干净的。PackageManager在Monorepo的世界里一个仓库下有很多项目，每个项目都会有自己的package。如果没有一个好的包管理器来管理这些包，最终整个仓库都将难以控制，所以接下来我会花一点篇幅来稍微解释一下包管理器的用法。前端方面比较出名的包管理器如下：npmYarnpnpmRush通常包管理器只负责处理依赖的安装。但是，在Monorepo架构中，我们通常在同一个文件中有多个项目。这时候，就必须要用到包管理器的一个重要概念：工作空间。简单来说，workspaces方便你一键安装所有依赖到workspaces管理的目录，或者方便你在workspaces管理的目录安装依赖。设置workspaces管理的目录也很简单，在package.json中填写你要管理的目录路径即可，如下图：上图中，workspaces管理的目录包括appsfilesandpackages文件内的所有一级文件。使用workspaces安装依赖到指定目录也很简单，输入yarnworkspacefolderNameaddpackageName即可。这时候打开web目录下的package.json，你会发现真的安装了styled-components，非常方便。去除依赖也很简单，将刚才命令中的add改成去除即可。这时候package.json也会删除依赖的资源。接下来Turborepo就正式进入本文的重头戏：Turborepo。Turborepo支持的包管理器包括Yarn、npm和pnpm。这里以纱线为例。为了快速生成一个完整可用的项目架构，可以在这里运行npxcreate-turbo@latest，快速生成一个基于Turborepo架构的Monorepo项目。接下来进入repo，可以看到有一个很特别的文件，叫做turbo.json。该文件主要用于设置执行指令的流水线。pipeline的主要作用就是当你执行yarnrunxxx时，这条指令在执行的过程中应该遵循哪些规范，想详细了解pipeline设置的读者也可以参考这个网站。比如这里的dev有一个缓存设置为false，意思是每次执行dev命令时不要使用之前的缓存，保证每次开发环境都是最新的环境。可以看到turbo.json配置项中的pipeline基本对应package.json中的scripts指令。可以看出在turbo.json文件中设置的pipeline基本对应package.json中的scripts命令。其实apps目录下的项目都有自己的package.json，只要这些项目的package.json里有dev脚本，Turborepo就会自动执行这些内容。最后补充一点，读者在观察项目结构时，可以看到有一个名为packages的目录。这个目录的内容基本上是为apps中的项目提供一些通用的内容。如果想让packages中的某个文件被apps中的项目使用，可以在项目package.json中填写对应的包名，并设置版本号为*，这样就可以成功引用packages中的内容在这个项目中！Turborepo开发由于本例使用Yarn作为包管理器，您可以下载yarndev启动开发环境。这里可以看到有一个参数--parallel，可以让我们依次启动项目的参数，这样在开发环境中，就不会忘记哪个项目还没有启动。之后就可以在localhost:3000和localhost:3001看到两个项目的镜像了！总结今天给大家介绍一下Monorepo的项目结构。虽然Monorepo的结构看起来非常好用，但实际上这种项目结构设计并不适用于所有的产品。如果你今天想尝试Monorepo但不知道如何开始，你也可以使用Monorepo架构来设计一些UI库。而且现在很多主流的UI库都采用Monorepo作为架构，例如：MaterialUI采用lerna，NextUI采用文中介绍的turborepo等，如果以后读者遇到类似的使用场景，不妨尝试一下Monorepo架构。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。作者：AndyChen来源：medium原文：https://medium.com/starbugs/%...
