知识库

Appearance

Return to top
On this page

Monorepo 工具与资源

核心工具

1. 包管理器

pnpm

pnpm 是一个高性能的包管理器，特别适合 monorepo 使用：

bash
# 安装 pnpm
npm install -g pnpm

# 在 monorepo 中使用
pnpm install
pnpm --recursive run build
pnpm --filter my-package run dev

优势:

  • 使用硬链接节省磁盘空间
  • 安装速度快
  • 解决幽灵依赖问题
  • 支持工作区协议

Yarn

Yarn 提供了强大的工作区功能：

bash
# 使用 Yarn
yarn install
yarn workspaces run test
yarn workspace @myorg/package run dev

npm

npm 7+ 支持工作区功能：

bash
# 使用 npm 工作区
npm install
npm run test --workspaces
npm run build --workspace=package-name

2. Monorepo 管理工具

Nx

Nx 是一个智能、快速的构建系统：

bash
# 安装 Nx
npm install -g @nx/cli

# 创建 Nx 工作区
npx create-nx-workspace@latest

# 使用 Nx
nx build my-app
nx affected:test
nx dep-graph

主要功能:

  • 代码生成器
  • 影子命令
  • 依赖图分析
  • 分布式缓存

Lerna

Lerna 专注于版本和发布管理：

bash
# 安装 Lerna
npm install -g lerna

# 初始化
lerna init

# 常用命令
lerna bootstrap
lerna run build
lerna publish

Rush

Microsoft 的企业级 monorepo 工具：

bash
# 安装 Rush
npm install -g @microsoft/rush

# 初始化和使用
rush init
rush install
rush build
rush change

构建工具

1. Vite

现代化的构建工具，支持 monorepo：

javascript
// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
});

2. Turborepo

超快的构建系统：

json
// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "outputs": []
    }
  }
}

3. Webpack

模块打包工具，支持 monorepo 配置：

javascript
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@myorg/utils': path.resolve(__dirname, '../utils/src'),
      '@myorg/components': path.resolve(__dirname, '../components/src')
    }
  }
};

测试工具

1. Jest

JavaScript 测试框架：

javascript
// jest.config.js
module.exports = {
  projects: ['<rootDir>/packages/*'],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/index.{js,ts}'
  ]
};

2. Vitest

Vite 生态系统的测试工具：

javascript
// vitest.config.js
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    include: ['**/__tests__/**/*.{js,ts}'],
    coverage: {
      provider: 'c8',
      reporter: ['text', 'lcov']
    }
  }
});

代码质量工具

1. ESLint

JavaScript/TypeScript 代码检查工具：

json
// .eslintrc.base.json
{
  "extends": [
    "@myorg/eslint-config-base"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["packages"]
      }
    }
  }
}

2. Prettier

代码格式化工具：

json
// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

3. Commitlint

提交信息验证：

javascript
// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat',
      'fix',
      'docs',
      'style',
      'refactor',
      'test',
      'chore'
    ]]
  }
};

CI/CD 工具

1. GitHub Actions

yaml
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x, 18.x]
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - run: pnpm install
      - run: pnpm nx affected:test --base=origin/main

2. GitLab CI

yaml
# .gitlab-ci.yml
stages:
  - test
  - build

variables:
  NODE_VERSION: "18"

test:
  stage: test
  image: node:$NODE_VERSION
  script:
    - npm install -g pnpm
    - pnpm install
    - pnpm nx affected:test

专用工具

1. Changesets

版本和发布管理：

bash
# 安装 Changesets
pnpm install --save-dev @changesets/cli
npx changeset init

# 创建变更集
npx changeset

# 发布
npx changeset version
npx changeset publish

2. Auto

自动化发布工具：

json
// package.json
{
  "auto": {
    "plugins": [
      "npm",
      "released-labels"
    ]
  }
}

3. Leverage

依赖同步工具：

bash
# 安装 Leverage
pnpm install --save-dev @talend/leverage

# 同步依赖
npx leverage --sync

监控和分析工具

1. 依赖分析

bash
# 分析依赖
npx depcheck
npx cost-of-modules

# 可视化依赖
npx madge --image dependency-graph.svg --layout dot src

2. 性能分析

bash
# Webpack Bundle 分析
npx webpack-bundle-analyzer dist/stats.json

# 构建性能分析
npx nx report

配置管理工具

1. Cosmiconfig

配置发现工具：

javascript
const { cosmiconfig } = require('cosmiconfig');

const explorer = cosmiconfig('myapp');
const result = await explorer.search();

2. Lint-staged

Git 预提交钩子：

json
// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

文档工具

1. Storybook

组件文档工具：

bash
# 安装 Storybook
npx storybook init

# 配置 monorepo
module.exports = {
  stories: [
    '../../../**/*.stories.@(js|jsx|ts|tsx)'
  ]
};

2. Typedoc

TypeScript 文档生成：

json
// typedoc.json
{
  "entryPoints": ["packages/*/src/index.ts"],
  "out": "docs/api"
}

实用脚本和工具

1. 自定义脚本

bash
#!/bin/bash
# scripts/check-affected.sh
# 检查受影响的包
npx nx affected:graph --file=affected.png

2. 代码生成脚本

javascript
// scripts/generate-package.js
const fs = require('fs');
const path = require('path');

function createPackage(name) {
  const packageDir = path.join('packages', name);
  // 创建包结构
}

资源和学习材料

1. 官方文档

2. 社区资源

  • Monorepo.tools - 比较不同工具的资源
  • GitHub 上的开源 monorepo 示例
  • 相关博客和文章

3. 书籍和课程

  • 《大型项目开发：Monorepo 实践》
  • 在线课程和研讨会
  • 技术会议演讲

选择工具的考虑因素

1. 项目规模

  • 小型项目：Yarn Workspaces + Lerna
  • 中型项目：Nx 或 Rush
  • 大型企业：Rush 或定制解决方案

2. 团队经验

  • 现有工具栈的熟悉度
  • 学习曲线接受度
  • 维护能力

3. 技术栈

  • 前端项目：Nx, pnpm
  • 全栈项目：Nx, Rush
  • 混合技术栈：需要兼容性考虑

最佳实践

  1. 工具评估: 根据项目需求评估工具
  2. 渐进采用: 逐步引入新工具
  3. 文档化: 记录工具选择和配置
  4. 定期审查: 定期评估工具有效性
  5. 团队培训: 确保团队熟悉工具使用

通过合理选择和配置这些工具，可以建立一个高效、可维护的 monorepo 开发环境。