pnpm 的 workspace 实现 monorepo 工程

前言

前端多个包管理的的方式一般都是采用monorepo的方式去管理，之前都是使用的lerna的workspace去管理。这段时间包管理切换到了pnpm上，它也有worksapce,可以支持monorepo。

monorepo

有的小伙伴可能对monorepo不太了解，我们简单说下：

Monorepo的意思是在版本控制系统的单个代码库里包含了许多项目的代码。这些项目虽然有可能是相关的，但通常在逻辑上是独立的，并由不同的团队维护。

在前端使用角度来看，monorepo 就是把多个工程放到一个 git 仓库中进行管理，因此他们可以共享同一套构建流程、代码规范也可以做到统一，特别是如果存在模块间的相互引用的情况，查看代码、修改bug、调试等会更加方便。

pnpm+workspace

pnpm在这里我们就不过多介绍，有不了解的小伙伴，可以看下官网pnpm.

创建项目
  1. 建一个项目目录，创建好目录执行pnpm init,会在根目录生成一个packaeg.json文件。

01.png

2.创建 pnpm-workspace.yaml和.npmrc文件

  • pnpm-workspace.yaml

    • 定义了 工作空间 的根目录，并能够使您从工作空间中包含 / 排除目录 。 默认情况下，包含所有子目录。即使使用了自定义目录位置通配符，根目录下的package目录也总是被包含.

  • .npmrc

    • pnpm 从命令行、环境变量和 .npmrc 文件中获取其配置。

    • pnpm config 命令可用于更新和编辑 用户和全局 .npmrc 文件的内容。

      四个相关文件分别为：

      • 每个项目的配置文件（/path/to/my/project/.npmrc）
      • 每个工作区的配置文件（包含 pnpm-workspace.yaml 文件的目录）
      • 每位用户的配置文件（ ~/.npmrc ）
      • 全局配置文件（ /etc/npmrc ）

      所有 .npmrc 文件都遵循 INI-formatted 列表，包含 key = value 参数。

在这里，我们在.npmrc文件配置了，engine-strict=true 结合根目录的package.json中的 engines 字段，可以指定运行的 node 版和 pnpm 版

  1. 创建packages文件夹，进入目录创建我们子项目，
  • lowcode-platform 采用umi创建,感兴趣的可以自行去umi官网查看
  • ui-material 采用阿里的低代码物料脚手架创建，感兴趣的可以去看lowcode-engine

  1. 我们假设把ui-material项目作为基础库，让lowcode-platform去直接引用ui-material库，

    我们可以在根目录执行 pnpm add ui-material -r --filter lowcode-platform。

    执行完成之后，我们就可以在lowcode-platform项目下直接引用改模块，不需要安装。这里我们用到了三个命令，分别是add,-r,--filter。具体详细内容可以参考官网。

5.接下来，我们可以在根目录下执行下pnpm i安装下依赖，配置下启动脚本

"clean-install": "pnpm clean && rm -rf ./{packages}/*/node_modules node_modules && pnpm i",
"dev": "pnpm -F \"lowcode-platform\" dev",
"build": "pnpm -F \"lowcode-platform\" build",
"dev:ui": "pnpm -F \"ui-material\" lowcode:dev",
"build:ui": "pnpm -F \"ui-material\" lowcode:build",

到这里就可以了，你可以配置自己比较方便快捷的命令。

结束语

代码已上传的github，如有需要，可自行下载查看

如果你觉得该文章不错，不妨

1、点赞，让更多的人也能看到这篇内容

2、关注我，让我们成为长期关系

3、关注公众号「前端有话说」，里面已有多篇原创文章，和开发工具，欢迎各位的关注，第一时间阅读我的文章

posted @ 2022-08-12 11:14  快乐的开发者  阅读(1893)  评论(0)    收藏  举报