Talking about the benefits of Monorepo: Take Turborepo as an example

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

foreword

With the development of technology, in addition to more and more frameworks of programming languages, even the structure of the project has become more and more complex. Today, this article will discuss a topic that more and more developers are discussing in recent years. Project Architecture: Monorepo .

What is Monorepo?

In the general development mode, a project is usually managed by a warehouse. If you want to design a content management system product today, the following two services will generally be provided.

1. Background management system.
2. Front page (H5).

At this time, according to the previous development method, we will create two warehouses to manage the two websites respectively. The design method of this project structure is called: Multi-repo .

Conversely, when we manage both sites with one repository , this approach is Monorepo .

Why do we need Monorepo?

After reading the above introduction of Monorepo, readers may still feel a little confused, and feel that centralized management is not much different from separate management. In fact, in addition to centralized management of projects, there are many things that Monorepo can do.

In fact, in addition to managing projects, Monorepo can also manage some shared components, even shared utils , so that it doesn't have to be troublesome to carry out on two projects ctr c + v , usually in Monorepo will be designed with the following project structure.

 apps
  |- 后台网站
  |- 前台网站
node_modules
packages
  |- components
  |- utils

In the apps file, we will place the project that will actually be executed. If this project has a chance to be build into docker image in the future, then you can The output of the project corresponds to docker image . From the above example, it will generate two images of the back-end website and the front-end website.

In the packages file, we can place various components or utils that need to be shared. The shared content developed here can be used by the projects in the apps file at the same time. This architecture design can also make the code write quite clean.

Package Manager

In the world of Monorepo , there will be many projects under a warehouse , and each project will have its own package . If there is no good package manager to manage these packages , it will eventually make the entire warehouse difficult to control, so the next step It takes a little space to explain a little bit about the usage of the package manager .

The well-known package managers for the front-end are as follows:

• npm
• Yarn
• pnpm
• Rush

Usually the package manager is only responsible for handling the installation of dependencies. However, in the Monorepo architecture, we usually have several projects in the same file. At this time, an important concept of the package manager must be used: workspaces.

In a nutshell, workspaces can easily allow you to install all dependencies in a directory managed by workspaces with one click, or it is convenient for you to install dependencies in a directory managed by workspaces.

It is also very simple to set the directory managed by workspaces, just fill in the path of the directory you want to manage in package.json , as shown in the following figure:

In the above figure, the directory managed by workspaces includes the apps file and all the first-level files in the packages file.

It is also very simple to install dependencies into a specified directory using workspaces, just type
yarn workspace folderName add packageName .

At this time, open the web directory package.json and you will find that styled-components is really very convenient to be installed.

It is also very simple to remove dependencies, just change the ---075f7395fbd08873345f4c8f0c6d997a add in the instruction just now to remove .

At this time package.json will also delete the dependent resources.

Turborepo

Next, we will officially enter the main event of this article: Turborepo.

The package managers supported by Turborepo include Yarn, npm, and pnpm. Yarn is used as an example here.

In order to quickly generate a complete and usable project structure, here you can run npx create-turbo@latest so that you can quickly generate a Monorepo project based on the Turborepo architecture.

Next, when you enter the repo, you can see that there is a very special file called turbo.json , this file can be used to set some execution instructions pipeline , and pipeline The main function is when you are executing yarn run xxx , what specifications should this command have when executing it. Readers who want to know more about pipeline settings can also refer to this website .

For example, the dev here has a setting of cache for false , which means that every time you execute the dev command, do not use the previous cache To ensure that each development environment will be the latest environment.

It can be seen that in the turbo.json configuration item pipeline basically corresponds to the package.json scripts instruction of ---14dd15317add8cd047c483b744ac545e---.

It can be seen that the pipeline set in the turbo.json file basically corresponds to the scripts command in package.json.

In fact, the projects in the apps directory have their own package.json . As long as these projects have package.json dev in the script, Turborepo will automatically execute these scripts. content.

Finally, I would like to add that when readers observe the project structure, they can see that there is a directory called packages apps project.

If you want to let a file in packages be used by a project in apps, then you can fill in the corresponding package name in the project package.json , and put the version number Set it to * , so that the content in packages can be successfully referenced in the project!

Turborepo development

Since this example uses Yarn as the package manager, you can yarn dev to start the development environment. Here you can see that there is a parameter --parallel , this parameter is Parameters that allow us to start projects in sequence, so that we don't forget which project was not started in the development environment.

After that, you can see the pictures of the two projects in localhost:3000 and localhost:3001 !

Summarize

Today, I introduced the project architecture of Monorepo. Although the architecture of Monorepo seems to be very easy to use, in fact, this project architecture design is not suitable for all products. If you want to try Monorepo today, but you don't know how to start. If so, you can also use Monorepo's architecture to design some UI libraries.

And many mainstream UI libraries now use Monorepo as the architecture, for example: Material UI uses lerna, NextUI uses the turborepo introduced in the article, etc. If readers encounter similar usage situations in the future, they may try to take a look at the Monorepo architecture.

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

Author: Andy Chen Source: medium

Original: https://medium.com/starbugs/%E6%B7%BA%E8%AB%87-monorepo-%E5%B8%B6%E4%BE%86%E7%9A%84%E6%95% 88%E7%9B%8A-%E4%BB%A5-turborepo-%E7%82%BA%E4%BE%8B-15fb4af5ebd