Monorepo isn’t limited to the front end, but this blog post is just about the front end.

What is the

wikipedia: In
version control systems, a
monorepo (”
mono” meaning ‘single’ and “repo” being short for ‘
repository)’) is a software development strategy where code for many projects is stored in the same repository.

In a version control system, monorepo is a software development strategy in which the code for many projects is stored in the same repository.

why

Within a company, if there are many projects, each project will have a Git repository, which will cause new employees to have to pull a piece of code from the Git repository every time they change a project.

What if all the projects are managed together in one warehouse? This is Monorepo.

advantages

  1. Manage dependency unification.
  2. You can extract logic to maintain a common library.
  3. All projects are uniformly configured with the same engineering configuration.

disadvantages

  1. Need to have a more stringent CR specification.
  2. Git permission management is difficult to control.
  3. Version control can be tricky

Projects require formal processes.

How to do

Right now, there are two common front-end solutions to Monorepo:

  1. lerna.js
  2. yarn workspace

Of course, they can also be used together.

yarn workspaces

It allows you to set up multiple packages, meaning you can install all packages at once by running a single YARN installation.

Add the following to the package.json file

{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}

It is prohibited to use

Add to the.yarnrc file:

workspaces-experimental false

learn.js

The GitHub repository is at:
https://github.com/lerna/lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna is a tool that optimizes the workflow of managing multi-package repositories using git and NPM.

It is important to note that Lerna is a workflow optimization tool, not a deployment tool.

The installation

# create a new project mkdir lerna-demo && CD lerna-demo # create a new project NPM init-y # install lerna yarn add lerna- D # create a new project NPX lerna init

At this point, a basic LERNA project was completed.

(Remember to add.gitignore)

use

After the above command is complete, now the project file directory:

Change package.json and add a field to it:

{
  "private": true,
  // ...
}

Private is set to true since we are managing subprojects and do not normally publish parent projects.

Then create a new project in the Packages directory.

Lerna will automatically detect items in packages for management.

There is one thing to note about the items in Packages:

  • package.jsonThe name field needs to be the same as the folder name.

The command

  • Lerna init: Initialize
  • Learn list: List the projects you currently manage
  • Lerna Diff: List the differences between the last release
  • Lerna change: Which packages have been changed
  • Lerna Bootstrap: Install dependencies and link any cross-dependencies
  • Lerna clean: Clean all dependencies
  • Lerna exec: Executes the command in each package
  • Lerna run: Executes NPM script on each package that contains NPM script
  • Lerna import: Imports the Package into Monorepo with a commit history
  • Lerna Link: Symbolically links all packages that depend on each other

At the same time use

Lerna and yarn workspace can be used together

In lerna.json add:

{" packages ": [" packages / *"], "version" : "0.0.0", "npmClient" : "yarn" and "useWorkspaces" : true}

Then add in package.json:

{/ /... "private": true, "workspaces": [ "packages/*" ] }

The difference between

In the yarn workspace, there is a paragraph like this:

Yarn’s workspaces are the low-level primitives that tools like Lerna can (and
do!). use. They will never try to support the high-level feature that Lerna offers, but by implementing the core logic of the resolution and linking steps inside Yarn itself we hope to enable new usages and improve performance.

That’s the difference

reference

wikipedia Monorepo: https://en.wikipedia.org/wiki…

yarn workspace: https://classic.yarnpkg.com/e…

lerna github: https://github.com/lerna/lerna