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

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

来咯来咯，新一期视频【monorepo项目创建与基础演示】更新啦！ 代码仓库 https://github.com/dmokel/startup-monorepo-fastify-phaser-colyseus-threejs

嗨，大家好，我是Mokel

我将在这期视频开始 【startup about monorepo

fastify，Phaser

colyseus and threejs】 系列分享

点赞投币收藏

为视频的更新注入强劲动力

我们走着

这期视频

我们来分享【monorepo项目创建与基础演示】

内容较少，简单易懂

我已经在之前创建了一个空仓库

我将在这个仓库中更新代码

你可以在github关注仓库的更新

我会将每期视频对应的代码提交到仓库中

我们在终端中用vscode打开该项目

其中已经有README.md

和 .gitignore 文件

然后我们可以用npm init --force 和 tsc --init

分别初始化package.json 和 tsconfig.json文件

但我会以手动的方式来创建这两个文件

所以这里把它删除

与此同时

我后续将使用pnpm安装管理依赖

以及设置monorepo的workspace

所以打开pnpm的官网

看一下如何安装pnpm

我们主要看一下脚本安装和npm安装两种方式

注意

如果你的团队对版本有特定需求

安装时记得带上版本号

我来手动创建一下package.json和tsconfig.json文件

然后我们给package.json填充了一点内容

tsconfig.json先留空只写一个大括号

我们接下来先来看一下monorepo和pnpm

monorepo是一种软件开发方法

其中一个存储库包含多个项目的代码和静态资源

它的整体结构如同我所展示的这样

注意package.json和tsconfig.json不要留空

可以写一个大括号进去

我习惯于将apps和packages分开

apps和packages中可以是任何东西

从单个app，比如我们这里的example-app

到可重用的组件包，比如ui包

到utils函数等等

而这些packages我们将它称为local package

即本地包

在需要的时候我们可以将local package发布到npm

我们将在【github发版和npm发包】视频中演示

如何通过github action构建产物并发包

一个monorepo项目通常包含多个app和多个pkg

app可以依赖pkg

pkg也可以依赖另一个pkg

例如ui包可以依赖utils包

但apps之间通常不应该相互依赖

关于monorepo的适用场景以及限制条件

欢迎大家在评论区讨论探究

我在视频中就不展开聊了

不过我想提一个点

就是monorepo可以让我们在跨团队的多个项目中

标准化一套代码pretty, eslint, 以及git hook 等配置

我将在下一期【nodejs/ts项目的基础工程化配置】视频中

演示如何创建和配置代码格式化工具以及git-hook等

现在，我们需要在项目根目录下

创建pnpm-workspace.yaml文件

并向其中添加内容

关于pnpm，你可以现在暂停视频

打开pnpm的官网，了解学习一下

当然我建议你后续再去探究学习pnpm

那么回到这个yaml文件，简单的说

这个文件的作用是告知pnpm

当前存储库是一个monorepo项目

并且该项目有两个workspace

分别位于apps下和packages下

也就是说这两个文件夹下的子文件夹是具体的独立的app和pkg

我们用最简单的例子来演示一下monorepo的实际应用

我们先在项目根目录下为项目安装基础依赖

通过视频中pnpm命令来安装

注意使用pnpm安装依赖

-w表示在monorepo项目根目录下安装依赖

-D表示安装为devDependencies

安装好依赖后

我们需要为typescript创建配置文件

先创建一个tsconfig.option.json文件

这个文件名不需要跟我的一样

你也可以使用如tsconfig.base.json等

在该文件中添加部分compilerOptions的配置项

具体如我所演示

这几项配置与typescript的project references

tsc的--build模式有关

具体你可以查阅Typescript文档

包括但不限于

然后我们来添加其他的配置项

这几项配置，当然还有其他配置

与生成js文件

d.ts文件，sourcemap文件有关

具体你可以查阅typescript文档

包括但不限于

我们继续来添加其他的配置项

这几项配置

与CommonJS和ESModule之间的互操作性有关

具体你可以查阅typescript文档

包括但不限于

我们也将会在后续的视频中演示

依赖于此类配置的package

因此这里就不展开了

我们接着来添加配置项

这几项配置的作用比较显而易见

具体可以查阅文档

好我们现在完成了tsconfig.option.json文件的

一些基础配置项的添加

完成tsconfig.option.json后

我们回过头来配置tsconfig.json文件

其内容如我所演示

我们只需要拓展一下

tsconfig.option.json文件即可

很好，我们完成了typescript的配置

接下来

我们编码一些实际代码来演示monorepo

首先填充utils package

分别更新package.json, tsconfig.json文件

并在src文件夹下创建index.ts文件

我们来填充

utils下的package.json

然后我们来填充一下tsconfig.json

ok，可以看到我们只需要拓展

根目录下的tsconfig.option.json文件

然后我们在src文件夹下创建一个index.ts文件

写入一个工具函数

这里我们创建一个简单的add函数

此时，我们还未完全完成

package.json和tsconfig.json文件的填充

不着急

我们一会需要的时候回过头来继续填充

相同的操作

我们对ex-app也填充基础内容

我们对来我们对ex-app

也来填充一下基础内容

现在

我们需要在ex-app中安装utils package

即ex-app依赖utils package

并引用utils包中的add函数

我们先直接通过pnpm尝试安装一下依赖

看看会发生什么事情

我们需要进入到ex-app目录下

cd进去

然后在ex-app的根目录下通过pnpm

来安装我们的utils依赖

我们可以看到

它正确安装了utils这个local package

我们来在这边写一个main函数

然后我们import一下add函数

从我们刚刚安装的这个utils依赖里面

但import时会报错

具体报错信息为

Cannot find module '@.../utils'

or its corresponding type declarations

并且，add函数也没有正确的类型信息

我们回到utils包

对其进行一点简单的更新

向package.json中添加字段main

并将其设置为index.ts文件

该字段表示utils包的入口文件是什么

回到apps/ex-app中

我们发现错误提示已经消失了

并且add函数有了正确的类型提示

注意这里是在apps/ex-app的目录下

我们先要来log一下

在终端中使用ts-node执行ex-app的index.ts文件

得到了正确的结果

如果你的全局环境未安装ts-node

那么在ex-app的package.json中增加这段脚本

并在终端中用pnpm执行它

也可以得到正确结果

我想

此时应该会有朋友存在一些疑惑

比如，我们似乎并没有用上tsconfig.json文件

文件中的关于project references的配置项也没有起到什么作用

我现在把tsconfig.json文件删除后

再用pnpm执行脚本

也是可以得到正确结果

另一方面

我们也还没用上常见的tsc --build命令

来构建js (口误) 产物、d.t文件和sourcemap文件

不过问题不大

我们先暂时留着这些疑惑点

它们将在后续视频中逐一演示

至此

我们已经完成了【monorepo项目创建与基础演示】

我已将代码推到了刚刚的github仓库

下期视频

我们将分享【nodejs/ts项目的基础工程化配置】

我们下期视频，不见不散！