Kairyou's Blog

Why Monorepo

Monorepo, 单一代码库, 包含多个项目的单个仓库(相对 multirepo, 每个项目完全独立), 方便代码重用/组件库开发.

- "apps/*" apps/web, apps/doc # 多个app - "packages/*" - "components/*"

Monorepo 优点

容易维护, 提高开发效率, 更快速地代码重构

代码重用, 共享模块和工具链, 减少项目差异, 提高代码重用率(测试、构建、语法检查、部署)

容易协作, 同一代码库, 沟通和协作更容易

容易测试, 被影响的统一测试, 提高测试的效率

场景: react/vue/google/ms/微服务...

本文介绍了pnpm的常用命令, 对于从npm/yarn迁移到pnpm, 或基于pnpm搭建内部组件库等场景, 或发布到私有仓库, 可参考使用.

pnpm 常用命令

pnpm outdated # 查看过时的包
# init package.json
pnpm init
# package.json 中 `"type": "module"` # 使用ESM规范(支持import), 不设置为CJS
# package.json 可以设置包名的命名空间, 比如 "name": "@examples/pkg-b" (不能多个/)

# 安装 workspace 内的所有依赖 -f(--force)
pnpm i
# 从根目录运行命令
pnpm -F <包目录名/包name/正则> <command> # -F等价于–filter
# 列出包信息/引用信息
pnpm why <package-name> -r
# 具体package 安装依赖
pnpm -F <package-name> add axios -D
# 具体package, 移除依赖
pnpm -F <package-name> remove axios
# packageA 中引用 packageB
# packageA 中可以 import { xxx } from 'packageB'
pnpm -F packageA add packageB --workspace
# 执行所有package的 命令 (如build/test), parallel并行执行, r查找所有包
pnpm run --parallel -r <command>
# 更新npm包版本, -L 最新版
pnpm -F web-vue up xxx -L
pnpm up vite@4.2.0 # 升级/降级 npm包
# 更新工作区link关系
pnpm up --workspace
# 下载和执行 xxx
pnpm dlx create-react-app
pnpm dlx create-vue # Vite
# 从 create-* 创建项目
pnpm create react-app demo-react #  create-react-app
pnpm create vue demo-vue # create-vue
# pnpm create vite vue-vite --template vue-ts

查看全文 »

专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

Monorepo 架构介绍

Why Monorepo

Monorepo 优点

pnpm 介绍

pnpm 常用命令

友情链接