pnpm-workspace环境搭建

二，pnpm-workspace环境搭建

2.1，创建monorepo项目目录。

终端内：

// 创建目录
mkdir monorepo-pnpm-workspace-base
// 进入项目
cd monorepo-pnpm-workspace-base

2.2，初始化项目：

pnpm init

2.3，package.json 删除 main、test

去掉后

2.4，创建 pnpm-workspace.yaml 文件

这个文件定义了工作空间的根目录。

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

2.5，创建目录common、packages

mkdir common && mkdir packages

2.6，package.json文件内增加"private": true,以表示该项目是私有的。

2.7，进入packages创建多个项目

cd packages

pnpm create vite app-base --template vue-ts

pnpm create vite app1 --template vue-ts

pnpm create vite app2 --template vue-ts

2.8，根目录下package.json增加如下红框内容。

2.9，写packages下每个项目的package.json。主要是name字段，方便以后使用。

packages目录下app-base、app1、app2的package.json删除如下图红框内容

2.10，在整个项目根目录下（monorepo-pnpm-workspace-base）安装依赖。——>  所有工作空间安装依赖：在根目录下运行pnpm install命令，它会自动安装所有子项目的依赖。

pnpm i

如果在根目录下安装依赖的话，这个依赖可以在所有的packages中使用。如果需要为具体的一个package安装依赖，如何处理？

pnpm 提供了 --filter 参数。

• 给某个子项目单独安装指定依赖

pnpm add axios --filter app2

• 模块之间的相互依赖

pnpm install dayjs --filter app2

上面命令表明：在@commom/components中安装dayjs。其中--filter过滤包名，具体使用可以参考pnpm --filter。

在设置依赖版本的时候推荐用 workspace:* ，这样就可以保持依赖的版本是工作空间里最新版本，不需要每次手动更新依赖版本。

2.11，app-base、app1、app2分别在vite.config.ts中设置端口号

server: {
    port: 5173
}

2.12，根项目package.json配置

2.13，启动项目

pnpm run dev-base

启动成功，同理启动 app1、app2

三、pnpm公共组件库

3.1，创建common目录及文件如下

3.2，common/components/snow/index.vue

<template>
    <div>snow components index</div>
</template>
 
<script setup lang="ts">
</script>
 
<style scoped>
</style>

3.3，common/components/index.js

export * from "./snow"

3.4，common/components/package.json

{
  "name": "@common/components",
  "version": "1.0.0",
  "description": "pnpm-workspace-common-components",
  "private": true,
  "keywords": [],
  "author": "",
  "license": "MIT",
  "main": "index.ts"
}

3.5, 安装workspace依赖

下边命令式packages下所有项目都安装，也可以指定项目安装见2.10

pnpm i @common/components -w

package.json 增加内容如下

3.6，app-base/src/App.vue引入使用组件snow

3.7，启动项目 pnpm run dev-base，运行成功，组件内容已使用成功。

3.8，指定项目按照common下依赖

pnpm i @common/components --filter app-base

安装后package.json增加依赖，子项目node_modules增加依赖，同样运行成功。

四、app-base项目中引用common/components/组件或方法

首先，在common/components/index.js中export一个格式化日期函数，代码如下：

import dayjs from 'dayjs'

export function formatDate(value, format = 'YYYY-MM-DD') {
    return dayjs(value).format(format)
}

然后执行如下命令：

pnpm -F @packages/app-base install @common/components

     -F等价于–filter

这个命令表示在@packages/app-base安装@common/components。