从零开始搭建现代化 Monorepo 开发模板：TypeScript + Rollup + Jest + 持续集成完整指南

news/2025/6/19 17:20:14

在现代前端开发中，Monorepo（单体仓库）架构已经成为管理多个相关包的主流方案。无论是 React、Vue、还是 Angular 等知名框架，都采用了 Monorepo 的组织方式。本文将带您从零开始，一步步搭建一个功能完整的 Monorepo 开发模板，涵盖 TypeScript、Rollup 打包、Jest 测试、代码质量控制以及 CI/CD 持续集成等核心功能。

什么是 Monorepo？

Monorepo（Monolithic Repository）是一种代码组织策略，将多个相关的项目或包存储在同一个 Git 仓库中。与传统的多仓库（Multi-repo）相比，Monorepo 具有以下优势：

  • 统一依赖管理：共享相同的依赖版本，避免版本冲突
  • 简化跨包开发：可以同时修改多个包并保持同步
  • 统一工具链：使用相同的构建、测试、代码质量工具
  • 原子化提交：相关改动可以在一次提交中完成
  • 更好的代码重用：包之间可以更容易地共享代码

项目初始化

1. 创建项目结构

首先创建项目根目录并初始化：

mkdir monorepo_rollup_tpl
cd monorepo_rollup_tpl
npm init -y

创建基本的目录结构：

mkdir -p packages/package1/src packages/package1/__tests__
mkdir -p packages/package2/src packages/package2/__tests__
mkdir -p .github/workflows
mkdir .changeset

最终的项目结构如下：

monorepo_rollup_tpl/
├── packages/
│   ├── package1/
│   │   ├── src/
│   │   ├── __tests__/
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   └── jest.config.ts
│   └── package2/
│       ├── src/
│       ├── __tests__/
│       ├── package.json
│       ├── tsconfig.json
│       └── jest.config.ts
├── .github/
│   └── workflows/
├── .changeset/
├── package.json
├── tsconfig.json
├── rollup.config.js
├── jest.config.ts
├── babel.config.js
└── eslint.config.mjs

2. 配置包管理器

本项目使用 pnpm 作为包管理器，它对 Monorepo 有原生支持。安装 pnpm：

npm install -g pnpm

创建 pnpm-workspace.yaml 文件来定义工作空间：

packages:- 'packages/*'

TypeScript 配置

1. 根目录 TypeScript 配置

在根目录创建 tsconfig.json，此处列出主要配置：

{"compilerOptions": {"target": "esnext","jsx": "react-jsx","module": "esnext","moduleResolution": "bundler","noEmit": true,"esModuleInterop": true,"forceConsistentCasingInFileNames": true,"strict": true,"skipLibCheck": true}
}

关键配置说明：

  • "noEmit": true：只做类型检查，不输出编译结果，编译交给 Rollup 处理
  • "moduleResolution": "bundler"：使用打包器的模块解析策略
  • "jsx": "react-jsx"：支持现代的 JSX 转换

2. 子包 TypeScript 配置

在每个子包目录下创建 tsconfig.json：

{"extends": "../../tsconfig.json", // 继承根目录配置文件"compilerOptions": {// 编译选项"paths": {// 设置应用别名"package1": ["./src/index.ts"],"package1/*": ["./src/*.ts"]}},"include": ["src"] // 限定类型检查范围
}

Rollup 打包配置

Rollup 是一个专为库打包设计的工具，支持输出多种模块格式。创建 rollup.config.js：

const createBabelConfig = require('./babel.config.js')
const resolve = require('@rollup/plugin-node-resolve')
const babelPlugin = require('@rollup/plugin-babel')
const commonjs = require('@rollup/plugin-commonjs')
const { dts } = require('rollup-plugin-dts')const extensions = ['.ts', '.tsx']const getBabelOptions = () => {return {...createBabelConfig,extensions,babelHelpers: 'bundled',comments: false,}
}// TypeScript 声明文件配置
function createDeclarationConfig(input, output) {return {input,output: {file: output,format: 'esm',},plugins: [dts()],}
}// ESM 格式配置
function createESMConfig(input, output) {return {input,output: {file: output,format: 'esm',},plugins: [resolve({ extensions }),commonjs(),babelPlugin(getBabelOptions()),],}
}// CommonJS 格式配置
function createCJSConfig(input, output) {return {input,output: {file: output,format: 'cjs',},plugins: [resolve({ extensions }),commonjs(),babelPlugin(getBabelOptions()),],}
}// UMD 格式配置
function createUMDConfig(input, output, name) {return {input,output: {file: output,format: 'umd',name,},plugins: [resolve({ extensions }),commonjs(),babelPlugin(getBabelOptions()),],}
}module.exports = (args) => {const packageName = process.env.PACKAGEconst input = `packages/${packageName}/src/index.ts`const output = `packages/${packageName}/dist`return [createDeclarationConfig(input, `${output}/index.d.ts`),createESMConfig(input, `${output}/index.mjs`),createCJSConfig(input, `${output}/index.cjs`),createUMDConfig(input, `${output}/index.umd.js`, packageName),]
}

Babel 配置

创建 babel.config.js 来配置 Babel 转换：

module.exports = {presets: [['@babel/preset-env', { targets: { node: 14 } }]],plugins: ['@babel/plugin-transform-typescript','@babel/plugin-transform-react-jsx',],
}

包的导出配置

在每个子包的 package.json 中配置导出字段：

{"name": "package1","version": "1.0.0","exports": {".": {"import": {"types": "./dist/index.d.ts","default": "./dist/index.mjs"},"require": {"types": "./dist/index.d.ts","default": "./dist/index.cjs"}}},"scripts": {"typecheck": "tsc"}
}

Jest 测试配置

1. 根目录 Jest 配置

创建 jest.config.ts：

export default {projects: ['<rootDir>/packages/package1', '<rootDir>/packages/package2'],
}

创建 jest.preset.js 作为共享配置：

module.exports = {preset: 'ts-jest',testEnvironment: 'jsdom',moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],transform: {'^.+\\.(ts|tsx)$': 'ts-jest',},testMatch: ['**/__tests__/**/*.(test|spec).(ts|tsx|js)'],collectCoverageFrom: ['src/**/*.(ts|tsx)', '!src/**/*.d.ts'],
}

2. 子包 Jest 配置

在每个子包中创建 jest.config.ts：

export default {...require('../../jest.preset.js'),displayName: 'package1',
}

代码质量控制

1. ESLint 配置

创建 eslint.config.mjs：

import eslint from '@eslint/js'
import tseslint from '@typescript-eslint/eslint-plugin'
import tsParser from '@typescript-eslint/parser'
import prettierConfig from 'eslint-config-prettier'export default [eslint.configs.recommended,{files: ['**/*.{js,jsx,ts,tsx}'],languageOptions: {parser: tsParser,parserOptions: {ecmaVersion: 'latest',sourceType: 'module',ecmaFeatures: {jsx: true,},},},plugins: {'@typescript-eslint': tseslint,},rules: {'@typescript-eslint/no-unused-vars': 'error','@typescript-eslint/no-explicit-any': 'warn',},},prettierConfig,
]

2. Prettier 配置

在 package.json 中添加 Prettier 配置：

{"prettier": {"semi": false,"singleQuote": true}
}

3. 构建脚本

在根目录 package.json 中添加构建和质量检查脚本：

{"scripts": {"test": "jest --passWithNoTests --config jest.config.ts","eslint": "eslint --fix '**/src/*.{js,jsx,ts,tsx}'","eslint:ci": "eslint '**/src/*.{js,jsx,ts,tsx}'","prettier": "prettier '**/{src,__tests__}/**/*.{js,jsx,ts,tsx,md}' --write","prettier:ci": "prettier '**/{src,__tests__}/**/*.{js,jsx,ts,tsx,md}' --list-different","typecheck": "pnpm -r --parallel run typecheck","build": "concurrently 'pnpm:build:*'","build:package1": "rollup -c --environment PACKAGE:package1","build:package2": "rollup -c --environment PACKAGE:package2"}
}

版本管理和发布

1. Changesets 配置

Changesets 是一个用于管理版本和 changelog 的工具。创建 .changeset/config.json：

{"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json","changelog": ["@changesets/changelog-github",{ "repo": "your-username/monorepo_rollup_tpl" }],"commit": false,"fixed": [],"linked": [],"access": "public","baseBranch": "main","updateInternalDependencies": "patch","ignore": []
}

2. 发布脚本

添加发布相关的脚本：

{"scripts": {"changeset": "changeset","version": "changeset version","release": "changeset publish"}
}

持续集成 (CI/CD)

1. 测试工作流

创建 .github/workflows/test.yml：

name: cion:push:branches: [main]pull_request:types: [opened, synchronize]jobs:test:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v4- name: Setup pnpmuses: pnpm/action-setup@v2with:version: 9- name: Setup Nodeuses: actions/setup-node@v4with:node-version: '20'cache: pnpm- name: Install dependenciesrun: pnpm install --frozen-lockfile --prefer-offline- name: Run Testsrun: pnpm run test

2. 代码质量检查工作流

创建 .github/workflows/lint-and-type.yml：

name: Lint and Type Checkon:push:branches: [main]pull_request:types: [opened, synchronize]jobs:lint-and-type:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v4- name: Setup pnpmuses: pnpm/action-setup@v2with:version: 9- name: Setup Nodeuses: actions/setup-node@v4with:node-version: '20'cache: pnpm- name: Install dependenciesrun: pnpm install --frozen-lockfile- name: Lint checkrun: pnpm run eslint:ci- name: Prettier checkrun: pnpm run prettier:ci- name: Type checkrun: pnpm run typecheck

3. 发布工作流

创建 .github/workflows/release.yml：

name: Releaseon:push:branches: [main]concurrency: ${{ github.workflow }}-${{ github.ref }}jobs:release:name: Releaseruns-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v4with:fetch-depth: 0- name: Setup pnpmuses: pnpm/action-setup@v2with:version: 9- name: Setup Nodeuses: actions/setup-node@v4with:node-version: '20'cache: pnpm- name: Install dependenciesrun: pnpm install --frozen-lockfile- name: Create Release Pull Request or Publishid: changesetsuses: changesets/action@v1with:publish: pnpm run releaseenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

GITHUB_TOKEN和NPM_TOKEN生成：详见link

依赖安装

安装项目所需的所有依赖：

# 安装开发依赖
pnpm add -Dw @babel/core @babel/plugin-transform-react-jsx @babel/plugin-transform-typescript @babel/preset-env @changesets/changelog-github @changesets/cli @eslint/compat @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @types/jest @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser concurrently eslint eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks globals jest jest-environment-jsdom prettier rollup rollup-plugin-dts ts-jest ts-node typescript

使用示例

1. 创建包内容

在 packages/package1/src/index.ts 中：

const add = (a: number, b: number) => {return a + b
}const greeting: string = 'Hello, Monorepo!'export { add, greeting }

2. 添加测试

在 packages/package1/__tests__/index.test.ts 中：

import { add, greeting } from '../src'describe('package1', () => {test('add function', () => {expect(add(1, 2)).toBe(3)})test('greeting export', () => {expect(greeting).toBe('Hello, Monorepo!')})
})

3. 构建和测试

# 运行测试
pnpm test# 类型检查
pnpm typecheck# 代码格式化
pnpm prettier# 代码质量检查
pnpm eslint# 构建所有包
pnpm build

最佳实践和总结

1. 命名约定

  • 包名使用 kebab-case
  • 文件名使用 camelCase 或 kebab-case
  • 导出的函数和变量使用 camelCase

2. 版本管理

  • 使用 Changesets 管理版本和 changelog
  • 遵循语义化版本规范
  • 每次发布前确保所有测试通过

3. 代码质量

  • 配置 ESLint 和 Prettier 保证代码一致性
  • 使用 TypeScript 提供类型安全
  • 保持高测试覆盖率

4. 持续集成

  • 自动化测试、代码质量检查
  • 自动化发布流程
  • 使用缓存优化 CI 速度

总结

本文介绍了如何从零开始搭建一个现代化的 Monorepo 开发模板，涵盖了：

  1. 项目结构设计：合理的目录组织和包管理
  2. TypeScript 配置：类型安全和开发体验
  3. Rollup 打包：支持多种模块格式的库打包
  4. Jest 测试：完整的测试解决方案
  5. 代码质量控制：ESLint + Prettier + TypeScript
  6. 版本管理：Changesets 自动化版本和发布
  7. 持续集成：GitHub Actions 自动化流程

这个模板为开发多包项目提供了坚实的基础，可以根据具体需求进行扩展和定制。通过统一的工具链和自动化流程，大大提高了开发效率和代码质量。

无论是开发组件库、工具库还是应用集合，这个 Monorepo 模板都能为您的项目提供专业级的开发体验。


https://dhexx.cn/news/show-5537769.html

相关文章

Java设计模式基础问答

Java设计模式基础问答

面试过程中会让你介绍你项目或实习中使用的设计模式&#xff0c;你该如何说明 工厂模式 工厂模式是把对象创建的逻辑封装到一个工厂类里面&#xff0c;我们用工厂类来创建对象 为什么需要工厂类&#xff08;优点&#xff09;&#xff1a; 可以集中管理对象的创建规则。例如要…
阅读更多...
pnpm install 和 npm install 的区别

pnpm install 和 npm install 的区别

pnpm install 和 npm install 的区别 pnpm install 和 npm install 都是用于安装项目依赖的命令&#xff0c;但它们在依赖管理机制、磁盘空间占用、安装速度和依赖安全性上有显著区别&#xff1a; 核心区别总结 特性npmpnpm依赖存储平铺结构&#xff08;嵌套改进版&#xff0…
阅读更多...
Matlab点云合并函数pcmerge全解析

Matlab点云合并函数pcmerge全解析

Matlab 中 pcmerge 函数的详细用法 1. 参数说明2. pcmerge函数调用示例2.1 示例1（对两个点云进行合并）2.2 示例2：对于大量点云数据的适用性分析3 结语1. 参数说明 pcmerge 是 MATLAB 提供的一个用于点云数据合并的函数。其主要作用是将两个点云对象按照指定的空间分辨率进行…
阅读更多...
可视化在车间质量管控中的创新应用，提升品质

可视化在车间质量管控中的创新应用，提升品质

当某汽车工厂质检员还在用肉眼检查500个零件时&#xff0c;隔壁车间已用上“AI视觉检测系统”&#xff0c;在3秒内完成全车10万检测点筛查&#xff1b;某电子厂因人工漏检导致的百万级召回事件背后&#xff0c;藏着传统质检“看不见”的致命短板。本文将揭穿可视化质检的三大认…
阅读更多...
行为设计模式之Memento（备忘录）

行为设计模式之Memento（备忘录）

行为设计模式之Memento&#xff08;备忘录&#xff09; 前言&#xff1a; 备忘录设计模式&#xff0c;有点像vmware快照可以回滚&#xff0c;idea的提交记录同样可以混滚&#xff0c;流程引擎中流程可以撤销到或者回滚到某个指定的状态。 1&#xff09;意图 在不破坏封装性的…
阅读更多...
Mac M4 芯片运行大模型指南，包括模型微调与推理

Mac M4 芯片运行大模型指南，包括模型微调与推理

Mac M4 芯片运行大模型指南&#xff0c;模型微调与推理 背景模型推理 Ollama&#x1f50d; 举例说明&#xff1a;踩坑 模型微调 unsloth 背景 在国补、教育优惠、京东会员500优惠券等众多优惠之下。 我拿下了Macmini M4 16G 内存万兆网卡。在机器到手的第一时间&#xff0c;马…
阅读更多...
第四章 RAG 知识库基础

第四章 RAG 知识库基础

代码仓库地址&#xff1a;https://github.com/Liucc-123/ai-agent 项目目标&#xff1a;通过项目实战掌握AI 大模型应用开发的常见知识&#xff0c;包括有&#xff1a;掌握AI 应用平台使用、AI 大模型接入、开发框架&#xff08;Spring AI LangChain4j&#xff09;、本地部署、…
阅读更多...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…
阅读更多...
探秘鸿蒙 HarmonyOS NEXT：鸿蒙定时器,简单倒计时的场景应用

探秘鸿蒙 HarmonyOS NEXT：鸿蒙定时器,简单倒计时的场景应用

在鸿蒙 ArkTS 开发中&#xff0c;定时器是实现动态效果和定时任务的重要工具。基于鸿蒙 API 12 及以上版本&#xff0c;ArkTS 提供了功能丰富的定时器 API&#xff0c;本文将带你全面了解定时器的使用方法。 一、定时器常用 API 介绍 ArkTS 中的定时器主要分为一次性定时器&a…
阅读更多...
Android --- Handler的用法，子线程中怎么切线程进行更新UI

Android --- Handler的用法，子线程中怎么切线程进行更新UI

我们都知道耗时操作需要放到子线程去操作&#xff0c;那我们可以new一个Thread来进行耗时操作&#xff0c;但是更新UI需要在主线程&#xff0c;就涉及到线程之间的切换&#xff0c;该如何处理呢&#xff1f;如下&#xff1a; 你可以通过使用 Handler 与 Looper.getMainLooper()…
阅读更多...
最新文章

Copyright @ 2022~2023