monorepo pnpm 子模块复用

本文讲述了在pnpm项目中如何正确地复用子模块,遇到的问题在于不同方式创建的子模块(手动初始化与pnpmcreate)对版本管理的要求。版本为0开头的子模块会导致pnpm误识别为依赖而非本地模块,解决方法是确保子模块有正确的版本标识。
摘要由CSDN通过智能技术生成

pnpm 子模块复用及问题展示处理

此处需提前配置好 pnpm-wrokspace.yaml,如下是我的目录结构及pnpm-wrokscpace.yaml配置

packages:
  - 'main'
  - 'web/**'
  - 'common'
  - 'common2'

在这里插入图片描述
假如你的项目目录如此,子应用想引入公共模块,可以使用如下命令

//如果main项目想引入common模块
pnpm -F main add common

执行成功后你会发现main项目的package.json 下会有引入的模块
在这里插入图片描述
OK,没问题,引入成功

往往事情都没这么简单,就如我一样新增了commom2模块,但是此时我生成common2的方式和common的命令不一样,如下

// common 模块是通过我创建文件夹然后通过pnpm init的方式生成 package.json
mkdir common
pnpm init

// common2 模块是通过pnpm create vite 生成 我选了对应的模版
pnpm create vite 

好了,问题来了
最上方的例子我们通过命令 pnpm -F main add common 成功复用子模块,但是当我使用 pnpm -F main add common1 的时候发现了不对劲,怎么是从npm下载的插件而不是本地子模块复用
在这里插入图片描述
这里会发下两个依赖对应值的区别,workspace 表明成功使用子模块,而commom2则对应的是版本号,这里说明commom2的复用是下载的依赖而非本地模块复用,但是这里我明明使用的是同样的命令,怎么一个成功了一个没成功呢

这里我查阅了大量文档后,有的文档里讲了要添加本地模块需要加上前缀 @project,以便pnpm区分本地还是线上,所以我又进行了尝试

在这里插入图片描述
纳尼,怎么404,证明使用@project是走不通了,我就回想common2和common有什么区别,经过对比后发现,package.json中两个的版本不同,common的version为1.0.0 commom2的version为0.1.0 经过修改common2的version后成功添加,这里发现如需要子模块复用,子模块的版本不能为0开头的版本
在这里插入图片描述
在这里插入图片描述
修改后mian项目成功复用comm2模块
game over

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
首先,让我们解释一下这些术语的含义: - Monorepo:将多个相关项目放在同一个代码库中的做法。 - PNPM:一种 Node.js 包管理器,类似于 npm 和 yarn。 - React:一个流行的 JavaScript 库,用于构建用户界面。 现在,我们来看一下如何在 Monorepo 中使用 PNPM 和 React: 1. 创建一个 Monorepo 项目,将所有相关项目放在同一个代码库中。 2. 在根目录下创建一个 `package.json` 文件,并添加以下内容: ``` { "private": true, "workspaces": [ "packages/*" ] } ``` 这个配置告诉 PNPM,这是一个 Monorepo 项目,并且它应该将所有 `packages/*` 目录下的包视为一个工作空间。 3. 在 `packages/` 目录下创建一个新的 React 应用程序。你可以使用 `create-react-app` 工具来快速创建一个新项目: ``` npx create-react-app my-app ``` 4. 确保在 `packages/my-app` 目录下有一个 `package.json` 文件,并添加以下内容: ``` { "name": "my-app", "version": "0.1.0", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "react-scripts": "^4.0.3" } } ``` 这个配置告诉 PNPM,这个包依赖于 React 和 React DOM 库,并且需要从 `react-scripts` 包中获取开发依赖项。 5. 在 `packages/my-app` 目录下运行以下命令,安装依赖项: ``` pnpm install ``` 6. 在 `packages/my-app` 目录下运行以下命令,启动 React 应用程序: ``` npm start ``` 这就是在 Monorepo 中使用 PNPM 和 React 的基本步骤。你可以使用相同的方法添加其他包和应用程序,并使用 PNPM 管理它们的依赖项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值