基于pnpm workspace，超清楚简单的monorepo项目创建与基础演示

基于pnpm workspace的monorepo项目创建与基础演示

一、项目初始化

1. 创建项目仓库

   在GitHub上创建一个新的空仓库，用于存放monorepo项目的代码。

2. 本地项目结构

   在本地使用VSCode打开项目文件夹，其中应包含README.md和.gitignore文件（可手动创建或删除自动生成的文件）。

3. 初始化package.json和tsconfig.json

   手动创建package.json和tsconfig.json文件。

   package.json中填充基础内容，如name、version、private等字段。

   tsconfig.json先留空，只写一个大括号{}。

二、了解monorepo和pnpm

1. monorepo概念

   Monorepo是一种软件开发方法，其中一个存储库包含多个项目的代码和静态资源。

   整体结构通常包含apps和packages文件夹，分别用于存放应用和可重用的组件包、utils函数等。

   Monorepo项目中的app可以依赖pkg，pkg也可以依赖另一个pkg，但apps之间通常不应该相互依赖。

2. pnpm安装

   访问pnpm官网，了解pnpm的安装方法（脚本安装或npm安装）。

   安装完成后，在项目中使用pnpm来管理依赖。

三、配置pnpm workspace

1. 创建pnpm-workspace.yaml

   在项目根目录下创建pnpm-workspace.yaml文件。

   添加内容，告知pnpm当前存储库是一个monorepo项目，并指定workspace的位置（apps和packages文件夹）。

四、TypeScript配置

1. 创建tsconfig.option.json

   在项目根目录下创建tsconfig.option.json文件。

   添加部分compilerOptions配置项，与TypeScript的project references和tsc的--build模式有关。

   添加其他配置项，与生成js文件、d.ts文件、sourcemap文件以及CommonJS和ESModule之间的互操作性有关。

2. 配置tsconfig.json

   在apps和packages下的各个子项目中，扩展根目录下的tsconfig.option.json文件。

五、编码演示

1. 创建utils package

   在packages文件夹下创建一个utils文件夹，用于存放工具函数。

   更新utils下的package.json和tsconfig.json文件。

   在src文件夹下创建index.ts文件，并编写一个简单的add函数。

2. 创建ex-app并依赖utils

   在apps文件夹下创建一个ex-app文件夹，用于存放应用代码。

   更新ex-app下的package.json和tsconfig.json文件。

   使用pnpm在ex-app中安装utils依赖。

   在ex-app的src文件夹下创建index.ts文件，并引用utils包中的add函数。

3. 运行ex-app

   在ex-app目录下，使用ts-node执行index.ts文件，验证是否能正确运行并输出结果。

   如果全局未安装ts-node，可在ex-app的package.json中添加运行脚本，并使用pnpm执行。

六、总结

• 完成了monorepo项目的创建和基础配置。
• 使用了pnpm来管理项目依赖。
• 配置了TypeScript以支持monorepo项目。
• 编写了简单的代码来演示monorepo项目中包之间的依赖关系。

七、后续内容预告

• 下期视频将分享【nodejs/ts项目的基础工程化配置】，包括代码格式化工具、git-hook等的创建和配置。

通过以上步骤，你已经成功创建了一个基于pnpm workspace的monorepo项目，并进行了基础演示。希望这些内容对你有所帮助！