node.js - pnpm安装及查看结果（windows10）

Question

我一步一步地写一切。我从头到尾阅读并应用了网站上的所有页面（从介绍到高级）。

出现也可能有用，我不是专业的软件开发人员。我正在努力成为一种爱好。

当我在做一个旧项目时，我想再次尝试“pnpm”，我曾尝试过但未能使用。

使用

• 操作系统：Windows 10 x64
• 编辑：网络风暴
• 节点：14.15.0

项目：我正在进行的项目是“Ionic-Angular”项目。当我将它与“npm”一起使用时，项目的总大小为“699 MB”。问题：安装“pnpm”并制作设置文件后，我打开项目并等待它使用“pnpm install”命令安装包。在没有任何麻烦之前就结束了。但是，该项目的总大小已经上升到“1.11 GB”。

一步一步来，至于我做了什么。

1. 安装nodejs LTS版14.15.0 win64
2. 运行 PowerShell（以管理员身份）。

• npm 配置编辑

• 更改所有路径 -> 前缀、缓存、tmp、userconfig、globalignorefile、globalconfig。

  .npmrc 文件更改列表；

  prefix=C:\Users\mhy\npm\.npm-global
  cache=C:\Users\mhy\npm\.npm-cache
  tmp=C:\Users\mhy\npm\.npm-temp
  userconfig=C:\Users\mhy\npm\.npmrc
  globalignorefile=C:\Users\mhy\npm\.npm-global\etc\npmignore
  globalconfig=C:\Users\mhy\npm\.npm-global\etc\npmrc
  store-dir=C:\Users\mhy\pnpm\.pnpm-store
  global-dir=C:\Users\mhy\pnpm\pnpm-global
  npm-path=C:\Program Files\nodejs
  

3. 重启电脑
4. 安装 pnpm PowerShell

• （调用 WebRequest 'https://raw.githubusercontent.com/pnpm/self-installer/master/install.js'）。内容 | 节点）
• pnpm 创建 %AppData%Romaning%\npm 文件夹。并剪切文件夹粘贴新路径的所有文件。(pnpm, pnpm.cmd, pnpx, pnpx.cmd 移动到 npm-path [nodejs 安装文件夹])
• 根据网站上的叙述，我在“.npmrc”文件中添加了以下路径。加载 .npmrc 文件（2 个相同的文件）并添加 [store-dir, global-dir, npm-path -> change for pnpm] 路径

5. 打开 WebStorm ide 并转到 Settings->Language & Frameworks->node.js and NPM->Select Package Manager，手动将其更改为 -> npm-path（因为我将“pnpm,pnpm.cmd”文件移动到了这个位置.)
6. 测试；

• 运行 PowerShell 和命令： pnpm add @ionic/cli -E --global "@ionic/cli" 安装在指定位置，没有任何问题。

7. 然后，我使用 PowerShell 使用命令“pnpm add -E --global”将所有包安装在“devDependencies”中。它配置了它们，它没有看到任何问题。返回 WebStorm ide 并关闭 PowerShell。
8. 打开项目并在终端写入此命令“pnpm install”

• pnpm 好的，没问题。一切看起来都很好。

9. 当我再次查看“项目”文件夹的大小时，我发现它已经增长太多了。

• 旧大小 699 MB 新大小 1.11 GB
• 只有 node_module 文件夹 996 MB。

10. 后“pnpm”项目文件夹的大小如下所示。

• 项目文件夹 = 1.11 GB

• node_module 文件夹 = 996 MB

• node_module -> .pnpm（我猜是虚拟存储文件夹）437 MB

• node_module -> 所有其他没有 .pnpm 文件夹的文件夹 642 MB

• node_module -> .ignored + .ignored_ast_types-flow，.ignored_eslint-scope .ignored_mime-types .ignoder_multicast-dns-service-types -> 244 MB

• 以及我之前提到的“pnpm-global”和“pnpm-store”文件夹（.npmrc 文件）；

• pnpm 全局 -> 269 MB

• pnpm 商店 -> 540 MB

  项目总大小 + pnpm 全局和存储 = 2 GB（Windows 资源管理器显示文件夹大小 2 GB）我使用 PowerShell 并获取文件夹大小，列出所有文件夹传输到 excel 列和总文件夹大小 = 767 MB

• 旧大小 = 699 MB 使用 npm

• 新大小 = 767 MB 使用 pnpm

  我使用 PowerShell 命令

  $fso = new-object -com Scripting.FileSystemObject gci -目录| select @{l='Size'; e={$fso.GetFolder($_.FullName).Size}},FullName 排序大小-降序`| ft @{l='大小 [MB]'; e={'{0:N2}' -f ($_.Size / 1MB)}},全名 | 输出文件 out.txt

实际上，我认为应该是这样的。它将主包加载到一个文件夹中（例如： C:\pnpm-global ），并在其他项目中使用它们时从那里将它们添加为 symlink-junction。但是网站上有一条关于“virtual-store-dir”的说明。注意：虚拟商店不能在多个项目之间共享。每个项目都应该有自己的虚拟商店。

我安装了“pnpm”，因为我的目标是减少项目大小（连接符号链接等）。

当我想在互联网上了解有关“pnpm”的一些信息时，我也找不到任何资源。只有网站，资源非常有限。

我不认为有很多用处，但我不知道当有这么多项目用于 1 个项目时会是什么样子。

标签： node.jspnpm.npmrc

Answer 1

为 Ionic/Angular 项目测试 npm 和 pnpm，结果

使用 npm

1. 创建新的 ionic+Angular 空白项目，总文件夹大小 = 341 MB 项目大小（不含 node_modules）= 573 KB

2. 步骤->

• npm 安装
• npm 审计 -> 1
• npm 审计修复
• 保存项目和项目文件夹新大小 = 408 MB
• 构建
• 服务
• 保存项目和项目文件夹新大小 = 481 MB

使用 pnpm

1. 创建新的 ionic+Angular 空白项目，并删除 node_module 文件夹。项目大小（不含 node_modules）= 573 KB

2. 步骤->

• pnpm 安装
• pnpm 审计 -> 1
• pnpm 没有审计修复 -> 手动安装 @angular-devkit/build-angular
• 保存项目和项目文件夹新大小 = 375 MB
• ng build -> 编译错误@ionic/angular
• 删除 node_module 文件夹
• pnpm install --dev -> 文件夹大小 316 MB
• pnpm 安装 -> 文件夹大小 375 MB
• ng build -> 错误离子
• 删除项目文件夹

第二次尝试; （工作但尺寸增加）！

• 更改默认包管理器 = pnpm
• pnpm 添加@ionic/cli --global
• 离子启动
• 空白项目
• 但安装包 npm，不使用 pnpm
• 文件夹大小 = 408 MB
• pnpm 安装
• 文件夹大小 = 783 MB
• pnpm 运行构建（运行脚本 ng 构建）
• pnpm run start（运行脚本 ng serve）
• 保存项目和项目文件夹新大小 = 856 MB

第三次尝试

• 不创建离子启动命令，
• 复制文件新文件夹（没有node_module），
• angular.json 添加“cli.packageManager pnpm”
• 复制 .npmrc 文件并添加“shamefully-hoist=true”行
• pnpm 我——可耻地提升
• 文件夹大小 = 375 MB
• 构建
• 服务
• 文件夹大小 448 MB

结果适合我

• 如果我使用“npm”，它将是 481 MB。

• 如果我使用“pnpm”，它将是 448 MB。

• 33 MB 的差异发生在两者之间

就像我说的，我不是专家，我只是做了自己的测试并想分享结果。

如果我用错了，有人可以像我一样一步一步地告诉我如何使用这个 pnpm 吗？