博客
Nuxt专区
Nuxt3结合PNPM的workspace方式共享依赖
返回列表

Nuxt3结合PNPM的workspace方式共享依赖

nuxt3pnpmworkspace共享依赖工作空间

随着Nuxt3项目的越建越多，逐渐出现了一些开发方面的麻烦事，比如：

  1. 每个项目单独安装依赖的话，node_modules包大致要500-800M左右，项目多的话占用空间成倍上升。
  2. Nuxt3加上Vue全家桶的产品更新都很快，每个项目版本不一致，项目多的时候也容易蒙圈。
  3. 自己做了一些Node包，不需要发布，也想随着Nuxt3的项目一起使用。

于是使用PNPM作为包管理器的前提下，使用PNPM自带的workspace，则完美的解决了这些问题。

第一种方式所有项目都跟随根项目共享一套Node_Modules

应用场景：比如我有4个项目，并且分了2个类别（客户网站，开源项目）

先看一下最终的目录结构

TestWeb                   // 总目录
├─ node_modules           // 总的包目录
├─ clients                // 这个分类的目录
│  ├─ apple               
│  │  ├─ page           
│  │  ├─ node_modules     
│  │  └─ package.json   
│  └─ huawei                // 当前项目跟目录 
│     ├─ public         
│     ├─ node_modules     // 当前项目的node包目录
│     └─ package.json   
├─ projects             
│  ├─ pj01              
│  │  ├─ plugins        
│  │  ├─ node_modules        
│  │  └─ package.json   
│  └─ pj02              
│     ├─ components     
│     ├─ node_modules     
│     └─ package.json   
├─ Readme.md            
├─ .npmrc
├─ package.json         
├─ pnpm-lock.yaml       
└─ pnpm-workspace.yaml

具体操作如下：

  1. 新建一个总的跟目录名为：webs
  2. 在webs目录下添加3个文件分别是：pnpm-workspace.yaml,.npmrc,package.json
  3. 配置这3个文件（下面有示例）
  4. 配置好之后，cd到你的某个项目内安装依赖，如下：
    bash
    # 这里根据你的需求安装依赖，最后记得要加-w
# 加-w 安装依赖到总的跟目录下的node_modules，而不是当前项目的node_modules
pnpm add nuxt sass -w
  5. 之后就可以尽情玩耍了。记得以后添加依赖都要加-w

pnpm-workspace.yaml的配置

yaml
# 每个子目录写一行，按下面类似格式去写。
packages:
  - 'clients/**'
  - 'projects/**'
# 如果你并不需要这么多分类，只想把你的三五七个项目放一起
# 就可以只写一个就行，名字你自己定，例如:
packages:
  - 'pkgs/**'

下面看一下总的package.json的配置和子项目的package.json配置的区别

这个是总的package.json配置

json
{
  "name": "webs",
  "version": "0.0.3",
  "description": "My Workspace",
  "author": "Michael",
  "scripts": { },
  "dependencies": {
    "element-plus": "^2.3.4"
  },
  "devDependencies": {
    "eslint": "^8.40.0",
    "nuxt": "^3.4.3"
  },
  "pnpm": {
    //允许项目中使用已被废弃的软件包版本（相当于屏蔽warn警告）
    "allowedDeprecatedVersions": {
      "stable": "*",
      "rollup-plugin-terser": "*",
      "sourcemap-codec": "*",
      "stringify-package": "*",
    },
    // 定义 PNPM 在解决软件包的对等依赖关系
    "peerDependencyRules": {
      // 忽略一些包的版本不同导致的警告
      "ignoreMissing": [
        "webpack",
        "vite",
        "vue"
      ]
    }
  }
}

这个是子项目的package.json配置，在子项目中不需要在写版本号了，统一跟随总的package就好了。

json
{
  "name": "apple",
  "version": "0.0.1",
  "description": "My Workspace",
  "author": "Michael",
  "scripts": { },
  "dependencies": {
    "element-plus": "*"
  },
  "devDependencies": {
    "eslint": "*",
    "nuxt": "*"
  }
}

.npmrc的配置

bash
shamefully-hoist=true
shell-emulator=true

下面是单介绍一下PNPM是一种现代化的包管理工具，它支持使用Workspaces（工作区）来管理项目的依赖关系。Workspaces是一种将多个相关项目组织在一起的概念，其中每个项目可以有自己的依赖关系，同时还可以共享一些公共的依赖。

PNPM Workspaces的特点和用途如下：

  1. 多项目管理：PNPM Workspaces允许您在一个父级项目中同时管理多个相关的子项目。这对于大型项目、单体应用程序和分布式代码库非常有用，因为您可以将相关的代码组织在一起，并轻松管理它们的依赖关系。
  2. 共享依赖：PNPM Workspaces通过将公共依赖安装在父级项目中来提供共享依赖的功能。这意味着如果多个子项目都依赖于同一个软件包，那么该软件包只会在父级项目中安装一次，从而减少了磁盘空间的占用，并且可以更快地安装和更新依赖。
  3. 优化安装和更新：PNPM使用了一种称为“硬链接”的机制，它能够在安装和更新依赖时显著减少所需的磁盘空间和时间。它会将共享的依赖项链接到各个子项目中，而不是复制它们。这种机制使得依赖项的安装和更新变得非常高效。
  4. 并行安装：PNPM能够以并行的方式安装依赖项，这意味着它可以更快地完成安装过程。通过最大程度地利用系统资源，它可以同时处理多个依赖项的安装，从而提高开发效率。
  5. 易于使用和迁移：PNPM提供了一个简单易用的命令行界面，可以方便地初始化、安装、更新和构建项目。对于使用其他包管理工具（如npm或Yarn）的项目，迁移到PNPM也相对容易，因为PNPM支持大部分与npm和Yarn兼容的命令和配置。

总的来说，PNPM Workspaces通过提供多项目管理、共享依赖、优化安装和更新、并行安装等特性，可以帮助开发者更好地组织和管理复杂的项目结构，并提高开发效率。

最后更新：2023-12-09