pnpm

pnpm install

  1. // 安装 axios
  2. pnpm install axios
  3. // 安装 axios 并将 axios 添加至 devDependencies
  4. pnpm install axios -D
  5. // 安装 axios 并将 axios 添加至 dependencies
  6. pnpm install axios -S
  8. 别名 -- i

当然，也可以通过 —filter 来指定 package。

pnpm uninstall 

  1. pnpm uninstall axios --filter <packageName>
  3. uninstall -- 别名 rm un

pnpm link

将本地项目连接到另一个项目。注意，使用的是硬链接，而不是软链接。如

  1. pnpm link ../../axios

另外，对于我们经常用到npm run/start/test/publish，这些直接换成 pnpm 也是一样的，不再赘述。更多的使用姿势可参考官方文档: pnpm.js.org/en/

入门demo

开始撸😁

  1. mkdir monorepo-demo
  1. pnpm init
  3. 这里我对内容做了一点修改，package.json的内容如下：
  6. {
  7.   "name": "monorepo-demo",
  8.   "version": "1.0.0",
  9.   "description": "",
  10.   "main": "index.js",
  11.   "scripts": {
  12.     "test": "echo \"Error: no test specified\" && exit 1"
  13.   },
  14.   "type": "module",
  15.   "keywords": [],
  16.   "author": "ywanzhou",
  17.   "license": "MIT"
  18. }

这里我主要添加了一个type字段，这里我使用ESModule模块化规范。最好所有得package.json 都统一

  1. packages:
  2.   - 'packages/ **'

现在我们就可以在packages中创建多个项目了，目录结构如下：

  1. monorepo-demo
  2. ├── package.json
  3. ├── packages
  4. │   ├── components
  5. │   │   ├── index.js
  6. │   │   └── package.json
  7. │   ├── core
  8. │   │   ├── index.js
  9. │   │   └── package.json
  10. │   ├── utils
  11. │   │   ├── index.js
  12. │   │   └── package.json
  13. ├── pnpm-lock.yaml
  14. └── pnpm-workspace.yaml
  1. {
  2.   "name": "@monorepo/components",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "type": "module",
  12.   "license": "ISC",
  13.   "dependencies": {
  14.     "lodash": "^4.17.21",
  15.     "@packages/utils": "workspace:^1.0.0"
  16.   }
  17. }

剩余的两个名称分别为@monorepo/core和@monorepo/utils。

我们如果在根目录下安装依赖的话，这个依赖可以在所有的packages中使用，如果我们需要为具体的一个package安装依赖怎么办？
cd到package的所在目录嘛？漏，大漏特漏，我们可以通过下面这个命令：

  1. pnpm --filter <package_selector> <command>
  3. Ex: pnpm --filter @monorepo/components add lodash
  5. -F等价于--filter

现在我们在往@monorepo/utils中安装一个dayjs，命令如下

  1. pnpm --filter @monorepo/utils add dayjs

packageA中引用packageB
现在我们就来实现package间的相互引用，首先我们在@monorepo/utils/index.js中写入如下内容：

  1. import dayjs from 'dayjs'
  2. export function format(time, f = 'YYYY-MM-DD') {
  3.   return dayjs(time).format(f)
  4. }

然后我们执行如下命令：

  1. pnpm -F @packages/components add @packages/utils@*

这个命令表示在@monorepo/components安装@monorepo/utils，其中的@*表示默认同步最新版本，省去每次都要同步最新版本的问题。

安装完成后@monorepo/components/package.json内容如下：

  1. {
  2.   "name": "@packages/components",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "type": "module",
  12.   "license": "ISC",
  13.   "dependencies": {
  14.     "@packages/utils": "workspace: *",
  15.     "lodash": "^4.17.21"
  16.   }
  17. }

然后我们在@monorepo/components/index.js写入如下内容：

  1. import { format } from '@packages/utils'
  2. console.log(format(new Date()))

然后我们在项目根目录运行如下命令

  1. node packages/components

即可打印出当前的日期。