pnpm 安装后 node_modules 是什么结构?为什么 webpack 不识别 pnpm 安装的包?

本篇研究:使用 pnpm 安装依赖时,node_modules 下是什么结构


回顾

npm@3 之前:依赖树

在这里插入图片描述

缺点:

  • frequently packages were creating too deep dependency trees, which caused long directory paths issue on Windows
  • packages were copy pasted several times when they were required in different dependencies

npm@3 和 yarn:扁平化

在这里插入图片描述
缺点:

  • modules can access packages they don’t depend on
  • the algorithm of flattening a dependency tree is pretty complex

测试 pnpm 效果

yalc

为了方便看效果,我打算自己建几个 npm 包测试。

我并不想真的发布 npm 包,所以使用 yalc 模拟。折腾了一番,成功用yalc 发布、安装 lib 后,发现自己的行为很愚蠢。。。因为使用这个 lib 时,要用 yalc add xxx 来安装,安装的逻辑是 yalc 的逻辑,不是 pnpm 的。所以这种方法不能测试出 pnpm 安装包的效果!STUPID!!!

还是老实发布 lib 吧

publish library

注册

去 npm 官网注册账号

登录

在 cmd 中登录 npm login。登录失败,报403。

google 后修改 npm registry:npm config set registry http://registry.npmjs.org/。再次登录仍然失败,报426。

google 后说是 node 版本过老,但是我升到最新版也没用。折腾一番发现是 registry 不能用 http,要用 https。修改 npm config set registry https://registry.npmjs.org/。再次登录,成功。

发布 lib

新建文件夹 lib-c,初始化 npm init -y

新建 index.js:

const str_c = "c";
module.exports = { str_c };

发布时 lib 的名称是由 package.json 中的 name 字段规定的。加个前缀防止重名:

  "name": "lilytest-lib-c",	

发布 npm publish

按照这个方法创建三个包 a b c并发布,依赖关系为:a依赖b,b依赖c,c无依赖

test-project

新建文件夹 test-project,npm init -y

安装 a pnpm i lilytest-lib-a

在这里插入图片描述
node_modules/lilytest-lib-a 为例说明。它是一个链接,真实路径为 .pnpm/lilytest-lib-a@1.1.0/node_modules/lilytest-lib-a。使用 dir 可以看到:

在这里插入图片描述

安装 a 和 b:

在这里插入图片描述
和之前相比,只多了 node_modules/lilytest-lib-b,链接到 .pnpm/lilytest-lib-b@1.1.0/node_modules/lilytest-lib-b

总结

结合官网说明,总结一下 pnpm 的安装流程:

第一步:在 .pnpm 下安装真实依赖

在 .pnpm 下安装所有 package,无论直接、间接、间间接、间间间接、间间间…接的。放在.pnpm/<name>@<version>/node_modules/<name>中。这些是 node_modules 下唯一的“真实”文件

解释一下:为什么最后还要多套一层 node_modules?

  • allow packages to import themselves. foo should be able to require('foo/package.json') or import * as package from "foo/package.json".
  • avoid circular symlinks. Dependencies of packages are placed in the same folder in which the dependent packages are. For Node.js it doesn’t make a difference whether dependencies are inside the package’s node_modules or in any other node_modules in the parent directories.
第二步:在 .pnpm 下链接依赖

比如,将 .pnpm/a/node_modules 下的 b 链接到 .pnpm/b/node_modules/b:
将 .pnpm/b/node_modules 下的 c 链接到 .pnpm/c/node_modules/c:

在这里插入图片描述

第三步:在 node_modules 下链接直接依赖

将 node_modules 下的 a 和 b 链接到 .pnpm 下对应位置

在这里插入图片描述

参考阅读:

  • Symlinked node_modules structure

old-school webpack

本篇文章的起因就是 webpack 不认 pnpm 的路径,终于说回这个问题了。

webpack Problems with pnpm and the way loaders are resolved

We have issues in lots of applications because webpack can’t resolve packages in the node_modules created by pnpm. I think it is because webpack doesn’t resolve dependencies the way Node does. Node resolves requires from the real path of a module. That is why the symlink approach pnpm uses works with all Node apps. However, it seems to confuse webpack and some other tools like browserify and eslint.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2980582.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

贪心算法-活动安排问题和背包问题

实验6贪心算法-活动安排问题和背包问题 实验目的&#xff1a; 理解贪心算法的基本思想运用贪心算法解决实际问题 实验内容&#xff1a; 采用贪心方法编程实现以下问题的算法 1.如何安排下列活动使得使用的活动场所最少&#xff0c;并给出具体的安排方法。 活动 a b c …

【iOS】类与对象底层探索

文章目录 前言一、编译源码二、探索对象本质三、objc_setProperty 源码探索四、类 & 类结构分析isa指针是什么类的分析元类元类的说明 五、著名的isa走位 & 继承关系图六、objc_class & objc_objectobjc_class结构superClassbitsclass_rw_tclass_ro_tro与rw的区别c…

牛客社区帖子分页显示实现

下图是前端分页的组件&#xff1a; 下面是对应的静态html页面&#xff0c;每一个方块&#xff0c;都是一个a标签&#xff0c;可以点击&#xff0c;执行的链接是/community/index&#xff0c;GET请求&#xff0c;拼接的参数是current&#xff0c;也就是pageNum&#xff0c;只需…

Swing用法的简单展示

1.简单的登陆界面示例 import javax.swing.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;public class Main extends JFrame {private JTextField usernameField;private JPasswordField passwordField;public Main() {setTitle("登陆界…

符尧:LLama3开启Scale游戏的第二章

符尧 | 网站 | 博客 | 推特 / X 爱丁堡大学 | yao.fued.ac.uk 发布日期&#xff1a;2024年4月22日 原贴&#xff1a;https://yaofu.notion.site/Apr-2024-Llama-3-Opens-the-Second-Chapter-of-the-Game-of-Scale-efff1c0c185f4008af673b78faf83b61 翻译和评论由“强化学徒”…

【派兹互连·SailWind】美国瞄准“小华为”

有“小华为”之称的海能达遭遇了来自美国方面的压力。 近日&#xff0c;海能达紧急发公告称&#xff0c;公司收到美国法院的判令&#xff0c;临时被禁止在全球范围内销售双向无线电技术的产品&#xff0c;并处以每天100万美元的罚款&#xff0c;直至公司完全遵守禁诉令之时止。…

基于机器学习的无人机避障技术详解,无人机避障技术应用前景

随着无人机技术的快速发展&#xff0c;无人机避障技术成为了研究的热点。基于机器学习的无人机避障技术&#xff0c;主要利用机器学习算法处理传感器数据&#xff0c;实现无人机的自主避障。这种技术可以显著提高无人机的飞行安全性和智能化水平。 机器学习基础 机器学习是人工…

【网络安全】在网络中如何对报文和发送实体进行鉴别?

目录 1、报文鉴别 &#xff08;1&#xff09;使用数字签名进行鉴别 &#xff08;2&#xff09;密码散列函数 &#xff08;3&#xff09;报文鉴别码 2、实体鉴别 鉴别(authentication) 是网络安全中一个很重要的问题。 一是要鉴别发信者&#xff0c;即验证通信的对方的确是…

MT8788智能模块简介_MTK联发科安卓核心板方案厂商

MT8788安卓核心板是一款具备超高性能和低功耗的4G全网通安卓智能模块。该模块采用联发科AIOT芯片平台&#xff0c;供货周期长。 MT8788核心板搭载了12nm制程的四个Cortex-A73处理器核心和四个Cortex-A53处理器核心&#xff0c;最高主频可达2.0GHz。板载内存容量可选为4GB64GB(也…

工业相机和镜头参数和选型

工业相机和镜头参数和选型 文章目录 工业相机和镜头参数和选型前言一、相机参数解释和选型1.相机参数1.1快门-shutter1.2曝光-exposure1.3增益-gain1.4 感光芯片类型&#xff08;CCD/CMOS&#xff09;1.5 感光芯片&#xff08;靶面&#xff09;尺寸1.6 分辨率1.7 像元尺寸1.8 帧…

Linux复习提纲2

Linux复习提纲 Linux概述 shell&#xff1a;交互式命令解释程序&#xff1b;用户和内核间交互的桥梁Shell不仅是交互式命令解释程序&#xff0c;还是一种程序设计语言shell是一种命令解释程序&#xff0c;批处理shell是linux的外壳&#xff0c;默认是bash2.1 Linux基础概念 log…

怎样用PHP语言实现远程控制三路开关

怎样用PHP语言实现远程控制三路开关呢&#xff1f; 本文描述了使用PHP语言调用HTTP接口&#xff0c;实现控制三路开关&#xff0c;三路开关可控制三路照明、排风扇等电器。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称厂商1智能WiFi墙…

Mudem,打造私密安全、高效稳定的私人空间

Mudem 是 Codigger 平台中的一个关键组件&#xff0c;它提供基础通讯服务&#xff0c;确保不同类型的机器之间可以进行安全和高效的连接。它其设计理念在于将本地机器、公有云以及私有云上的设备无缝地整合为一个可远程在线访问的工作站&#xff08;Workstation&#xff09;。这…

CentOS-7安装grafana

一、通用设置&#xff08;分别在4台虚拟机设置&#xff09; 1、配置主机名 hostnamectl set-hostname --static 主机名2、修改hosts文件 vim /etc/hosts 输入&#xff1a; 192.168.15.129 master 192.168.15.133 node1 192.168.15.134 node2 192.168.15.136 node33、 保持服…

【MySQL】A01、性能优化-语句分析

1、数据库优化方向 A、SQL及索引优化 根据需求写出良好的SQL&#xff0c;并创建有效的索引&#xff0c;实现某一种需求可以多种写法&#xff0c;这时候我们就要选择一种效率最高的写法。这个时候就要了解sql优化 B、数据库表结构优化 根据数据库的范式&#xff0c;设计表结构&…

解决VSCode中“#include错误,请更新includePath“问题

目录 1、问题原因 2、解决办法 1、问题原因 在编写C程序时&#xff0c;想引用头文件但是出现如下提示&#xff1a; &#xff08;1&#xff09;首先检查要引用的头文件是否存在&#xff0c;位于哪里。 &#xff08;2&#xff09;如果头文件存在&#xff0c;在编译时提醒VSCo…

2024最新的,免费的 ChatGPT 网站AI(八个)

ChatGPT是美国人工智能研究实验室OpenAI在2022年11月推出的一款人工智能技术驱动的语言模型应用。它基于GPT-3.5架构&#xff08;后续还有GPT-4架构的升级版&#xff09;构建&#xff0c;拥有强大的自然语言处理能力和上下文理解能力&#xff0c;能够参与多轮对话&#xff0c;为…

界面组件DevExpress Blazor UI v23.2 - 支持.NET 8、全新的项目模版

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验&#xff0c;这个UI自建库提供了一套全面的原生Blazor UI组件&#xff08;包括Pivot Grid、调度程序、图表、数据编辑器和报表等&#xff09;。 DevExpress Blazor控件目前已经升级…

SpringBoot学习之Kafka下载安装和启动【Windows版本】(三十四)

一、配置Java环境变量 打开CMD输入java -version检查java环境变量是否配置正确,如果配置正确在CMD窗口输入java -version应该输出如下: ​ 怎么配置Java环境变量这里我就不赘叙了,网上教程很多,请读者自行搜索操作。 二、下载Kafka 1、Kafka官网地址:Apache Kafka,…

STM32H750时钟频率和功耗以及RTC功能测试

STM32H750时钟频率和功耗和RTC功能测试 &#x1f4cc;相关篇《STM32H750片外QSPI启动配置简要》 ✨在使用STM32CubeMX修改STM32H750时钟树参数时&#xff0c;如果使用软件自动求解&#xff0c;这是一个非常耗时的操作&#xff0c;有时候还不一定成功&#xff0c;还是推荐使用手…