前端包管理 pnpm 学习资料整理

「这是我参与 2022 首次更文挑战的第 15 天，活动详情查看：2022 首次更文挑战」。

pnpm，英文里面的意思叫做 performant npm ，意味“高性能的 npm”，官网地址可以参考 https://pnpm.io/。

pnpm 动态

一：上周 pnpm 发布 6.32，支持 onlyBuiltDependencies，只允许白名单的依赖执行 install scripts。

• onlyBuiltDependencies 如果存在此字段，则只有列出的包能够运行安装脚本。
• neverBuiltDependencies 安装期间不会执行所列包的 “preinstall”、“install” 和 “postinstall” 脚本。

{
  "pnpm": {
    "neverBuiltDependencies": ["level"],
    "onlyBuiltDependencies": ["fsevents"]
  }
}

pnpm 的优势

• 快速 —— pnpm 比替代方案快 2 倍
• 高效 —— node_modules 中的文件是从一个单一的可内容寻址的存储中软链接过来的
• 支持 monorepos —— pnpm 内置支持了单仓多包
• 严格 —— pnpm 默认创建了一个非平铺的 node_modules，因此代码无法访问任意包

pnpm 使用

全局安装

// 通过 npm 安装
npm install pnpm -g

// 使用 HomeBrew 安装
brew install pnpm

pnpm config

pnpm 从命令行、环境变量和 .npmrc 文件中获取其配置。

pnpm config 命令可用于更新和编辑 用户和全局 .npmrc 文件的内容。

四个相关文件分别为：

• 每个项目的配置文件（/path/to/my/project/.npmrc）
• 每个工作区的配置文件（包含 pnpm-workspace.yaml 文件的目录）
• 每位用户的配置文件（ ~/.npmrc ）
• 全局配置文件（ /etc/npmrc ）
• 所有 .npmrc 文件都遵循 INI-formatted 列表，包含 key = value 参数。

使用

pnpm install <package>  //
pnpm i <package>
pnpm add <package>    // -S  默认写入dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装

移除

pnpm remove <package>                            //移除包
pnpm remove <package> --global                   //移除全局包

更新

pnpm up                //更新所有依赖项
pnpm upgrade <package>        //更新包
pnpm upgrade <package> --global   //更新全局包

设置存储路径

pnpm config set store-dir /path/to/.pnpm-store

monorepo 支持

pnpm 对 monorepo 支持非常好, 初始化一个 monorepo项目

首先在 root 目录新建 pnpm-workspace.yaml，内容如下

packages:
  - 'packages/**'

所有的 packages 都放在 packages 目录下。

用 pnpm 安装全局共用的包，比如 react, react-dom。

pnpm install react react-dom -w //-w 表示把包安装在 root 下

单个包安装，如在 @test/ui 下安装 @test/utils，执行以下命令

pnpm i @test/utils -r --filter @test/ui

打开 packages/ui/package.json 发现 dependencies 中多了一行

{
  "name": "@test/ui",
  "version": "1.0.0",
  "description": "",
  "main": "./index.tsx",
  "scripts": {},
  "author": "Innei",
  "license": "MIT",
  "dependencies": {
    "@test/utils": "workspace:^1.0.0" // <--------
  }
}

Vue、Vite 这些开源项目也都使用了它，pnpm 是一个功能全面，性能优越的包管理器，快来体验 pnpm 吧。

管理 Node.js 版本

自 [v6.12.0] 开始， pnpm 发布了一个允许管理 Node.js 版本的新命令（ pnpm env ）。 因此，可以使用 pnpm 而不是像 nvm 或 Volta 这样的 Node.js 版本管理器。

此外，pnpm 是作为独立的可执行文件提供的，因此即使系统上没有预装 Node.js，您也可以运行它。

pnpm 学习资料

• pnpm 官方文档
• Why should we use pnpm? pnpm 作者 Zoltan Kochan
• 为什么现在我更推荐 pnpm 而不是 npm/yarn?
• Yarn 的 Plug'n'Play 特性
• npm install 原理分析