Monorepo + pnpm实现多项目管理,抽出公共模块,用最少的话,带你快速入门!

目录概览

    • 前言
    • 基础概念了解
    • 基本使用
      • 安装 pnpm
      • 创建根项目
      • 创建子项目
      • 配置 pnpm-workspace.yaml
      • 配置 tsconfig.json
      • 共享代码
      • 运行脚本
    • 结尾

前言

在开发中,我们如何进行多项目管理,多个项目之间有同样的依赖你又该怎么去管理?在目前很多开源库,都使用了Monorepo+pnpm的技术来实现管理依赖、版本、配置等,也可以提高代码的复用性和协作效率。比如说你想写一个组件库,组件库需要文档,你的文档项目中想引入你的组件库并展示,那么这时候就会用到Monorepo和pnpm了,这时候会在你的组件库文档项目中,链接你的组件库,就可以直接引用了。那么,接下来我们进入正题!

基础概念了解

  • Monorepo 是一种管理项目代码的方式,它指的是在一个大的仓库(repo)中管理多个模块或包(package)。这样可以方便地统一管理依赖、版本、配置等,也可以提高代码的复用性和协作效率。
  • pnpm 是一种包管理工具,它可以帮助你安装、更新、发布和管理你的项目中使用的各种包。pnpm 的特点是它使用了硬链接和软链接的技术,来避免重复下载和存储相同的包,从而节省了磁盘空间和安装时间。

基本使用

安装 pnpm

npm install -g pnpm

创建根项目

我们需要创建一个根项目,它是我们 monorepo 的入口。我们可以运行以下命令:

pnpm init

这会生成一个 package.json 文件,我们可以在里面添加一些基本的信息,比如项目名称、版本、描述等。我们也可以在这里添加一些全局的依赖和脚本,比如 TypeScript、ESLint、Prettier 等

创建子项目

接下来,我们需要创建一些子项目,它们是我们 monorepo 中的模块或包。我们可以在根目录下创建一些文件夹,比如 test1、test2等。然后,在每个文件夹中运行以下命令:

pnpm init

这会为每个子项目生成一个 package.json 文件,我们可以在里面添加一些特定的信息,比如项目名称、版本、描述、依赖、脚本等。如果有现成的项目直接复制进去

配置 pnpm-workspace.yaml

为了让 pnpm 知道我们的 monorepo 结构,我们需要在根目录下创建一个 pnpm-workspace.yaml 文件,并在里面列出我们的子项目。例如:

packages:
  - "test1"
  - "test2"
  - "share"

配置 tsconfig.json

如果我们使用 TypeScript 来开发我们的项目,我们还需要配置 tsconfig.json 文件来指定 TypeScript 的编译选项。我们可以在根目录下创建一个 tsconfig.base.json 文件,并在里面添加一些通用的选项,比如:

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "sourceMap": true,
  }
}

然后,在每个子项目中创建一个 tsconfig.json 文件,并让它继承自 tsconfig.base.json 文件,比如:

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
 },
  "include": ["src/**/*"]
}

这样,我们就可以保持 TypeScript 的配置一致性,并且避免重复。

共享代码

这里是最重要的一步,往往我们进行多项目管理都是为了共享公共的模块,比如类型定义、工具函数、组件等。这时候,我们可以使用 pnpm 的 软连接功能来实现。例如,假设我们有一个 share 子项目,它导出了一些类型定义和工具函数。那么,在其他需要使用它们的子项目中,我们可以运行以下命令:

pnpm add share

pnpm add 的就是子项目中的package.json中的name
这会在 package.json 中添加一个依赖项,并且创建一个软链接到 shared 子项目。然后,在代码中就可以直接导入 shared 子项目中的内容了,比如:

import { User, formatDate } from "share";

运行脚本

最后,我们可能需要运行一些脚本来执行一些任务,比如编译、测试、启动等。我们可以在每个子项目的 package.json 中定义一些脚本,比如:

{
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "start": "node dist/index.js"
  }
}

然后,我们可以使用 pnpm 的 recursive 命令来在所有或部分子项目中运行这些脚本,比如:

pnpm recursive run build # 在所有子项目中运行 build 脚本
pnpm recursive --filter client run start # 在 client 子项目中运行 start 脚本

这样,我们就可以方便地管理我们的 monorepo,并且享受 pnpm 的高效和优化。

结尾

多项目管理能大大提高我们代码的复用性和维护性,与其当个cv战士,何不尝试一下没用过的技术呢?

你可能感兴趣的:(vue.js,前端,javascript)