专栏首页云前端[译] 如何更新 package.json 中的依赖项

[译] 如何更新 package.json 中的依赖项

原文:https://medium.com/better-programming/how-to-upgrade-dependencies-in-package-json-e5546804187f

Npm (Node Package Manager) 是一种应用于 JavaScript 编程语言的包管理器,也是 Node.js 的 JavaScript 运行时环境的默认包管理器。

在一个项目中,其包依赖项列表保存在 package.json 文件中。每个已安装的包都被分配了一个版本号,一般由 三部分组成:major.minor.patch

  • major 表示非兼容的重大 API 改变
  • minor 表示向后兼容的功能性改变
  • patch 表示向后兼容的 bug 修正

默认情况下,npm 会安装最新的版本,并在版本号前面附加一个 ^ 插入符号,如 “^15.2.0”。有这种插入符号的依赖项意味着至少要安装 15.2.0 的版本。

当存在一个更高的 major 版本时,它就可能被使用。比方说当时有了个 15.6.2,就会在安装时升级到该版本。

若你想更稳妥些,使用 ~ 波浪号 的 “~15.2.0” 以表示只使用 patch 位更高的版本。当然,纯 “15.2.0” 将保证只使用该精确的版本号。语义化版本命名法的更多细节见 https://semver.org/ 。

迄今为止,一切顺利。

问题来了

斗转星移,依赖愈增。当你想升级所有包以获取新特性或是修正缺陷时,你会如何做呢?

首先你得确定最新版本是多少。这里有个 GitHub 上的例子:

{
  "name": "npm_upgrading",
  "version": "1.0.0",
  "description": "A tutorial how to upgrade NPM packages",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JenniferFuBook/npm_upgrading.git"
  },
  "author": "Jennifer Fu",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/JenniferFuBook/npm_upgrading/issues"
  },
  "homepage": "https://github.com/JenniferFuBook/npm_upgrading#readme",
  "dependencies": {
    "lodash": "~4.17.12",
    "prettier": "1.18.0",
    "react": "^15.2.0"
  }
}

如果你在 VSCode 上安装过 “Version Lens” 的话,它将展示所有包的最新版本:

或者也可以使用 npm 命令行接口:npm outdated

  • Current 即当前被安装的版本
  • Wanted 是满足 package.json 中的 SemVer 范围的最大版本
  • Latest 是该包在仓库中标记为 latest 的版本
  • Location 是该包在所居于的依赖树中所在的位置

CLI 输出中的包颜色表示了过期等级。红色意味着匹配到了一个比 package.json 中定义的 SemVer 需求还要新的已安装版本;黄色表示仓库中有比 SemVer 需求更新的版本。

在上例中,lodash 并未过期,因此没有被列出。同时,Prettier 在 minor 位落后于最新版本了,而 React 是在 major 位。

如果依赖项被修改为这样:

红色标记将会凸显 LodashPrettier

解决之道

在找出过期包之后,我们修正 package.json 中相关的版本规格。而后可以运行 npm installnpm update 以升级。

  • npm install 会安装一个包及其依赖的任何包。如果该包中存在 package-lockshrinkwrap 文件(在并存时后者优先级更高),将会按其进行依赖项安装。
  • npm update 会更新依赖项列表中出现的所有包,同时也会安装缺失的包。

二者的区别是什么呢?

首先,如果已安装的包版本满足 package.json 中定义的 SemVer 规格,则 npm install 会以模糊版本策略忽略掉它,并不会重新安装;而 npm update 则仍会(译注:在符合 SemVer 规格的前提下)将其升级到对应的最新 latest 版本。

译注:比如成文时 lodash 库的最新版本是 4.17.15,假设已安装版本为 4.17.14,则运行 npm install 后不会有任何变化,而 npm update 会将其升级到 4.17.15

同时,对 devDependencies 的处理也是不同的:

  • npm install 会安装或升级 devDependencies ,除非添加了 --production 标记
  • npm update 会忽略 devDependencies ,除非添加了 --dev 标记

太概念化了是吧?来举个例子,我们把 Prettier 的版本从 “1.18.0” 改成 “~1.18.0”:

如果运行 npm install,Prettier 的版本就是足够“模糊”的,以致 package-lock.json 中会保留原来的 “1.18.0”:

运行 npm ls 也能看到:

然而运行 npm update 后,package-lock.json 中 Prettier 的版本则会升级到 “1.8.2”:

npm ls 的输出同样也更新了:

此外,Prettier 的波浪号式依赖也被改为插入号式了!

更优方案

如前所述,如果 SemVer 规格使用了波浪号式版本声明,即便是 npm update 也不会直接升级其 major 位版本号。在主版本变动频繁并带来破坏性改变的情形下,这种 update 策略是很有意义的,同时需要谨慎对待。

那么,如果就是想升级 major 版本该如何呢?

使用 VSCode 中的 Version Lens 插件时,我们可以据其提示手动更新依赖包的 major 版本。另外一个强大的工具是 npm-check-updates,会自动化地完成同样的工作;该 npm 工具可以被全局化安装:

npm install -g npm-check-updates

然后运行:ncu -u

现在,package.json 中的依赖项就被升级到最新了,包括 major 位的更新:

剩下的就简单了。运行 npm installnpm update 以完成升级。

谨慎使用 npm-check-updates -- 毕竟,能力越大责任越大。

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 温故而知新,重温 Node.js

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

    江米小枣
  • 实战 web 应用 Docker 镜像解耦交付

    随着几次浏览器大战的硝烟散尽和 Flash 的背影远去,当下的 web 应用开发经过十余年的发展,在工程化、测试、持续集成等方面都已经汇入了软件开发的快车道。

    江米小枣
  • [译] Node 模块中的 peer dependencies 是什么?

    原文:https://flaviocopes.com/npm-peer-dependencies/

    江米小枣
  • brew和npm小记

    在Ubuntu中,常用apt-get来管理安装应用,与之对应,在Mac的OSX系统常用的是Homebrew,简称brew,使用上有点像npm。

    IT晴天
  • 微信小程序支持npm包

    在8月30号的时候,微信开发者工具进行了一次升级,在升级日志中我们看到微信小程序开始支持npm包管理了。但是小程序的基础版本库是从2.2.1版本开始支持,很遗憾...

    无邪Z
  • vue.js安装心得

    npm是nodejs的包管理器,所以之前只想找npm,而不想下载nodejs,最后闹了笑话。

    陨石坠灭
  • Vue自定义弹窗组件(一)npm包管理

    npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 6000...

    RtyXmd
  • 前端基础-Node.js包管理器npm

    上面的代码,我们使用npm安装了moment来进行格式化时间的处理,这就是使用第三方模块;

    cwl_java
  • 恭喜GitHub!今日喜提npm:Node Package Manager

    如果您曾在JS前端或node.js开发中投入过时间和精力的话,那么您肯定已经与npm打过多次交道了。正是由于npm的努力才使得JS成为了世界上最大的开发者生态系...

    用户1272076
  • 全球最大包管理器npm被GitHub收购,将与GitHub整合,网友:别被微软搞垮

    npm全称Node Package Manager,用JavaScript写成,已有超过10年历史,现在拥有130万个软件包,每月下载量达750亿次。

    量子位

扫码关注云+社区

领取腾讯云代金券