1、workspaces 的作用

workspaces 是一个用来在本地的 root package 包下面关联多个包的 npm 功能（npm 在 7.x 开始支持）。

2、node 中使用 workspaces

node workspaces 网址

2.1 文件目录

- api
    - base.js
    - index.js
    - package.json
- components
    - dir
        - Button.vue
    - index.js
    - package.json
- node_modules
- packages
    - web-demo
        - vue项目目录
- package.json

2.2 文件内容

• 1、root package.json

"workspaces": [
    "packages/**", // 前端项目所在目录
    "components/**", // 公共组件
    "api/**", // 公共接口请求方法
]

• 2、api package.json

重要字段

{
    "name":"@yp/api", // 插件名称
    "version":"0.0.1", // 插件版本
    "main":"index.js", // 插件入口
    "dependencies:: {
        "axios": "^1.3.5", // 插件依赖项
    }
}

• 3、components package.json

{
  "name": "@yp/components",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "main": "./index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.2.0"
  }
}

2.3 重要命令

• 1、下载 workspaces 配置的依赖包，指定到具体的文件夹下

根目录下执行命令：

npm install axios -w api

• 2、在 packages 下载 自己写的公共组件

到指定目录下执行命令：

npm i @yp/components

3、pnpm 的 workspaces的使用

pnpm workspaces 的使用

3.1 文件目录结构

- api
    - base.js
    - index.js
    - package.json
- components
    - dir
        - Button.vue
    - index.js
    - package.json
- node_modules
- packages
    - web-demo
        - vue项目目录
- package.json
- pnpm-workspace.yaml

3.2 文件内容

• 1、pnpm-wrokspace.yaml

packages:
  # 所有的前端都项目存储的地方
  - 'packages/*'
  # 公共组件
  - 'components/**'
  # 公共方法
  - 'api/**'

• 2、api package.json

重要字段

{
    "name":"@yp/api", // 插件名称
    "version":"0.0.1", // 插件版本
    "main":"index.js", // 插件入口
    "dependencies:: {
        "axios": "^1.3.5", // 插件依赖项
    }
}
- 3、components package.json

```json
{
  "name": "@yp/components",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "main": "./index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.2.0"
  }
}

2.3 重要命令

• 1、在 packages 下载 自己写的公共组件

到指定目录下执行命令：

pnpm add @yp/components