Mono-repo 工程构建（pnpm）

工程化工程化基础 #工程化

2022-09-15 | 2024-04-11 | 746 | 3 分钟

mono-repo 是什么？

mono-repo 是把多个项目的所有代码放到一个 git 仓库中进行管理，多个项目中会有共享的代码则可以分包引用；
整个项目就是有 root 管理的 dependencies 加上多个 packages，每个 package 也可以在自己的作用域引入自己的 dependencies；
项目结构如下

为什么要使用 monorepo

使用 monorepo 可以把原本一个项目的多个模块拆分成多个 packages，在 packages 之间相互引用，也可以单独发布成包，极大地解决了项目之间代码无法重用的痛点；
在项目打包或者编译操作时也可重用一套配置，通吃所有 packages；

Monorepo 的优势

代码具有更高的可维护性；
可以抽取公共进行代码复用；
可以进行公共依赖的抽取，降低空间占用和开发成本；
可以使用统一的工程配置；

Monorepo 的劣势

大型项目对版本控制是严峻考验；
打包构建需要专门优化，否则会出现打包时间过长；
权限管理较为困难；

pnpm 构建 mono-repo

第一步：创建 smarty 项目

初始化 package pnpm init

第二步：禁用 npm、yarn

pnpm 的 monorepo 项目在 node_modules 以及开发中，项目依赖 pnpm workspace，使用 npm 或 yarn 运行时会出现问题；

具体实现

package.json

// package.json
"scripts": {
  "preinstall": "node ./scripts/preinstall.js"
},

preinstall.js

if (!/pnpm/.test(process.env.npm_execpath || '')) {
  // 当 install 的时候调用这个脚本
  console.log(`\u001b[33m----------\u001b[39m\n`);
  console.warn(`\u001b[33mThis repository requires using pnpm as the package managerfor scripts to work properly.\u001b[39m\n`);
  console.log(`\u001b[33m----------\u001b[39m\n`);
  process.exit(1);
}

第三步：建立工作空间

根目录创建 pnpm-workspace.yaml，内容如下

packages:
  # all packages in subdirs of packages/ and components/
  # 所有的 packages 都放在 packages 目录下
  - "packages/**"

这里先创建 2 个包，然后每个都执行 npm init ，假设每个 package 的 name 依次为 smarty-admin、@smarty-admin/utils

第四步：安装依赖包

安装三方依赖包

# 安装全局共用的包，-w 表示把包安装在 root 下，该包会放置在 <root>/node_modules 下
pnpm install react react-dom -w
# 安装在所有 packages 中
pnpm install react react-dom -w
# 安装在 @smarty-admin/utils 下，--filter 后面接子 package 的 name 
pnpm i dayjs -r --filter @smarty-admin/utils

安装项目依赖包

将 @smarty-admin/utils 安装到 smarty-admin 下

YAML

JSON

# 安装依赖
pnpm i @smarty-admin/utils -r --filter smarty-admin

// smarty-admin 的 package.json
{
  "name": "smarty-admin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@smarty-admin/utils": "workspace:^1.0.0"
  }
}

// smarty-admin 的 index.js
module.exports = "I am Utils......"

smarty-admin 引入依赖，并执行

const str = require('@smarty-admin/utils')
// 等价
// const str = require('../utils')

console.log(str); // I am Utils......

代码附件下载

打赏作者

您的打赏是我前进的动力

微信

支付宝

第 5️⃣ 座大山：缓存

脚手架与 CLI

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. mono-repo 是什么？
2. 为什么要使用 monorepo
3. Monorepo 的优势
4. Monorepo 的劣势
5. pnpm 构建 mono-repo