來聊一聊神祕的monorepo

時間  2021-08-12
標籤 node react git github shell npm json bootstrap 緩存 bash 欄目 React 简体版
原文   原文鏈接

1. monorepo管理

  • Monorepo 是管理項目代碼的一個方式，指在一個項目倉庫(repo)中管理多個依賴/模塊/包(package)
  • Monorepo 最主要的好處是統一的工做流和代碼共享
  • 對於不少用 Monorepo 的公司，他們的 Git 倉庫中不止有本身的代碼，還包括了不少的依賴
  • Monorepo 的核心觀點是全部的項目在一個代碼倉庫中。這並非說代碼沒有組織都放在 ./src 文件夾裏面
  • Lerna是一個管理多個 npm 模塊的工具,優化維護多包的工做流，解決多個包互相依賴，且發佈須要手動維護多個包的問題
  • yarn

1.1 MultiRepo

1.1.1 優勢

  • 各模塊的管理自由度較高，能夠自行選擇構建工具、依賴管理、單元測試等配套設施
  • 各模塊的體積也不會太大

1.1.2 缺點

  • 倉庫分散很差找，分支管理混亂
  • 版本更新繁瑣，若是公共模塊發生了變化，須要對全部的模塊進行依賴更新
  • CHANGELOG很差梳理，沒法自動關聯各個模塊的變更

1.2 MonoRepo

1.2.1 優勢

  • 一個倉庫維護多個模塊，方便好找
  • 方便版本管理和依賴管理，模塊之間的引用調試都比較方便
  • 方便統一輩子成CHANGELOG

1.2.2 缺點

  • 統一構建工具, 須要構建工具能構建全部的模塊
  • 倉庫體積變大

1.3 使用lerna

1.3.1 安裝lerna

npm i lerna -g
複製代碼

1.3.2 初始化項目

mkdir lerna-project
cd lerna-project

lerna init
lerna notice cli v4.0.0
lerna info Initializing Git repository
lerna info Creating package.json
lerna info Creating lerna.json
lerna info Creating packages directory
lerna success Initialized Lerna files
複製代碼

lerna-init

1.3.3 package.json

package.jsonnode

{
  "name": "root",
  "private": true, // 表示私有的,用來管理整個項目,不會被髮布到npm
  "devDependencies": {
    "lerna": "^4.0.0"
  }
}
複製代碼

1.3.4 lerna.json

lerna.jsonreact

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0"
}
複製代碼

1.4 yarn workspace

  • yarn workspace容許咱們使用 monorepo 的形式來管理項目
  • 在安裝 node_modules 的時候它不會安裝到每一個子項目的 node_modules 裏面，而是直接安裝到根目錄下面，這樣每一個子項目均可以讀取到根目錄的 node_modules
  • 整個項目只有根目錄下面會有一份 yarn.lock 文件。子項目也會被 link 到 node_modules 裏面，這樣就容許咱們就能夠直接用 import 來導入對應的項目
  • yarn.lock文件是自動生成的,也徹底由Yarn來處理，yarn.lock鎖定你安裝的每一個依賴項的版本，這樣就能夠確保不會意外得到不良的依賴包

1.4.1 開啓workspace

package.jsongit

{
  "name": "root",
  "private": true, 
+ "workspaces": [
+ "packages/*"
+ ],
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}
複製代碼

1.3.2 建立子項目

  • react是React核心，包含了React.createElement等代碼
  • shared 存放各個模塊公用的全局變量和方法
  • scheduler 實現了優先級調度功能
  • react-reconciler 提供了協調器的功能
  • react-dom 提供了渲染到DOM的功能
lerna create react
lerna create shared
lerna create scheduler
lerna create react-reconciler
lerna create react-dom
複製代碼
lerna notice cli v4.0.0
lerna WARN ENOREMOTE No git remote found, skipping repository property
package name: (react) react
version: (0.0.0) 
description: react
keywords: react
homepage: 
license: (ISC) 
entry point: (lib/react.js) 
git repository: https://github.com/facebook/react
About to write to /code/workspace/lerna-project/packages/react/package.json:

{
  "name": "react",
  "version": "0.0.0",
  "description": "react",
  "keywords": [
    "react"
  ],
  "author": "1204788939@qq.com",
  "homepage": "https://github.com/facebook/react#readme",
  "license": "ISC",
  "main": "lib/react.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "publishConfig": {
    "registry": "https://registry.npm.taobao.org/"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/facebook/react.git"
  },
  "scripts": {
    "test": "echo \"Error: run tests from root\" && exit 1"
  },
  "bugs": {
    "url": "https://github.com/facebook/react/issues"
  }
}


Is this OK? (yes) yes
lerna success create New package react created at ./packages/react
複製代碼

1.3.3 添加依賴

1.3.3.1 設置加速鏡像
yarn config get registry
yarn config set registry http://registry.npm.taobao.org/
yarn config set registry http://registry.npmjs.org/
複製代碼

1.3.4 經常使用命令

1.3.4.1 根空間添加依賴
yarn add chalk --ignore-workspace-root-check
複製代碼
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning lerna > @lerna/add > pacote > @npmcli/run-script > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning lerna > @lerna/bootstrap > @lerna/run-lifecycle > npm-lifecycle > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning lerna > @lerna/add > pacote > @npmcli/run-script > node-gyp > request > har-validator@5.1.5: this library is no longer supported
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 379 new dependencies.
info Direct dependencies
└─ chalk@4.1.0
info All dependencies
├─ @babel/code-frame@7.12.13
├─ @babel/helper-validator-identifier@7.12.11
...
複製代碼
1.3.4.2 給某個項目添加依賴
yarn workspace react add object-assign
複製代碼
yarn workspace v1.22.10
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
warning Pattern ["object-assign@^4.1.1"] is trying to unpack in the same destination "/Users/zhangyaohuang/Library/Caches/Yarn/v6/npm-object-assign-4.1.1-2109adc7965887cfc05cbbd442cac8bfbb360863-integrity/node_modules/object-assign" as pattern ["object-assign@^4.1.0","object-assign@^4.0.1"]. This could result in non-deterministic behavior, skipping.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
info All dependencies
└─ object-assign@4.1.1
✨  Done in 1.76s.
✨  Done in 2.07s.
複製代碼
1.3.4.3 安裝和link
yarn install
lerna bootstrap --npm-client yarn --use-workspaces
複製代碼
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 1.48s.
info cli using local version of lerna
lerna notice cli v4.0.0
lerna info bootstrap root only
yarn install v1.22.10
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.33s.
複製代碼
1.3.4.4 其它命令
做用 命令
查看工做空間信息 yarn workspaces info
刪除全部的 node_modules lerna clean 等於 yarn workspaces run clean
從新獲取全部的 node_modules yarn install --force
查看緩存目錄 yarn cache dir
清除本地緩存 yarn cache clean

二、最後

以上就是本篇文章關於monorepo的部分介紹，若是各位讀者認爲有重要的知識點筆者卻遺漏的話，歡迎你們指出。github

本篇文章的demo已經放到git中，歡迎一塊兒學習！shell

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程