2022 前端包管理方案-pnpm 和 corepack

简介: 2022 前端包管理方案-pnpm 和 corepack

长期以来,node 中自带的包管理工具只有 npm, 作为官方指定工具,使用者众多,从体验上来讲,却是一般。


npm 的不足


  • 串行安装,要等队列中当前 package 安装成功后才会继续下一个package 的安装
  • install 慢,无缓存,删除node_modules 后重新 install 无法利用缓存
  • node_modules 依赖冗余过多

npm 下载慢的问题一个重要原因是因为包镜像在国外,所以可以通过修改使用国内镜像源来解决这个问题


// 查看当前镜像源
npm config get registry
// 临时修改
npm install 软件名 --registry https://registry.npm.taobao.org
// 全局修改
npm config set registry https://registry.npm.taobao.org


如果需要频繁切换的话可以使用开源工具 nrm,更方便一些


npm install -g nrm
nrm ls // 列出可用的镜像源
    npm -----  https://registry.npmjs.org/
    cnpm ----  http://r.cnpmjs.org/
    taobao --  https://registry.npm.taobao.org/
    nj ------  https://registry.nodejitsu.com/
    rednpm -- http://registry.mirror.cqupt.edu.cn
    skimdb -- https://skimdb.npmjs.com/registr
// 切换镜像源
nrm use cnpm 
// 测试速度
nrm test taobao 
// 可以增加定制的源,特别适用于添加企业内部的私有源
nrm add <registry> <url>
// 删除源
nrm del <registry>


搭建企业内网私有源的一种方案:cnpmjs架设


试试其它的吧


cnpm


cnpm 这个是国内淘宝镜像,是为解决 npm 速度太慢的问题而产生的,控制台log 也清晰许多,但是它最大的问题是会忽视 package-lock.json 文件,也就是说 你无法锁定小版本,可能会导致依赖版本不一致引起的 bug,防止这个隐患则需要在 package.json 中就锁定版本,如下:

  • 符号^:表示主版本固定的情况下,可更新最新版。例如:vuex: "^3.1.3",3.1.3及其以上的3.x.x都是满足的。
  • 符号~:表示次版本固定的情况下,可更新最新版。如:vuex: "~3.1.3",3.1.3及其以上的3.1.x都是满足的。
  • 无符号:无符号表示固定版本号,例如:vuex: "3.1.3",此时一定是安装3.1.3版本。

yarn(npm的升级替代品)


yarn 是 Facebook, Google, Exponent 和Tilde 开发的一款新的JavaScript 包管理工具 ,是为了解决npm的缺点而产生的,Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载,同时利用并行下载以最大化资源利用率,因此安装速度更快。

特点:

  • 速度超快 Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
  • 超级安全 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
  • 超级可靠 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。
  • 离线模式 如果你以前安装过某个包,再次安装时可以在没有任何互联网连接的情况下进行。
  • 确定性 不管安装顺序如何,相同的依赖关系将在每台机器上以相同的方式安装。
  • 网络性能 Yarn 有效地对请求进行排队处理,避免发起的请求如瀑布般倾泻,以便最大限度地利用网络资源。
  • 相同的软件包 从 npm 安装软件包并保持相同的包管理流程。
  • 网络弹性 重试机制确保单个请求失败并不会导致整个安装失败。
  • 扁平模式 将依赖包的不同版本归结为单个版本,以避免创建多个副本。

常用指令:


// 全局安装
npm install -g yarn
// 初始化一个项目
yarn init
// 添加依赖包
yarn add [package]
// 升级依赖包
yarn upgrade [package]
// 移除依赖包
yarn remove [package]
// 安装全部依赖
yarn install (或者 yarn)


使用文档:yarn.bootcss.com


pnpm (新一代包管理工具)


当使用 npm 或 Yarn 时,如果你有100个项目使用了某个依赖(dependency),就会有100份该依赖的副本保存在硬盘上。  而在使用 pnpm 时,依赖会被存储在内容可寻址的存储中,所以,如果你用到了某依赖项的不同版本,那么只会将有差异的文件添加到仓库。 例如,如果某个包有100个文件,而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件,而不会因为仅仅一个文件的改变复制整新版本包的内容。 摘自:pnpm.io/zh/motivati…

pnpm 的项目初衷是节约磁盘空间并提升安装速度


1687777978520.png


所有文件都会存储在硬盘上的某一位置。 当软件包被被安装时,包里的文件会硬链接到这一位置,而不会占用额外的磁盘空间。这允许你跨项目地共享同一版本的依赖,因此,您在磁盘上节省了大量空间,这与项目和依赖项的数量成正比,并且安装速度要快得多。

pnpm 支持npm yarn corepack等多种安装使用方式,比如


npm install -g pnpm
pnpm add -g pnpm // 用来升级版本
| npm 命令 | pnpm 等效 |
| npm install | pnpm install |
| npm i <pkg> | pnpm add <pkg> |
| npm run <cmd> | pnpm <cmd> |


使用文档:pnpm.io/zh/pnpm-cli


Corepack「管理包管理器的管理器」


Corepack is a zero-runtime-dependency Node.js script that acts as a bridge between Node.js projects and the package managers they are intended to be used with during development. In practical terms, Corepack will let you use Yarn and pnpm without having to install them - just like what currently happens with npm, which is shipped by Node.js by default. 摘自:github.com/nodejs/core…


Corepack是一个实验性工具,在 Node.js v16.13 版本中引入,它可以指定项目使用的包管理器以及版本, 简单来说,Corepack 会成为 Node.js 官方的内置 CLI,用来管理『包管理工具(npm、yarn、pnpm、cnpm)』,用户无需手动安装,即『包管理器的管理器』。

主要作用:

  • 不再需要专门全局安装 yarn pnpm 等工具。
  • 可以强制团队项目中使用他特定的包管理器版本,而无需他们在每次需要进行更新时手动同步它,如果不符合配置将在控制台进行错误提示。

corepack 用法


由于corepack 是一个实验性工具,所以默认是没有启动的,需要显式启用,需要运行指令 corepack enable 进行启动;在项目package.json 文件中新增属性 "packageManager",比如


"packageManager": "yarn@1.22.15"


代表当前项目只允许使用yarn 包管理器并指定1.22.15版本


// 当前应用激活
corepack enable
// 定义包管理器
packageManager": "yarn@1.22.15"
// 声明的包管理器,会自动下载对应的 yarn,然后执行
yarn install
// 用非声明的包管理器,会自动拦截报错
pnpm install
Usage Error: This project is configured to use yarn


因为在试验阶段,目前还有些问题待解决:

  • 目前仅支持 pnpm 和 yarn,cnpm 也是不支持的
  • 兼容性还有些问题,npm 还无法拦截也就是说 即便配置了 packageManager 使用 yarn,但是依然可以调用全局 npm 安装

总结


The full npm package wouldn't be included out of the box anymore (this might be an incremental move, with first a major version shipping pmm + npm, and the next one discarding npm) npm 将慢慢从 Node.js 内置包中移除,预计在下一个大版本启动


虽然npm 是现在node的默认包管理器,但是由于它多年来的不思进取,及种种缺陷,corepack 的出现可以说是大快人心,其最大的意义是让 npm 不再成为唯一的官方指定工具,这将使各种包管理器在一个更公平的地位上进行竞争,相信对开发者来说也是一件很好的事情。

目录
相关文章
|
6月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:现代包管理器与模块化的深度解析
【2月更文挑战第21天】 在当今快速演变的前端开发领域,高效的项目管理和代码组织已成为成功交付复杂Web应用的关键。本文将深入探讨现代前端包管理器如npm, yarn和pnpm的工作原理,以及它们如何与模块化编程实践(例如CommonJS、ES6模块)协同工作以优化开发流程。我们将剖析这些工具的内部机制,了解它们如何解决依赖冲突,提高安装速度,并保证项目的健壮性。同时,本文还将介绍模块化编程的最佳实践,包括代码拆分、重用和版本控制,帮助开发者构建可维护且性能卓越的前端项目。
|
6月前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
149 1
|
前端开发 JavaScript
常见的8个前端防御性编程方案
常见的8个前端防御性编程方案
146 0
|
17天前
|
前端开发 数据可视化 搜索推荐
深入剖析极态云优雅的前端框架设计方案(上)
最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。
|
1月前
|
缓存 资源调度 前端开发
前端研发链路之包管理器
本文首发于微信公众号“前端徐徐”。作者徐徐将探讨前端研发链路中的包管理器,分析 Npm、Yarn 和 Pnpm 的特点与应用场景,帮助开发者选择最适合项目的包管理工具,提升开发效率和项目稳定性。文章涵盖包管理器的基本概念、解决的问题、组成部分及各工具的优缺点对比。
29 2
|
1月前
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
186 0
|
2月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
327 3
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
37 2
|
2月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
95 0
|
4月前
|
缓存 前端开发 JavaScript
前端常见的性能优化方案?
【7月更文挑战第14天】前端性能优化包括代码压缩、资源合并、图片优化、缓存策略和DOM操作改进。例如,压缩CSS、JS,懒加载图片,使用CDN,事件委托,启用HTTP/2,及利用性能工具进行评估和优化。目标是加快加载速度,提升用户体验和服务器效率。
75 2