0

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

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

当我在做一个旧项目时,我想再次尝试“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
    
  1. 重启电脑
  2. 安装 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] 路径
  1. 打开 WebStorm ide 并转到 Settings->Language & Frameworks->node.js and NPM->Select Package Manager,手动将其更改为 -> npm-path(因为我将“pnpm,pnpm.cmd”文件移动到了这个位置.)
  2. 测试;
  • 运行 PowerShell 和命令: pnpm add @ionic/cli -E --global "@ionic/cli" 安装在指定位置,没有任何问题。
  1. 然后,我使用 PowerShell 使用命令“pnpm add -E --global”将所有包安装在“devDependencies”中。它配置了它们,它没有看到任何问题。返回 WebStorm ide 并关闭 PowerShell。
  2. 打开项目并在终端写入此命令“pnpm install”
  • pnpm 好的,没问题。一切看起来都很好。
  1. 当我再次查看“项目”文件夹的大小时,我发现它已经增长太多了。
  • 旧大小 699 MB 新大小 1.11 GB
  • 只有 node_module 文件夹 996 MB。
  1. 后“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 个项目时会是什么样子。

4

1 回答 1

0

为 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 吗?

于 2020-11-02T18:33:19.583 回答