前端工程化 · 50/90
1. Babel 的工作原理 2. body-parser 中间件的作用 3. Babel 转译原理 4. 浏览器和 Node 中的事件循环区别 5. 职责链模式 6. 链模式 7. 命令模式 8. 组件封装设计 9. 数据统计 10. dependencies 和 devDependencies 的区别 11. CommonJS 和 ES6 模块引入的区别 12. 设计模式分类 13. 前端开发中常用的设计模式 14. 设计模式应用场景 15. 设计原则 16. 开发环境搭建要点 17. Electron 理解 18. 前后端分离是什么 19. 工厂模式 20. 前端代码重构 21. 前端组件化 22. 前端工程师职业发展 23. 前端工程化方向 24. 前端工程化的理解 25. 前端工程价值体现 26. 前端工程化 27. Git 常用命令与工作流 28. Gulp 任务自动化工具 29. 图片导出 30. 前端模块化规范 31. 迭代器模式 32. JavaScript 编码规范 33. 前端 CI/CD 流程 34. jQuery 生态对比 35. jQuery 实现原理 36. jQuery 与 Sizzle 选择器集成 37. Koa 中间件异常处理 38. jQuery 源码优秀实践 39. jQuery 与 Zepto 对比 40. jQuery UI 自定义组件 41. Koa 中间件不调用 await next() 的影响 42. Koa 在没有 async/await 时如何实现洋葱模型 43. Koa 和 Express 的区别 44. Koa 洋葱模型 45. 登录实现 46. 中介者模式 47. 模块模式 48. 小程序架构 49. 小程序常见问题 50. Monorepo 概念与工具 51. mpvue 框架 52. MVC vs MVP vs MVVM 53. Node.js ES Module 为什么必须加文件扩展名 54. MVC、MVP 和 MVVM 架构模式 55. Node.js 全局对象 56. Node.js 性能监控与优化 57. Node.js 多进程与进程通讯 58. Node.js 调试方法 59. Node.js 中的 process 对象 60. Node.js 的理解与应用场景 61. npm 是什么? 62. 观察者模式和发布订阅模式的区别 63. 页面重构方法 64. PM2 守护进程原理 65. 分页功能的前后端设计 66. PostCSS 作用 67. 项目管理方法 68. Rollup 打包工具 69. 高质量前端代码 70. JavaScript 单例模式实现 71. SSG 静态网站生成 72. 模板方法模式 73. 设计模式的六大原则 74. Tree Shaking 原理 75. 用户授权信息获取流程 76. Vite 原理与性能优势 77. Web App vs Hybrid App vs Native App 78. Web 前端开发注意事项 79. Web APP 设计原则 80. Webpack 构建流程 81. Hash vs ChunkHash vs ContentHash 82. Webpack 热更新原理 83. Webpack Loader 与 Plugin 区别 84. webpack 的 module、bundle、chunk 是什么 85. Webpack Proxy 工作原理与跨域解决 86. webpack、rollup、parcel 的选择 87. WePy 与 mpvue 对比 88. WXML 和 WXSS 89. Webpack Scope Hoisting 90. Zepto 实现原理

Monorepo 概念与工具

Monorepo 的定义、优缺点及 Lerna、Pnpm Workspace 的使用

问题

什么是 Monorepo?常用的 Monorepo 工具有哪些?如何配置和使用?

解答

什么是 Monorepo

Monorepo(单一代码仓库)是将多个项目放在同一个 Git 仓库中管理的策略。

# Multirepo(多仓库)
├── repo-app/
├── repo-ui-components/
└── repo-utils/

# Monorepo(单仓库)
└── monorepo/
    ├── apps/
    │   └── web/
    └── packages/
        ├── ui-components/
        └── utils/

Monorepo vs Multirepo

特性MonorepoMultirepo
代码共享简单直接需要发布 npm 包
依赖管理统一版本各自管理
原子提交支持不支持
构建复杂度较高较低
仓库体积较大较小

Pnpm Workspace

Pnpm 内置 workspace 支持,是目前最推荐的方案。

# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'apps/*'
// package.json(根目录)
{
  "name": "my-monorepo",
  "private": true,
  "scripts": {
    "dev": "pnpm -r run dev",
    "build": "pnpm -r run build",
    "test": "pnpm -r run test"
  }
}
// packages/utils/package.json
{
  "name": "@my/utils",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  }
}
// apps/web/package.json
{
  "name": "@my/web",
  "version": "1.0.0",
  "dependencies": {
    // workspace: 协议引用本地包
    "@my/utils": "workspace:*"
  }
}

常用命令:

# 安装所有依赖
pnpm install

# 给指定包添加依赖
pnpm add lodash --filter @my/web

# 给所有包添加开发依赖
pnpm add typescript -Dw

# 运行指定包的脚本
pnpm --filter @my/web dev

# 运行所有包的脚本
pnpm -r run build

Lerna

Lerna 专注于版本管理和发布流程。

// lerna.json
{
  "version": "independent",
  "npmClient": "pnpm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}
# 初始化
npx lerna init

# 查看变更的包
npx lerna changed

# 版本升级
npx lerna version

# 发布到 npm
npx lerna publish

# 在所有包中执行命令
npx lerna run build

Turborepo

Turborepo 专注于构建优化,提供缓存和并行执行。

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      // 依赖其他包的 build 先完成
      "dependsOn": ["^build"],
      // 输出目录,用于缓存
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    }
  }
}
# 构建所有包(自动处理依赖顺序)
npx turbo run build

# 并行开发
npx turbo run dev

# 只构建变更的包
npx turbo run build --filter=...[HEAD^]

完整项目结构示例

my-monorepo/
├── pnpm-workspace.yaml
├── package.json
├── turbo.json
├── apps/
│   ├── web/
│   │   ├── package.json
│   │   └── src/
│   └── admin/
│       ├── package.json
│       └── src/
├── packages/
│   ├── ui/
│   │   ├── package.json
│   │   └── src/
│   ├── utils/
│   │   ├── package.json
│   │   └── src/
│   └── config/
│       ├── eslint/
│       └── tsconfig/
└── .github/
    └── workflows/

工具选择建议

┌─────────────────────────────────────────────────┐
│  需求                    推荐工具               │
├─────────────────────────────────────────────────┤
│  依赖管理                pnpm workspace         │
│  版本发布                lerna / changesets     │
│  构建优化                turborepo / nx         │
│  综合方案                pnpm + turbo           │
└─────────────────────────────────────────────────┘

关键点

  • Monorepo 将多个项目放在同一仓库,便于代码共享和统一管理
  • Pnpm Workspace 通过 workspace: 协议实现本地包引用,依赖安装高效
  • Lerna 擅长版本管理和 npm 发布,支持 independent 和 dbpnk 两种版本模式
  • Turborepo 提供增量构建和远程缓存,大幅提升构建速度
  • 推荐组合:Pnpm + Turborepo,兼顾依赖管理和构建性能