2024/09/05 更新

使用 Git submodule 的方式引入组件库，可以更方便的更新代码，同时也更方便的修改组件库的代码

前言

在日常工作&进行项目开发时，为了提高效率我们常常会封装一些工具方法。这些工具是否真的好用，会通过时间来考验。

对于不好用的工具，在下一个项目中可能就不会看到他的身影了。可能因为这个工具并没有提高自己的效率，也可能它只是为了填项目中某一个坑而存在。反正由于某个原因，这些并没有这么好用，或者没有那么通用的工具，会随着时间被遗忘在某个项目的角落。而那些真正好用的工具，会跟着我们到一个个项目。并且随着在各个项目中被使用，它们会被打磨的更加好用、更加的通用。

你可能也会遇到过这种情况，在开发一个新项目的时候，会到之前的项目中将某些文件或者代码复制到新项目中，对于你来说，这些就是好用的工具。为了解决到旧项目中手动复制代码这种操作里面的各种问题，我们应该维护一个工具仓库，将这些好用的工具整理起来，在需要的时候可以更方便的使用。

为什么是 Monorepo

要将工具整理起来很容易，只需要建一个代码仓库，专门存放工具代码就可以了。但是只做到这一步的话，无异于只是找了个记事本工具将代码记录起来。我们需要进一步考虑——如何更方便的使用这些工具。

对于这个问题，我考虑的主要是两个方案：1.通过 NPM 方式使用、2. 通过 Monorepo 的方式使用

NPM

操作步骤 TODO

这种方式只需要将工具库打包后上传到 NPM，在目标项目中通过 pnpm install xxx 安装，就可以直接使用，如果只考虑个人项目，我认为这是一种更好的方式。

但是对于一些公司的项目来说，会面临以下问题：

1. 由于是你个人维护的工具库，项目的其他成员会难以了解代码细节，也无法参与到这部分代码的维护和管理。这会导致项目的不稳定性，你对工具库的改动可能会影响到项目的正常运行，而项目的管理者无法控制这一行为。

2. 项目需要到公司内网的流水线里面进行编译部署，无法访问 npm 公网仓库。

Monorepo

操作步骤 TODO

这种方式需要将工具库的代码也放在项目的仓库里面，可以一起上传到代码仓库里面，除了一开始的时候需要同步代码，后续使用的时候跟使用 NPM 库是一样的。可以直接通过 import { } from 'package-name' 使用。

由于代码都在项目仓库里面，也就不会出现上述 NPM 方式的问题了，我个人认为是更符合我的使用场景的。

怎么做

代码仓库

跟在项目里面写代码一样写就行了

导入代码

为了让导入代码的操作变得简单，我开发了一个工具 @l123wx/use 来帮我做这件事。需要运行如下代码：

npx @l123wx/use

工具就会将 @l123wx/shared 仓库的代码下载到项目的 packages/shared 路径下，并且会自动做这些事：在 package.json 里面添加对这个库的依赖项、将 packages/shared 添加到 pnpm-workspace.yaml、将工具库的无用内容过滤掉，例如：测试文件、github 相关配置文件、eslint 配置文件以及 package.json 开发依赖等。

等工具运行结束，只需要运行 pnpm install 安装依赖，然后就可以直接在项目中通过 import {} from "@l123wx/shared" 使用工具方法