Practice sharing of monorepo based on yarn1.x

Background introduction

A few days ago , Captain Xiaodong asked me on wechat , Does your team have monorepo Practice , I regret to tell him that there is no , But this sows a seed of exploration in my heart , Just recently, the boss is going to start a new project in Inner Mongolia , I formed a double gun death squad with another front-end brother to escort , So I began to explore , Is there a possibility , You can manage multiple projects in one warehouse , The management here refers to the orderly and standardized management , Rather than simply trampling several projects together .

Introduction to related concepts

What is? monorepo？

In version control system ,monorepo It's a software development strategy , The code for many of these projects is stored in the same repository . This kind of software engineering practice can be traced back to at least 2000 In the early s , It was called “ Shared code base ”. A related concept is the whole , But although the overall sub projects are merged into a large project , But the overall warehouse may contain independent projects .( Translated from Wikipedia )

What is? yarn？ What is yarn wrokspace？

In short ,Yarn Workspaces yes Yarn Provided monorepo The dependency management mechanism of , from Yarn 1.0 Start default support , It is used to manage multiple... Under the root directory of the code warehouse package Dependence

Practical course

Specific tutorial , I think the official website has written in great detail , I don't need to reread , So I will only introduce some key points related to this project .

This is how I build the architecture , Divide the project into two ,applications Represents the application directory , It contains some items , For example, the enterprise side 、 The capital side 、 Platform end , And applets and h5 etc. , and packages In this case , It's me who put applications Pull out the public part of , Make it reusable .

besides , The project has also done some optimization , such as

• Configured with eslint + prettier To standardize the team's code

• Configured with husky and commitlint To standardize the code submission of the team

The directory structure of the project is like this

• applications/ent: Enterprise end

• applications/plat: Platform end

• applications/fund: The capital side

• applications/mina: Applet /h5

• packages/utils: Util Package

• packages/componets: General component package

• packages/service: General service package

• packages/openapi: Universal openapi Interface package

• packages/constants: General constant package

• packages/types: Generic type package

• packages/styles: Generic style pack

• packages/hooks: Universal hook bag

In the root directory package.json as follows ：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "applications/*",
    "packages/*"
  ],
  "scripts": {
    "build": "yarn workspaces run build",
    "clean": "yarn workspaces run clean",
    "lint:fix": "yarn workspaces run lint:fix",
    "prettier:fix": "yarn workspaces run prettier:fix",
    "ent": "yarn workspace @sunyard-fin/ent",
    "fund": "yarn workspace @sunyard-fin/fund",
    "plat": "yarn workspace @sunyard-fin/plat",
    "mina": "yarn workspace @sunyard-fin/mina",
    "components": "yarn workspace @sunyard-fin/components",
    "constants": "yarn workspace @sunyard-fin/constants",
    "openapi": "yarn workspace @sunyard-fin/openapi",
    "service": "yarn workspace @sunyard-fin/service",
    "types": "yarn workspace @sunyard-fin/types",
    "styles": "yarn workspace @sunyard-fin/styles",
    "utils": "yarn workspace @sunyard-fin/utils"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "eslint": "^8.15.0",
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
    "typescript": "^4.7.4",
    "@antfu/eslint-config": "^0.23.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-config-prettier": "8.5.0"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{md,json}": [
      "prettier --write"
    ],
    "*.{css,js,jsx,vue,ts,tsx}": [
      "prettier --write",
      "eslint --fix  --cache"
    ]
  }
}

There are several points that need to be noted here

• Under the root directory, you should accompany the corresponding package directory

 "workspaces": [
    "applications/*",
    "packages/*"
  ],

• "build": "yarn workspaces run build", This sentence means to build and package all project packages

• "ent": "yarn workspace @sunyard-fin/ent",

After configuring the sentence upstairs , It's like a shortcut , You don't have to go into sub projects to run , Execute directly in the root directory yarn ent dev You can enter the development environment , It is equivalent to entering the subdirectory to execute yarn dev, Then you may see , The project name here does not have to be the same as the directory name , Use @xxx Does it feel more ceremonial .

• For example, I want to add utils Bag words , It can be executed yarn workspace @sunyard-fin/ent add @sunyard-fin/utils -D, Of course, you can also write directly to the corresponding project package.json Inside

• Install a package for all projects , perform yarn add -D -W typescript, This will install typescript package

Others are used normally yarn Come on .

summary

monorepo Suitable for large projects , combination yarn1.x The advantage of using is that you don't need to install dependencies for every project , This greatly reduces the volume of the project , Then the management code is more organized , Each module is much clearer , It also achieves high reusability .

FAQ

• Why choose yarn1.x, Not having yarn2.x Do you ？

In fact, in the initial selection , I've also considered using pnpm、yarn2、lerna wait , Time is tight and task is heavy , I don't have much energy to research one by one , Take a cursory look yarn1.x It's enough for our current project , And there are no disadvantages in the introduction. At present , Then it is also naturally integrated , There is no need to add extra learning costs ,yarn2 It's also good , It's just that I set yarn set version berry It seems that I can't succeed without scientific self-improvement , Considering this is a team （ forehead , Although it's just me and another brother hahaha ）, So I'm still quite modest and didn't use 2.x, Um. .

reference

• MonoRepo: https://en.wikipedia.org/wiki/Monorepo

• yarn2 workspaces: https://yarnpkg.com/features/workspaces

• yarn1 workspaces: https://classic.yarnpkg.com/en/docs/workspaces