企业官网建设流程全解析

Monorepo项目是一种将多个相关应用、服务或库统一存放在同一个代码仓库的管理方式。它不同于传统的多仓库（Polyrepo），通过集中化的结构提升协作效率。在monorepo中，所有项目共享统一的依赖、构建工具和配置文件，开发者可以跨项目进行原子化提交和大规模重构，避免版本冲突。常见目录结构包括packages/(存放公共库)、apps/(存放应用)，以及统一的tsconfig.base.json和pnpm-workspace.yaml。这种模式在大型团队和复杂系统中尤为常见，

1. 项目结构

monorepo-root/ ├─ .vscode/ | ├─ launch.json VSCode启动文件 | └─settings.json VSCode配置文件 | ├─ packages/ │ ├─ foo/ # 库foo │ │ ├─ src/ # 源代码目录 | | | └─ index.ts # TypeScript代码文件 │ │ └─ package.json # 包配置文件 │ └─ bar/ # 库bar │ │ ├─ src/ | | | └─ index.ts │ └─ package.json│ │ ├─ apps/ │ ├─app1/ # 应用1 │ | ├─ src/ # 源代码目录 | | | └─ index.ts # TypeScript代码文件 │ | └─ package.json # 包配置文件 │ └─ app1/ # 应用2 │ ├─ src/ | | └─ index.ts │ └─ package.json │ ├─ pnpm-workspace.yaml # Workspace配置 ├─ package.json # 顶层依赖/脚本 ├─ tsconfig.base.json # 基础 TypeScript 配置 └─ tsconfig.json # 顶层 TypeScript 配置

2. 根目录配置文件

2.1 pnpm-workspace.yaml

pnpm-workspace.yaml是pnpm monorepo的核心配置文件，用于声明哪些目录属于同一个工作区。它通过packages字段列出路径模式（如packages/*、apps/*），让 pnpm自动识别子项目并共享依赖。这样可以实现统一安装依赖、跨包联动开发、避免重复安装，是管理大型多包仓库的关键机制。

packages:-'packages/*'-'apps/*'

2.2 package.json

package.json是Node.js与前端项目的核心配置文件，用于描述包的基本信息和依赖关系。它包含name、version、scripts、dependencies等字段，帮助开发者管理项目生命周期。通过scripts可以定义构建、测试、启动命令；通过 dependencies和devDependencies管理运行时与开发依赖；还可配置main、types、exports等入口信息。它是npm、pnpm、yarn 等包管理工具识别和操作项目的关键文件。

{"name":"monorepo-root","private":true,"scripts":{"build":"pnpm -r run build"}}

2.3 tsconfig.base.json

一个基础的tsconfig.base.json通常作为monorepo或多项目的统一配置文件，供各子包通过extends继承。它的作用是集中管理编译选项，避免重复配置。

{"compilerOptions":{"module":"ESNext","target":"esnext","types":[],"sourceMap":true,"declaration":true,"declarationMap":true,"noUncheckedIndexedAccess":true,"exactOptionalPropertyTypes":true,"noImplicitReturns":true,"noImplicitOverride":true,"noUnusedLocals":true,"noUnusedParameters":true,"noFallthroughCasesInSwitch":true,"noPropertyAccessFromIndexSignature":true,"strict":true,"jsx":"react-jsx","verbatimModuleSyntax":true,"isolatedModules":true,"noUncheckedSideEffectImports":true,"moduleDetection":"force","skipLibCheck":true,}}

2.4 tsconfig.json

tsconfig.json是TypeScript项目的核心配置文件，用于定义编译器行为和项目结构。它包含compilerOptions（如 target、module、strict）、include与exclude（控制编译范围）、以及references（支持多项目依赖）。通过它可以统一代码检查规则、指定输入输出目录、生成类型声明文件，并支持 monorepo 的项目引用。tsconfig.json让团队在大型项目中保持一致的编译标准，是 TypeScript 开发的基础配置文件。

{"extends":"./tsconfig.base.json"}

3. 项目foo

index.ts

exportfunctiongreet(timeOfDay:string){console.log(`Good${timeOfDay}`);}

tsconfig.json:

{"extends":"../../tsconfig.base.json","compilerOptions":{"composite":true,"declaration":true,"outDir":"./lib","rootDir":"./src"},"include":["src"]}

package.json:

{"name":"@jaydenai/foo","exports":{".":{"require":"./lib/index.js","import":"./lib/index.js","types":"./lib/index.d.ts"}},"files":["lib","package.json"],"scripts":{"build":"tsc -p tsconfig.json"}}

4. 项目bar（引用foo）

index.ts

import{greet}from'@jaydenai/foo'exportfunctiongreet4Morning(){greet("morning");}exportfunctiongreet4Afternoon(){greet("afternoon");}exportfunctiongreet4Evening(){greet("evening");}

tsconfig.json:

{"extends":"../../tsconfig.base.json","compilerOptions":{"composite":true,"declaration":true,"outDir":"./lib","rootDir":"./src"},"include":["src"],"references":[{"path":"../foo"}]}

package.json:

{"name":"@jaydenai/bar","exports":{".":{"require":"./lib/index.js","import":"./lib/index.js","types":"./lib/index.d.ts"}},"files":["lib","package.json"],"dependencies":{"@jaydenai/foo":"workspace:*"},"scripts":{"build":"tsc -p tsconfig.json"}}

5. 应用app1（引用bar）

index.ts

import{greet4Morning,greet4Afternoon,greet4Evening}from'@jaydenai/bar'greet4Morning();greet4Afternoon();greet4Evening()

tsconfig.json:

{"extends":"../../tsconfig.base.json","include":["src"],"references":[{"path":"../../packages/bar"}]}

package.json:

{"name":"@jaydenai/app1","dependencies":{"@jaydenai/bar":"workspace:*"},"scripts":{"build":"tsc -p tsconfig.json"}}

6. VSCode相关配置

launch.json（启动当前选中文件进行调试）：

{"version":"0.2.0","configurations":[{"name":"Debug App with Cordis Source","type":"node","request":"launch","runtimeExecutable":"npx","runtimeArgs":["tsx"],"args":["${file}"],"cwd":"${workspaceFolder}","console":"integratedTerminal","internalConsoleOptions":"neverOpen"}]}

settings.json(屏蔽构建的产物)

{"files.exclude":{"**/node_modules":true,"**/lib":true,"**/*.d.ts":true,"**/*.js":true,"**/*.map":true,"**/*.tsbuildinfo":true,"**/pnpm-lock.yaml":true}}

7. Debug apps/app1/src/index.ts

输出

Good morning Good afernoon Good evening