最终文件效果

1、准备环境

npm

pnpm

2、创建文件夹npm init vite // 名字可以为main（自定义）

• 创建主应用main

npm init vite // 名字可以为main

• monorepo下创建文件夹web

创建辅助应用 例：react-demo，具体步骤：1、 cd web ; 2、 npm init vite // 名字可以为react-demo

• cd..退出至monorepo文件夹下生成package.json文件

pnpm init

• monorepo目录下创建pnpm-workspace.yaml文件

packages: # all packages in direct subdirs of packages/

 - 'main'

 # all packages in subdirs of components/

 - 'web/**'

• 下载各项目依赖，此时公共的依赖会被抽离出来

pnpm i

• 运行任意项目（根目录或者项目的上一个文件夹下都可）

pnpm -F main dev   // 其中main为项目名

• 新建文件夹common

common 文件夹下生成package.json文件【pnpm init】

• 更改pnpm-workspace.yaml文件

packages: # all packages in direct subdirs of packages/

 - 'main'

 # all packages in subdirs of components/

 - 'web/**'

 - 'common'

• common安装公共组件，例：axios

pnpm i axios

• common文件夹下建立index.tsx文件

内容：// 举例，按实际情况来

import axios from 'axios'

export const test = axios('xxxx')

• 为各个项目增加公共方法

1、切换至main文件夹下

2、pnpm -F main add common  // 此时main项目的package.json中已有common相关依赖

• 使用common方法【其他项目同理，此处举例main项目】

main项目：

main.js或者其他需要该方法的文件下引用：

import {test} from 'common'