pnpm的两个问题

[xiaoyuebao]

请问pnpm的两个坑怎么解决：

第一个问题：没有节省磁盘空间

我已经配置了依赖的存储位置，

但我在项目里pnpm install以后，发现依赖包还是很大，然后发现里面的链接并不是指向先前配置的依赖存储位置，而是指向项目目录里的node_modules\.pnpm里，一点也没有节省磁盘空间，

第二个问题：找不到依赖

运行pnpm dev的时候报需要安装
To install them, you can run: npm install --save swiper/dist/css/swiper.css,

因为我用的vue-awesome-swiper3.1.3,需要手动在代码里import 'swiper/dist/css/swiper.css，

然后发现并不是缺少swiper，而是指向问题，因为swiper/dist/css/swiper.css实际跑到了node_modules\.pnpm里，导致找不到依赖，babel-core也是同样的问题，

==请问这两个问题怎么解决==

[RexSkz]

1. The files in node_modules/.pnpm are actually hard-links, they look like normal files but share the same space with the files in pnpm-store. Please refer to hard-link.
2. You can only use the packages inside your package.json; that's what I think pnpm does best to prevent ghost dependencies. If you want to import files from the swiper package, you should explicitly add them to your package.json.

P.S. If I don't remember wrongly, from a specific version of pnpm, hard-link is replaced by copy-on-write, which also helps to reduce disk space and can speed up copying.

[xiaoyuebao]

我使用pnpm的原因是，当我迁移项目到移动硬盘，但又不想同时迁移那么多占用空间的node_modules，但是当我把项目复制到我的硬盘的时候，发现移动硬盘里项目文件夹依然是180MB，并没有节省移动硬盘的空间，我先前的想法是使用本地部署的gogs，但gogs有一点麻烦，所以才想用pnpm，然而发现pnpm并不能解决我的问题，我的想法是pnpm使用软链接，使用相对路径链接到共享存储空间，这样我的项目文件夹体积就会很小，依赖又可以共享，不管我如何迁移项目，我都可以直接执行run dev，而不需要执行install
The reason I use pnpm is that when migrating projects to an external hard drive, I don't want to move the space-consuming node_modules along. However, after copying the project to my hard drive, I found that the project folder on the external hard drive was still 180MB, not saving any significant space. My initial thought was to use a locally deployed Gogs, but Gogs proved somewhat cumbersome. That's why I turned to pnpm, only to realize it didn't address my issue as expected. My understanding was that pnpm utilizes symbolic links and relative paths to reference a shared storage space, thereby keeping my project folders tiny while sharing dependencies. This way, regardless of how I move my projects around, I can directly run npm run dev without needing to execute npm install.

[RexSkz]

In my understanding, you want to soft-link the project's node_modules to another device in order to keep the project's folder's size small. Despite whether pnpm supports following the soft-link, it should reduce the project's folder's size. There must be something missing...

[xiaoyuebao]

I'm not sure what configuration is missing either, as this is my first time using pnpm and I followed an online tutorial to set it up.

However, whether I do this on Windows 10 or WSL2, I find that the project folder doesn't shrink in size; in fact, it's even larger than when using npm. With npm, the node_modules directory is only 60MB, but with pnpm, it astonishingly amounts to 130MB. Even when I move the project folder to my external hard drive, it remains at 130MB, which is completely unexpected. My expectation was for it to look like the following image:

I'm unsure if my idea can be realized using pnpm.
我也不知道少了什么配置，我也是初次使用pnpm，根据网络上的教程做了一下配置，

但不论是我再win10上还是wsl2上，发现项目文件夹并没有减小，反而比npm安装的node_modules还要大，npm安装的只有60MB，而pnpm的安装的居然有130MB，把项目文件夹移动到我的移动硬盘上，依然是130MB，这完全不符合我的预期，我的预期是下图这样的，

不知道我的想法是否可以用pnpm实现

[RexSkz]

With npm, the node_modules directory is only 60MB, but with pnpm, it astonishingly amounts to 130MB.

It's okay because these files are just "shadows" of the files in store-dir; they do not hold extra disk space. You can remove the project's node_modules dir, see the remaining space of the hard disk, and you should find it doesn't change much after you execute pnpm i again.

As for the image, it's unreasonable for multiple projects to use the same node_modules dir, and I didn't hear someone link the node_modules to another directory. If you don't want node_modules slow down your migration, maybe Yarn's Plug'n'Play feature is helpful, pnpm also supports it. But note that not all packages support Plug'n'Play.

[xiaoyuebao]

我用pnpm的workspace实现了我的目的，但遇到了另一个问题，我已经A项目在A项目package.json里显式的安装了swiper，但运行项目报错：Module build failed: Error: No PostCSS Config found in: D:\workspace\node_modules.pnpm\[email protected]\node_modules\swiper\dist\css，找不到swiper.css，然后我Google搜索到的解决方法是在项目根目录增加.postcssrc.js文件，但我的A项目里本来就有个这个文件，然后我尝试把.postcssrc.js文件放到了workspace的根目录，然后我的项目成功运行了，但.postcssrc.js又导致了另一个问题，我的B项目运行不起来了，报错BrowserslistError: Unknown browser query dead，然后我把B项目的.browserslistrc删了就可以成功运行了，但删除文件这种办法不正规，这个问题应该怎么解决呢

"I achieved my goal using pnpm's workspace, but encountered another issue. I explicitly installed swiper in Project A's package.json. However, when running the project, I encountered an error: 'Module build failed: Error: No PostCSS Config found in: D:\workspace\node_modules.pnpm\[email protected]\node_modules\swiper\dist\css', indicating that swiper.css could not be located. Through a Google search, I found a solution suggesting to add a .postcssrc.js file in the root directory of the project. Project A already contained such a file. As an attempt, I moved the .postcssrc.js file to the root directory of the workspace, which then allowed Project A to run successfully. Unfortunately, this led to another problem where Project B could no longer start, throwing the error 'BrowserslistError: Unknown browser query dead'. Deleting Project B's .browserslistrc resolved the issue, enabling it to run successfully again. Nonetheless, removing files is not an ideal solution. How should I properly address this problem?"