来聊一聊神秘的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教程