pnpm 使用和原理

原来项目的痛点:程序员的电脑中有多个项目,每一个项目都有 node_modules ,node_modules 文件占用了大量的存储空间。

前期知识:软连接、硬链接

硬链接

        电脑文件系统中的多个文件平等地共享同一个文件存储单元,删除一个文件名字后,还可以用其它名字继续访问该文件。

软连接

        以绝对路径或者相对路径的形式指向其它文件或者目录的引用.

硬链接和软连接的举例

  • 文件的拷贝:在硬盘中复制出来一份新的文件数据 

window: copy foo.js foo_copy.js  

macos : cp foo.js foo_copy.js

  •  文件的硬链接

window: mklink /H aaa_hard.js aaa.js

macos : ln foo.js foo_hard.js

  • 文件的软连接(快捷方式)

window: mklink aaa_soft.js aaa.js  

macos : ln -s foo.js foo_copy.js

 pnpm作用:

        当使用 npm 或 Yarn 时,如果有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存 100 份该相同依赖包的副本(相当于文件的拷贝)。

        使用 pnpm,100个项目的依赖包将被存放在一个统一的位置。

        1. 如果你对同一依赖包使用相同的版本,那么磁盘上只有这个依赖包的一份文件;

        2. 如果你对同一依赖包需要使用不同的版本,则仅有版本之间不同的文件会被存储起来;

         所有文件都保存在硬盘上的统一的位置: 当安装软件包时, 其包含的所有文件都会硬链接到此位置,而不会占用 额外的硬盘空间。

示意图:左侧是NPM/yarn方式,每一个项目都有独自的依赖包文件夹,右侧公用。

pnpm  创建非扁平的 node_modules 目录
什么是 扁平化?
        项目中有很多包的依赖,一个包也会依赖其他包。 将一个包和他的依赖包放在同级的node_modules目录下(扁平化)。
优点: 其他包依赖已有的包的依赖包时,不用下载了。
缺点:源码可以访问 本不属于当前项目所设定的依赖包(依赖包不是开发者主观意识下载的包,但是可以在项目中用,存在的风险是删除包的时候,依赖包可能被删除)
举例:使用 pnpm 下载 axios 
1. pnpm add axios
2. node_modules 下的目录结构

        require 引用 axios,会去 node_modules 中找,只能看到 axios 包,解决了node_modules中包含非主观想要的包的问题,axios 的依赖包不在 node_modules 下。 

 pnpm的安装和使用

安装:npm i pnpm -g

pnpm的官网:https://pnpm.io/zh/

pnpm store的存储位置
        pnpm 下载的包统一放置在一个目录下,通过终端命令获取目录: pnpm store path
### npmpnpm的区别及使用方法 npm pnpm 是两种流行的包管理工具,它们在功能实现方式上存在一些差异。以下是两者的主要区别以及各自的使用方法。 #### 1. 工作原理 npm 默认会将所有依赖项安装到项目的 `node_modules` 文件夹中,并且每个依赖项可能会再次嵌套其自己的 `node_modules` 文件夹[^1]。这种结构可能导致重复的依赖项占用大量磁盘空间。 相比之下,pnpm 使用了一种名为“内容地址存储”(Content-addressable storage)的技术,所有依赖项都被存储在一个全局目录中,而项目中的 `node_modules` 只包含符号链接指向这些依赖项[^2]。 #### 2. 磁盘空间占用 由于 npm 的安装方式是直接复制依赖项到每个项目的 `node_modules` 中,因此可能会导致重复依赖项的存在,从而增加磁盘空间的使用pnpm 通过共享全局依赖项的方式显著减少了磁盘空间的占用。对于大型项目或多个项目共享相同依赖项的情况,pnpm 的优势更加明显[^2]。 #### 3. 安装速度 pnpm 的安装速度通常比 npm 更快,尤其是在网络条件较差的情况下。这是因为 pnpm 从本地缓存中提取依赖项并避免了重复下载。此外,pnpm 的并行安装机制也提升了效率。 #### 4. 使用方法 以下是 npm pnpm 的基本使用方法: - **npm**: ```bash # 初始化项目 npm init -y # 安装依赖 npm install <package-name> # 全局安装 npm install -g <package-name> ``` - **pnpm**: ```bash # 初始化项目 pnpm init # 安装依赖 pnpm add <package-name> # 全局安装 pnpm add -g <package-name> ``` #### 5. 生态系统兼容性 npm 是 Node.js 官方支持的包管理工具,拥有最广泛的生态系统支持。几乎所有 npm 脚本插件都可以无缝工作。 pnpm 则完全兼容 npm 的生态系统,但某些特定场景下可能需要额外配置以确保兼容性。 #### 6. 错误处理与调试 npm 提供了丰富的调试工具,例如 `npm ls` 可以查看依赖树。pnpm 同样提供了类似的命令,如 `pnpm ls`,并且由于其更清晰的依赖树结构,调试时更容易发现问题所在[^2]。 --- ### 示例代码:创建一个简单的 React 应用程序 以下是一个示例,展示如何通过 `createApp` 方法结合 npm pnpm 创建 React 项目。 ```javascript function createApp(projectName, verbose, scriptsVersion, template, useNpm, usePnp, typescript) { if (!projectName) { throw new Error("Project name is required"); } console.log(`Creating app ${projectName} with the following options:`); console.log(`Verbose: ${verbose}, Scripts Version: ${scriptsVersion}, Template: ${template}`); console.log(`Use NPM: ${useNpm}, Use PnP: ${usePnp}, TypeScript: ${typescript}`); if (useNpm) { // 使用 npm 创建项目 console.log("Using npm to install dependencies..."); } else if (usePnp) { // 使用 pnpm 创建项目 console.log("Using pnpm to install dependencies..."); } } ``` 调用示例: ```javascript createApp("my-app", true, "react-scripts@latest", "ts", false, true, true); ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值