配置 NPM 的淘宝镜像源加速 打开poweshell或cmd工具，输入以下命令： npm config set registry https://registry.npm.taobao.org npm...1 windows 下 Yarn 安装与使用 如果你还没有安装 Yarn，通过访问https://classic.yarnpkg.com/latest.msi，下载安装包。...Yarn 注册淘宝镜像源加速 打开poweshell或cmd工具，输入以下命令： yarn config set registry https://registry.npm.taobao.org -g...yarn config set disturl https://npm.taobao.org/dist -g yarn config set electron_mirror https://npm.taobao.org.../mirrors/electron/ -g yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g yarn
pnpm 支持 npm 和 Yarn 的配置文件，可以很容易地从这些工具慢慢过渡过来， 而无需在项目中使用其他的配置文件 由于 Yarn 和 pnpm 重用相同的依赖，因此它们可以更快地安装依赖项，从而加速构建过程...如果你喜欢 npm 并且没有太多的依赖，那么使用 npm 可能比较合适。 如果你需要更快的速度和更好的安全，那么使用 Yarn 可能更好。...磁盘空间利用效率高 pnpm 的 node_modules 布局使用 符号链接 来创建 依赖项的嵌套结构。 node_modules 中每个包的每个文件都是来自内容可寻址存储的 硬链接。...针对 npm2 的两个缺点，npm3 做了更新， 不再使用嵌套的结构，而是将依赖进行展平， 这样就能解决层级依赖深和包的利用率的问题，那么上面的依赖关系就会变成下面这个样子： 在文件里看就是下面的这个样子...来创建依赖项的 嵌套结构。
#包管理工具的功能 处理和编写元数据 批量安装或更新所有依赖项 添加、更新和删除依赖项 运行脚本 发布软件包 进行安全审查 #简史 第一个发布的软件包管理器是 npm ，早在 2010 年就已经存在了。...中存储依赖项、自定义脚本、公共和私有包注册等概念都是 npm 引入的 #Yarn (v1) Yarn 是 Facebook 宣布与谷歌和其他一些公司开发新的软件包管理器，主要解决 npm 当时存在的一致性...这是通过 node_modules 层实现的，使用符号链接创建一个嵌套的依赖关系结构，其中文件夹中的每个包都是到存储的硬链接。 这是为什么 pnpm 会在快速和磁盘效率上有大幅提升的原因。...目录 #npm 在 npm v1 npm v2 版本中，依赖包的管理是树结构嵌套组成的 node_modules └─ foo ├─ index.js ├─ package.json...从 0.x 的版本开始，因为之前用 npm 不是安装依赖太慢，就是安装中途出错，或者设置淘宝镜像去使用。所以我干脆就换成 Yarn 了。
下载这些依赖项时，NPM还会生成一个锁文件（package-lock.json），该文件指定了为项目下载的所有依赖项（直接和间接）的确切版本。...这些范围使用语义化版本控制（semver）约定，如^（兼容的小版本）、~（兼容的补丁版本）或确切的版本号（1.2.3）。NPM使用嵌套依赖树，确保每个包获得其依赖的确切版本。...易于使用 — NPM设置和使用简单，对所有技能级别的开发者都易于接入。 劣势： 磁盘空间 — 由于NPM使用嵌套依赖树方法保存包，如果不同的依赖需要它们，它需要更多的磁盘空间来保存同一包的多个副本。...更少的磁盘使用：Yarn采用平级依赖结构，避免了包的重复和嵌套，从而最小化了磁盘使用。 Monorepo支持：Yarn还旨在通过称为WORKSPACE的特性支持monorepo。...PNPM的优点 磁盘效率：PNPM使用全局存储方法，所有包在一个地方全局存储，不像NPM或Yarn那样。
其中通常会涉及到 yarn，npm 或其它用于构建和打包 javascript 代码的工具。...npm 出现之前：前端依赖项是保存到存储库中并手动下载的? 2010：npm 发布并支持 nodejs? 2012：npm 的使用量急剧增加——主要是由于 Browserifys 浏览器的支持?...2012-2016：大量（重复的）依赖项存储在神奇的 node_modules 内的嵌套文件夹中 ☢️ 2012-2016：rm -rf node_modules 成为前端开发人员最常用的命令。?...♀️ npm 检查要安装的依赖项中的安全漏洞 yarn 和 npm 的构建时间不再有显差异 2019：tink 开始进入 beta 模式 ?...避免使用 node_modules，而是为项目中的每个依赖项创建一个带有哈希值的文件 尚未做好投入生产环境的准备 … 哎… ? 如我们所见，yarn 发布后，npm 受到启发（并被迫？）
--save命令把项目里所有的依赖项保存在这个文件里。...大多数npm库都严重依赖于其他npm库，这会导致嵌套依赖关系，并增加无法匹配相应版本的几率。...为了解决这个问题，npm提供了shrinkwrap命令。此命令将生成一个npm-shrinkwrap.json文件，为所有库和所有嵌套依赖的库记录确切的版本。...npm 2会安装每一个包所依赖的所有依赖项。...我估计，速度提升是yarn受欢迎的主要原因。 像npm一样，yarn使用本地缓存。与npm不同的是，yarn无需互联网连接就能安装本地缓存的依赖项，它提供了离线模式。
嵌套的 node_modules 结构 npm 在早期采用的是嵌套的 node_modules 结构，直接依赖会平铺在 node_modules 下，子依赖嵌套在直接依赖的 node_modules 中...扁平的 node_modules 结构 为了将嵌套的依赖尽量打平，避免过深的依赖树和包冗余，npm v3 将子依赖「提升」(hoist)，采用扁平的 node_modules 结构，子依赖会尽量平铺安装在主依赖项所在的目录中...幽灵依赖是由依赖的声明丢失造成的，如果某天某个版本的 A 依赖不再依赖 B 或者 B 的版本发生了变化，那么就会造成依赖缺失或兼容性问题。...与 npm 一样的弊端 yarn 依然和 npm 一样是扁平化的 node_modules 结构，没有解决幽灵依赖和依赖分身问题。...它是对 yarn 的一次重大升级，其中一项重要更新就是 Plug’n’Play（Plug'n'Play = Plug and Play = PnP，即插即用）。
npm 的安装配置 在正式学习 React 技术栈之前，我们先来介绍一下之后经常要使用到的 npm。...最常用的命令如下: 初始化新项目 yarn init 添加依赖包 yarn add [package] yarn add [package]@[version] yarn add [package]@...[tag] 将依赖项添加到不同依赖项类别，分别添加到 devDependencies、peerDependencies 和 optionalDependencies yarn add [package...] --dev yarn add [package] --peer yarn add [package] --optional 升级依赖包 yarn upgrade [package] yarn upgrade...[package]@[version] yarn upgrade [package]@[tag] 移除依赖包 yarn remove [package] 安装项目的全部依赖 yarn # 或者 yarn
但是如果将库或 CLI 发布到 npm，则永远不要发布 lock file。因为如果你使用它，则意味着你和你的用户可能在使用不同版本的依赖项。 什么是Lock File？...lock file 描述了整个依赖关系树，它在创建时被解析，包括具有特定版本的嵌套依赖关系。在 npm 名为 package-lock.json ，在 yarn 中名为 yarn.lock。...对于 semver 范围，npm 或 yarn 将h会选择最适合的版本。 这意味着，如果在发布新版本时多次运行 npm install ，有可能会得到相同版本的依赖项。...如果 npm 或 yarn 找到它们各自的 lock file，将使用它们代替模块安装。这对于持续集成（CI）等情况尤其有用。...因此，如果在源代码控制（如 git）中跟踪我们的 lock file，就可以确保每个开发人员以及服务器或构建系统还有 CI 系统都能够使用相同版本的依赖项。
包管理器历史 最早发布的包管理器是 npm，他在 2010 年 1 月就已经发布了。它确立了包管理器工作的核心原则。 npm 的发布诞生了一场革命，在此之前，项目依赖项都是手动下载和管理的。...npm 引入了文件和元数据字段，将依赖项列表存储在 package.json 文件中，并且将下载的文件保存到 node_modules 文件夹中。...当 yarn 出现以后，越来越多的人意识到 npm 的缺点，于是有人在 yarn 之后， 又发明了一个新的 npm 版本，它被定义为 pnpm。...pnpm 和 npm, yarn的管理策略不同，它通过引入内容可寻址存储来提升性能。通过生成嵌套的 node_modules 文件夹，每个版本的依赖项仅仅物理存储一次，节省了大量磁盘空间。...pnpm 起初看起来像 npm，因为它们的 CLI 用法相似，但管理依赖项却大不相同；pnpm 的方法带来更好的性能和最佳的磁盘空间效率。
每次只要新增了一个模块，yarn 就会创建（或更新）yarn.lock 这个文件。...这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本【npm 5 以后，这个和 yarn 统一了】 更好的语义化：yarn 改变了一些 npm 命令的名称，比如 yarn add/remove...6-0、重点：幽灵依赖、分身依赖、扁平化【flatten】、去重【dedupe】、lock 文件 6-1、初代的 npm 【npm v1-v2 阶段】 问题：依赖嵌套太深，不能共享 初代的 npm 会导致重复安装依赖...所有的依赖都被拍平到 node_modules 目录下，不再有很深层次的嵌套关系。...5.1.0 版本后： 当 package.json 中的依赖项有新版本时，npm install 会无视 package-lock.json 去下载新版本的依赖项并且更新 package-lock.json
+结构差异： image.png 包B 1.0被提升到了顶层，这里需要注意的是，多个版本的包只能有一个被提升上来，其余版本的包会嵌套安装到各自的依赖当中（类似npm2的结构）。...例如使用 npm或yarn 对项目安装依赖，依赖里面有个依赖叫做 foo，foo 这个依赖同时依赖了 bar，yarn 会对安装的 node_modules 做一个扁平化结构的处理，会把依赖在 node_modules...Virtual store 虚拟存储，指向存储的链接的目录，所有直接和间接依赖项都链接到此目录中，项目当中的.pnpm目录 如果是 npm 或 yarn，那么这个依赖在多个项目中使用，在每次安装的时候都会被重新下载一次...而在npm和yarn中，如何一个依赖被多个项目使用，会发生多次下载和安装！ 如果是 npm 或 yarn，那么这个依赖在多个项目中使用，在每次安装的时候都会被重新下载一次。...包与其依赖被完美地组织在一起。 有 peer 依赖的包的结构更加复杂[8]一些，但思路是一样的：使用软链与平铺目录来构建一个嵌套结构。
当时 npm 还没解决，社区就出来新的解决方案了，就是 yarn： yarn yarn 是怎么解决依赖重复很多次，嵌套路径过长的问题的呢？ 铺平。...npm 后来升级到 3 之后，也是采用这种铺平的方案了，和 yarn 很类似： 当然，yarn 还实现了 yarn.lock 来锁定依赖版本的功能，不过这个 npm 也实现了。...当然，这俩链接使用起来是差不多的。 如果不复制文件，只在全局仓库保存一份 npm 包的内容，其余的地方都 link 过去呢？ 这样不会有复制多次的磁盘空间浪费，而且也不会有路径过长的问题。...npm3+ 和 yarn 是通过铺平的扁平化的方式来管理 node_modules，解决了嵌套方式的部分问题，但是引入了幽灵依赖的问题，并且同名的包只会提升一个版本的，其余的版本依然会复制多次。...这样不但节省磁盘空间，也没有幽灵依赖问题，安装速度还快，从机制上来说完胜 npm 和 yarn。 pnpm 就是凭借这个对 npm 和 yarn 降维打击的。
嵌套结构 我们都知道，执行 npm install 后，依赖包被安装到了 node_modules ，下面我们来具体了解下，npm 将依赖包安装到 node_modules 的具体机制是什么。...，与子依赖的 package.json 中 dependencies的依赖项相同。...缓存 在执行 npm install 或 npm update命令下载依赖后，除了将依赖包安装在node_modules 目录下外，还会在本地的缓存目录缓存一份。...注意这一步只是确定逻辑上的依赖树，并非真正的安装，后面会根据这个依赖结构去下载或拿到缓存中的依赖包 在缓存中依次查找依赖树中的每个包 不存在缓存： 从 npm 远程仓库下载包 校验包的完整性...json 格式，yarn.lock 使用的是一种自定义格式 yarn.lock 中子依赖的版本号不是固定的，意味着单独又一个 yarn.lock 确定不了 node_modules 目录结构，还需要和
前言 看完本文，你将从整体了解依赖版本锁定原理，package-lock.json 或 yarn.lock 的重要性。...因为 package-lock 为每个模块及其每个依赖项指定了版本，位置和完整性哈希，所以它每次创建的安装都是相同的。无论你使用什么设备，或者将来安装它都无关紧要，每次都应该给你相同的结果。...5.1.0 版本后： 当 package.json 中的依赖项有新版本时，npm install 会无视 package-lock.json 去下载新版本的依赖项并且更新 package-lock.json...每次只要新增了一个模块，yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。...可以发现与 npm install 不同的是： yarn.lock 中所有依赖描述都是扁平化的，即没有依赖描述的嵌套关系； 在 yarn.lock 中， 相同名称版本号不同的依赖包，如果 semver
添加依赖项：使用yarn添加依赖项时，可以选择性地将它们保存到“dependencies”、“devDependencies”或“peerDependencies”中。...例如，添加react和react-dom： yarn add react react-dom 删除依赖项：如果需要删除某个依赖项，可以运行以下命令： yarn remove 更新依赖项：可以使用以下命令更新所有依赖项的版本： yarn upgrade 如果只需要更新某个依赖项，可以使用以下命令： yarn upgrade 安装依赖项...：当从代码库中检出项目时，可以运行以下命令安装所有依赖项： yarn install 运行脚本：在package.json文件的“scripts”字段中定义的脚本可以使用以下命令来运行： yarn npm速度实在是感人，所以，使用cnpm，就是中国版的npm，那速度杠杠的，谁用谁知道： 1、打开终端或命令行工具。
我本人在实际运用场景中，也经常使用 yarn 在安装或删除依赖文件，使用 npm 运行项目中定义的如：启动命令，打包命令等，所以二者完全可以同时使用。 二.Yarn的安装和命令 1....(2) 添加依赖 yarn add [package] yarn add [package]@[version] yarn add [package]@[tag] 将依赖项添加到不同依赖项类别中 yarn...yarn 或 yarn install 3. npm和yarn的命令对照 通过以上图可得，虽然 yarn 并没有实现 Npm 所有的命令功能，但是目前已经可以满足绝大多数开发场景了。 4....pack 创建依赖项的压缩gzip yarn policies 规定整个项目中执行Yarn的版本 yarn publish 将依赖发布到npm注册表 yarn remove 删除依赖 yarn run...运行定义的程序脚本命令 yarn tag 在依赖上添加，删除或列出标签 yarn team 管理组织中的团队，并更改团队成员身份 yarn test 运行程序的test命令 yarn upgrade
5.使用依赖包：一旦依赖包安装完成，您可以在您的项目中使用它们。您可以在您的JavaScript代码中通过require()或import语句来引入依赖包，然后使用它们的功能。...二、yarn与npm的区别 Yarn和npm都是用于管理 JavaScript 代码包（也称为模块或库）的工具，但它们有一些区别。 性能：Yarn比npm更快。...Yarn在下载和安装依赖项时使用了并行和缓存机制，因此通常比npm更快。 稳定性：Yarn在创建锁定文件时更稳定。...Yarn使用yarn.lock文件来确保所有开发人员在安装依赖项时使用相同的版本。npm在此方面不太一致，可能会导致不同开发人员安装不同版本的依赖项。...Yarn使用较短的命令，如"yarn add"来安装依赖项，而npm使用较长的命令，如"npm install"。 社区支持：npm是一个更成熟和流行的工具，拥有庞大的社区支持和大量的代码包。
pnpm 默认创建了一个非平铺的 node_modules，因此代码无法访问任意包 npm 和 yarn 包管理机制 npm@3 之前 采用的是一种嵌套安装的方式。...，这会导致 Windows 上的目录路径过长问题 当一个 package 在不同的依赖项中需要时，它会被多次复制粘贴并生成多份文件 npm@3+ 以及 Yarn 将依赖偏平化： node_modules...通过软链接到.pnpm 目录中 .pnpm 虚拟存储目录——.pnpm，所有直接和间接依赖项都链接到此目录中。...参考[4] 只允许使用 pnpm。参考[5] 解决冲突。跟 npm 和 yarn 一样。只需要解决完 package.json 的冲突，然后重新 install 即可 more......可能会命中不同的机器，也有可能存在权限的问题 相比 npm、yarn。
2.2 使用实例 # 在项目中安装依赖项 npm install lodash # 全局安装包 npm install -g create-react-app # 查看已安装的包 npm list...4.2 使用实例 # 在项目中安装依赖项 yarn add lodash # 全局安装包 yarn global add create-react-app # 查看已安装的包 yarn list...yarn： 使用并行下载，速度相对较快。 5.2 磁盘空间占用 npm： 默认将依赖项复制到项目的node_modules目录，可能导致重复占用磁盘空间。...pnpm： 通过符号链接共享依赖项，减少了磁盘空间占用。 yarn： 在离线模式下，通过缓存机制减少了磁盘空间占用 5.3 并发安装 npm： 不支持并发安装，会一个一个地安装依赖项。...小结 npm是默认选择，稳定且易于使用。pnpm通过共享依赖项减少磁盘空间占用，适用于需要优化空间的项目。yarn通过并行下载和版本锁定提供了更快、更可靠的安装。至于用什么，看我们个人喜好。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
