pnpm workspace组件库搭建起手命令

序言

最近工作中涉及到组件库的搭建，所以去学习了一下pnpm workspace，并搭建了一个简单的demo，这里记录一下搭建的过程和一些常用命令，结尾附上源码地址供大家参考

搭建

在项目父工程下创建 pnpm-workspace.yaml文件，里面声明需要加入workspace的目录

        packages:
        # all packages in direct subdirs of packages/
        - 'packages/*'
        # all packages in subdirs of components/
        - 'components/**'
        # exclude packages that are inside test directories
        - '!**/test/**'

初始化你的子项目工程，并添加package.json文件，修改文件中的 name(项目名)和main(项目入口文件)两个字段，这关系到后面多个项目间互相引用依赖

安装依赖

• 一次性安装父工程和子工程的所有依赖：pnpm i
• 安装依赖到父工程：pnpm add <dependent name> -w / pnpm add <dependent name> -wD
• 安装依赖到指定的子工程：pnpm add <dependent name> -r --filter <project name>

运行子工程命令

• 运行某个子工程命令： pnpm run <scripts name> -F <project name>

子工程互相引用

子工程互相引用的前提是package.json中的name和main字段得配置好

• 在B工程中引用A工程：pnpm add nameA -r --filter nameB
"nameA ": "^"

如果子包 A 依赖子包 B，并且您想要在子包 B 中安装特定版本的依赖，您可以使用 pnpm 的 link 功能。这将允许您将 B 子包链接到 A 子包，并且在 A 子包中使用 B 子包的本地版本。
以下是具体步骤：

1. 在子包 B 的根目录中运行 pnpm link 命令，将 B 子包链接到全局：

   cd path/to/b-package
   pnpm link
   

2. 在子包 A 的根目录中运行 pnpm link b-package 命令，将 A 子包链接到 B 子包的本地版本：

   cd path/to/a-package
   pnpm link b-package
   

这样，当您在子包 A 中运行 pnpm install 时，pnpm 将会使用本地链接的 B 子包的版本。您无需手动指定版本号，而是使用本地的 B 子包。

请注意，这只会在开发过程中使用本地链接的 B 子包版本。在发布子包 A 时，依赖将会被记录为 B 子包的版本号，而不是本地链接版本。

项目根目录配置

"scripts": {
    "build": "pnpm -r --filter=./packages/* run build",
    "test": "vitest run", 
    "test:report": "vitest --ui --coverage",
    "prettier": "prettier --check ./",
    "prettier:fix": "prettier --write ./",
    "lint": "eslint . --ext .ts",
    "lint:fix": "npm run lint --fix",
    "docs:dev": "pnpm -r --filter=./docs run docs:dev", // 文档开发
    "docs:build": "pnpm -r --filter=./docs run docs:build", // 文档构建
    "docs:preview": "pnpm -r --filter=./docs run docs:preview" // 文档预览
  }

如何将monorepo中的某一个package发布到npm中

• 登录npm账号

  scope 有两种

  • 个人: 就是 你 npm 的 用户名。可以通过 npm whoami，查看。这样子你就可以 用 @你的用户名/你的包名 作为name 。这样也就不会报错 scope not found
  • 团体 :不同于个人账户。这个是可以自定义 名字的，所以我推荐用这个。你只需要新建 一个 Organizations 然后就可以用 @你的团体名/你的包名 来进行发包了
    现在我们已经解决了 scope 的 报错。现在我们 继续 npm publish

• 运行npm publish命令，但是需要指定要发布的包的路径

  npm publish ./packages/my-package --access=public
  

  这将会只发布 packages/my-package 目录下的内容。