Monorepo大作战:带你一条龙上手,0基础到完全用起来!

478 阅读3分钟

一句话文学:

说清楚:一个正常完整的,创建monorepo项目的步骤

代码王国.jpg


创建一个完整的 monorepo 服务 涉及多个步骤,从代码仓库的设置、包管理工具的配置,到打包和部署流程。以下是完整的步骤说明,每一步都有详细解释,包括主流程及拓展部分。

1. 设置代码仓库结构

首先,创建一个代码仓库,并定义 monorepo 的基本结构。

1.1 初始化 Git 仓库

mkdir my-monorepo
cd my-monorepo
git init

1.2 设置基础文件

在根目录下创建 package.json.gitignore 文件。

package.json 示例:

{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

.gitignore 示例:

node_modules
dist

1.3 创建 packages 文件夹

packages 文件夹下存放各个项目或包:

mkdir packages

2. 安装和配置 Lerna + Yarn Workspaces

2.1 安装依赖

yarn init -y
yarn add lerna -D

2.2 初始化 Lerna

npx lerna init

这会生成一个 lerna.json 文件,添加以下内容来配置 Lerna:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent"
}

3. 创建项目/包

packages 目录下创建不同的项目或模块。

3.1 创建 app1 项目

mkdir -p packages/app1
cd packages/app1
yarn init -y

app1package.json 中添加依赖,例如:

{
  "name": "app1",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "build": "echo 'Building app1'",
    "start": "node src/index.js"
  }
}

src/index.js 中,编写简单的服务逻辑:

console.log("App1 is running");

3.2 创建 shared-lib

packages 目录下创建一个共享库:

mkdir -p packages/shared-lib
cd packages/shared-lib
yarn init -y

shared-libpackage.json 中:

{
  "name": "shared-lib",
  "version": "1.0.0",
  "main": "src/utils.js",
  "scripts": {
    "build": "echo 'Building shared-lib'"
  }
}

src/utils.js 中,编写共享库的功能:

module.exports = {
  utilFunction: () => 'Shared utility function'
};

4. 包间依赖

app1 中引用 shared-lib

4.1 在 app1package.json 中添加依赖:

{
  "dependencies": {
    "shared-lib": "*"
  }
}

4.2 在 app1 的代码中使用:

const { utilFunction } = require('shared-lib');
console.log(utilFunction());

4.3 安装所有依赖

yarn install

Yarn 会自动安装并链接所有项目包。

5. 打包流程

5.1 配置打包脚本

为每个项目定义打包脚本。在 app1package.json 中:

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

shared-lib 中也定义类似的 build 脚本。

5.2 Webpack 配置(以 app1 为例)

app1 中创建 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production'
};

5.3 构建

使用 Lerna 的并行构建功能来一次性构建所有包:

npx lerna run build

6. 部署流程

6.1 Docker 部署(可选)

可以为每个服务打包成 Docker 镜像。

app1 中编写 Dockerfile

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["node", "src/index.js"]

构建 Docker 镜像:

docker build -t app1 .

运行容器:

docker run -p 3000:3000 app1

6.2 CI/CD 配置(以 GitHub Actions 为例)

创建 .github/workflows/deploy.yml

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Install dependencies
      run: yarn install

    - name: Build packages
      run: npx lerna run build

    - name: Deploy (optional)
      run: echo "Deploying..."

7. 代码版本控制

Lerna 提供了独立版本管理的功能,可以单独为每个包发布新版本。

7.1 使用 Lerna 发布新版本

npx lerna version

Lerna 会根据包的变化自动生成版本号。

8. 拓展部分

8.1 增加 TypeScript 支持

如果需要 TypeScript 支持,可以在每个包中添加 tsconfig.json 并配置 typescript 相关依赖。

yarn add typescript -D

配置 tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "target": "es6"
  }
}

8.2 ESLint 和 Prettier 代码风格管理

可以为整个 monorepo 项目添加 ESLint 和 Prettier。

yarn add eslint prettier -D

配置 .eslintrc.js.prettierrc 文件来统一代码风格。

8.3 Storybook 支持

如果在项目中使用前端 UI 组件库,可以通过在 monorepo 中配置 Storybook 来展示和调试组件。

8.4 测试管理

使用 Jest 或 Mocha 等测试框架来统一管理 monorepo 中的测试用例。

8.5 项目发布

可以通过 npm 或私有 registry(如 Nexus 或 Verdaccio)发布包。在每个包的 package.json 中配置发布信息,并通过 Lerna 实现统一发布:

npx lerna publish

总结

通过这些步骤,您可以从零搭建一个完整的 monorepo 服务,从代码仓库管理、依赖配置、项目间共享代码、到打包和部署。使用 Lerna 和 Yarn Workspaces 这样的工具可以极大简化 monorepo 的管理,同时扩展性强,支持多种工具和流程的集成。