从依赖地狱到依赖天堂PNPM

目录

前言

[使用 npm 全局安装(推荐)](#使用 npm 全局安装(推荐))

总结

什么是Monorepo

主流解决方案

依赖管理优化

[使用PNPM 改造大型项目](#使用PNPM 改造大型项目)

[1. 初始化 pnpm 工作区](#1. 初始化 pnpm 工作区)

[2.初始子项目 package.json](#2.初始子项目 package.json)

[3. 启动项目及安装依赖](#3. 启动项目及安装依赖)


前言

在现代前端开发中,高效的包管理和依赖治理对于项目的健康发展至关重要。随着项目规模的不断扩大,传统的 npm 和 yarn 在处理依赖关系时可能会遇到诸如依赖重复安装、磁盘空间浪费、依赖版本冲突等问题。而 pnpm(performant npm)作为新一代包管理工具,不仅显著提升了安装效率,还为项目依赖治理带来了全新的解决方案。

pnpm王牌登场 -- 网状+平铺结构

pnpm (performant npm) 是一个快速、节省磁盘空间的包管理工具。它于 2017 年发布,是 npm 的替代品,专注于解决传统包管理工具存在的问题。

就这么简单,说白了它跟npm与yarn没有区别,都是包管理工具。但它的独特之处在于:

包安装速度极快

磁盘空间利用非常高效

安装包速度快

使用 npm 全局安装(推荐)

如果你已经安装了 Node.js 和 npm,可以直接运行:

复制代码
npm install -g pnpm

安装完成后,检查版本:

复制代码
pnpm -v

总结

场景 命令
安装在根目录 pnpm add <package> -w
安装在子包 pnpm add <package> --filter <子包名>
关闭警告 在配置中设置 ignore-workspace-root-check=true

这样可以避免意外将依赖装错位置!

什么是Monorepo

Monorepo (单体代码仓库)是一种将多个相关项目集中管理在单一代码仓库中的架构模式,适用于大型前端项目、微前端架构或前后端共存的系统。其核心优势包括共享依赖、统一代码规范及提升开发效率。 ‌12

主流解决方案

  1. pnpm workspaces

    pnpm原生支持Monorepo结构,通过pnpm-workspace.yaml配置实现依赖管理和多框架支持(如Vue、React)。适用于现代前端项目,支持按需构建和缓存复用。 ‌14

  2. TurboRepo

    Vercel 开发的工具,基于文件哈希实现增量构建和远程缓存共享,可显著提升大型仓库的构建效率。支持依赖提升白名单设置和循环依赖检测。 ‌45

  3. Lerna 与 Nx

    Lerna适合早期Monorepo实践,配合npm/yarn使用;Nx提供更完整的项目生命周期管理(包括依赖管理、构建优化等),适合复杂的前后端一体化项目。 ‌13

依赖管理优化

  • 依赖冲突 ‌:通过:ml-search[node-linker=hoisted]配置解决版本冲突,设置:ml-search[public-hoist-pattern]允许部分依赖提升。 ‌5
  • 构建加速 ‌: TurboRepo 支持:ml-search[增量构建](基于文件哈希缓存)和:ml-search[远程缓存共享],减少全量构建时间。

使用PNPM 改造大型项目

1. 初始化 pnpm 工作区

首先,在项目根目录下创建 pnpm-workspace.yaml 文件:

packages:

  • 'src/*'

安装package.json已有的依赖文件 pnpm i

2.初始子项目 package.json

每个子项目应该有独立的 package.json,使用pnpm init

javascript 复制代码
{
  "name": "youyang",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "decimal.js": "^10.6.0"
  }
}

3. 启动项目及安装依赖

安装子项目依赖命令 pnpm add decimal.js --filter youyang

安装项目公共依赖命令 pnpm install --save decimal.js -w

启动项目命令pnpm run dev

相关推荐
这是个栗子10 天前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
gs8014020 天前
pnpm + webpack + vue 项目依赖缺失错误排查与解决
pnpm·1024程序员节
JinSoooo22 天前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm
奋飛22 天前
Monorepo系列:Pnpm Workspace 搭建 Monorepo
pnpm·monorepo·pnpm workspace·catalogs·pnpm filter
前端架构师-老李23 天前
npm、yarn、pnpm的对比和优略
前端·npm·node.js·pnpm·yarn
skywalk81631 个月前
pnpm(‌P‌erformance ‌N‌ode ‌P‌ackage ‌Manager‌)包管理工具在FreeBSD系统下的安装使用
人工智能·pnpm·freebsd·iflow
梵得儿SHI1 个月前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
oscar9992 个月前
Monorepo 全面解析:优势、挑战与适用场景
git·monorepo
williamdsy2 个月前
实战复盘:pnpm Monorepo 中的 Nuxt 依赖地狱——Unhead 升级引发的连锁血案
vue.js·pnpm