资讯详情

资讯详情

[TypeScript学习笔记-11]创建一个极简的monorepo项目

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.yamlpnpm-workspace.yaml是pnpm monorepo的核心配置文件用于声明哪些目录属于同一个工作区。它通过packages字段列出路径模式如packages/*、apps/*让 pnpm自动识别子项目并共享依赖。这样可以实现统一安装依赖、跨包联动开发、避免重复安装是管理大型多包仓库的关键机制。packages:-packages/*-apps/*2.2 package.jsonpackage.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.jsontsconfig.json是TypeScript项目的核心配置文件用于定义编译器行为和项目结构。它包含compilerOptions如 target、module、strict、include与exclude控制编译范围、以及references支持多项目依赖。通过它可以统一代码检查规则、指定输入输出目录、生成类型声明文件并支持 monorepo 的项目引用。tsconfig.json让团队在大型项目中保持一致的编译标准是 TypeScript 开发的基础配置文件。{extends:./tsconfig.base.json}3. 项目fooindex.tsexportfunctiongreet(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引用fooindex.tsimport{greet}fromjaydenai/fooexportfunctiongreet4Morning(){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引用barindex.tsimport{greet4Morning,greet4Afternoon,greet4Evening}fromjaydenai/bargreet4Morning();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
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →