Monorepo is not limited to the front end, but this blog post is all 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 version control systems, Monorepo is a software development strategy in which code for many projects is stored in the same repository.

why

In the company, if there are many projects, each project will have a Git repository, so it will be troublesome for new employees to pull down a copy of code from the Git repository every time they change the project.

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

advantages

  1. Manage dependencies uniformly.
  2. You can extract logic to maintain common libraries.
  3. The same project configuration is configured for all projects.

disadvantages

  1. A more stringent CR specification is required.
  2. Git permission management is difficult to control.
  3. Version control is tricky

All projects require a well-defined process.

How to do

For now, there are two common solutions to Monorepo on the front end:

  1. lerna.js
  2. yarn workspace

Of course, they can also be used together.

yarn workspaces

It allows you to set multiple packages. That is, you only need to run yarn installation once to install all packages at a time.

Add the following to the package.json file

{
  "private": true."workspaces": ["workspace-a"."workspace-b"]}Copy the code

It is prohibited to use

In the.yarnrc file add:

workspaces-experimental false
Copy the code

learn.js

The Github repository is at 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 uses Git and NPM to optimize the workflow for managing multi-package repositories.

Note that LERNA is a workflow optimization tool, not a deployment tool.

The installation

Create a new project
mkdir lerna-demo && cd lerna-demo

Initialize the project
npm init -y

# installation lerna
yarn add lerna -D

Initialize lerna's project
npx lerna init
Copy the code

At this point, the most basic LERNA project is completed.

(Remember to add.gitignore)

use

After the above command is completed, now the project files directory:

Change package.json to include a field:

{
  "private": true.// ...
}
Copy the code

Since we manage sub-projects and typically do not publish to parent projects, we set private to true.

Then create a new project in the Packages directory.

Lerna will automatically detect projects in Packages for management.

There is one thing to note about projects in the Packages directory:

  • package.jsonThe name field must be the same as the folder name.

The command

  • Lerna init: initialization
  • Learn List: Lists the projects that are currently managed
  • Lerna diff: List the differences between the last release
  • Lerna change: which packages have been changed
  • Lerna bootstrap: Installs dependencies and links any cross-dependencies
  • Lerna Clean: cleans all dependencies
  • Lerna exec: Executes commands on each package
  • Lerna run: Executes the NPM script for each package that contains the NPM Script
  • Lerna import: Imports the package into Monorepo with a commit history
  • Lerna Link: Links together all package symbols that depend on each other

At the same time use

Lerna and YARN workspace can be used at the same time

In lerna.json add:

{
  "packages": [
    "packages/*"]."version": "0.0.0"."npmClient": "yarn"."useWorkspaces": true
}
Copy the code

Then in package.json add:

{
  // ...
  "private": true."workspaces": [
    "packages/*"]}Copy the code

The difference between

In the Yarn workspace, there is this section:

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: en.wikipedia.org/wiki/Monore…

Yarn workspace: classic.yarnpkg.com/en/docs/wor…

lerna github: github.com/lerna/lerna




PS: we read after feel helpful to their own can be three even messages, welcome to put forward valuable comments, also welcome you interested in the relevant technology developers (invited by the team developers wechat X118422) into the group, online answer and discuss data visualization, optimizing the performance of charts and other technical issues ~