pnpm在monorepo架构下不能引用其他模块的问题

一、研究背景

monorepo架构项目目录结构:

- common
  - index.ts
  - ...
- main
  - index.ts
  - ...
- web
  - vue-demo
  - ...

pnpm在monorepo架构下使用以下命令

pnpm -F main add common
# or
pnpm --filter main add common

并不能在main/index.ts中使用common/index.ts模块下封装好的axios,一直从远程下载common模块。

二、解决方法

后来参考了这篇文章才知道,pnpm版本在 9.0 之后 pnpm,修改了

的默认值为 false。我们需要开启该属性,在安装依赖时优先在本地链接,而不是从 registry(远程) 中下载。

在根目录新建.npmrc并配置以下内容:

 link-workspace-packages=true

再执行以下命令即可

pnpm -F main add common
# or
pnpm --filter main add common

引用效果如下图所示

三、参考文献

一文吃透 pnpm 如何使用 workspace 构建 monorepo,与 npm、yarn 的用法对比(pnpm 9.x 内部安装依赖问题 link-workspace-packages) | kshao-blog - 前端知识记录 (ksh7.com)

首先,让我们解释一下这些术语的含义: - 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 管理它们的依赖项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值