使用pnpm搭建workspace

前言

上一节中我们使用vite lib打包了组件库,但发现对component调试时很不理想,而pnpm的workspace就是解决这种问题的

开始工作

  1. 在core,view之上的根目录,建立pnpm-workspace.yaml
    在这里插入图片描述

内容如下,yaml的格式非常严格,空格不能省,core可用core/**,但不能使用core/*

packages:
  - 'core'
  - 'view'

2.将core下的package.json复制到根目录,并修改dev,test,lib等命令行
在这里插入图片描述

3.更改core目录下package.json,修改name 将tmes改为@tmes/core, 加上main:‘./src/install.js’,不要加type:module,如果一开始没有的话
在这里插入图片描述

4.在根目录运行pnpm install, pnpm add @tmes/core -r --filter tmes,成功后view项目下会有如下包
在这里插入图片描述

5.view项目下引用@tmes/core,将原来的’@/…/lib/my-components-base.es.js’改为’@tmes/core’

import { Form } from '@tmes/core' 

6.路径别名的替换,如此使用时,发现无法使用vite的路径别名,需要手动替换
在这里插入图片描述

7.运行pnpm test,看看是否有报错
8.此后还要检查pnpm lib是否依旧可以打包,做到两者兼顾

结尾

目前大局已经搭建完毕,但我们发现还有很多hooks,api ,type,utils等是通用的,下一步工作吧

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
pnpm-workspace 是 pnpm 包管理器的一个功能,它允许你在一个项目中管理多个子包。了解了这一点后,我们可以根据引用内容来回答你的问题。 要启用 pnpmworkspace 功能,需要在工程根目录下创建一个名为 pnpm-workspace.yaml 的配置文件,并且在其中指定工作空间的目录。在你提供的示例中,这个文件内容如下:packages: - 'packages/*'。这表示你的项目的子包都放在名为 packages 的目录下。 在使用 pnpmworkspace 功能时,当你运行 pnpm publish 命令时,会自动将 package.json 中的 workspace 字段修正为对应的版本号。这样可以确保子包之间的依赖关系正确。 为了说明这一过程,让我们来看一下你提供的项目结构示例: /pnpm_workspace ├── package.json ├── packages │ ├── add-one │ │ ├── index.js │ │ ├── package.json │ │ └── test.test.js │ ├── add-two │ │ ├── index.js │ │ ├── package.json │ │ └── test.test.js │ └── adder │ ├── index.js │ └── package.json ├── pnpm-lock.yaml └── pnpm-workspace.yaml 现在,让我们通过一系列步骤来构建这样一个项目: 1. 首先,创建一个名为 pnpm_workspace 的文件夹,并进入该文件夹。 2. 在该文件夹中运行 pnpm init -y 命令,以初始化根目录的项目。 3. 创建一个名为 pnpm-workspace.yaml 的文件,并在其中添加 packages: - 'packages/*' 的内容,以指定工作空间的目录。 4. 在 packages 目录下创建三个子包(add-one、add-two 和 adder),并分别初始化它们的 package.json 文件。 5. 在 adder 子包中,通过运行 pnpm add add-one --workspace 和 pnpm add add-two --workspace 命令,将 add-one 和 add-two 子包添加为 adder 的依赖。 通过以上步骤,你已经成功构建了一个具有 pnpmworkspace 功能的项目。 请注意,以上过程只是一个示例,你可以根据实际需要进行相应的调整和修改。希望这个回答对你有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值