通过阅读package.json升级React版本及其依赖项

95
我有一个已存在的项目,其中包含react@15和其所有依赖项。但现在我需要升级到react@16以及它的依赖项。现在问题是- 有很多依赖项,手动识别每个依赖项的版本非常耗时。
所以,我想知道是否有一种方法可以升级package.json中提到的React及其依赖项的版本而无需手动修改package.json文件。

6
你可以运行 yarn upgrade 命令来将你的所有包升级到最新版本。 - Shubham Khatri
yarn upgrade doesn't update a major version. It will upgrade from 15 to 15.6 something but not to 16.0 for that you should use yarn upgrade --latest - theshubhagrwl
14个回答

142

使用npm

在您的package.json中仍然尊重semver的最新版本:npm update <package-name>。因此,如果您的package.json中写着"react": "^15.0.0",并且您运行npm update react,那么您的package.json现在将显示"react": "^15.6.2"(react 15目前的最新版本)。

但是,如果你想要从react 15升级到react 16,那就不行了。 不考虑semver的最新版本:npm install --save react@latest

如果您想要特定的版本,则运行npm install --save react@<version>,例如npm install --save react@16.0.0

https://docs.npmjs.com/cli/install

使用yarn

在您的package.json中仍然尊重semver的最新版本:yarn upgrade react

不考虑semver的最新版本:yarn upgrade react@latest

https://yarnpkg.com/lang/en/docs/cli/upgrade/


4
谢谢,完美运行,npm install react@latest react-dom@latest next@latest。 - Hussain Arthuna

47

如果您想在现有的React项目中更新React和React-DOM版本,请运行以下命令,希望您能获得最新版本的React和React-DOM。

谢谢

npm install react@latest react-dom@latest

3
仅更新 react-domreact 其中之一可能会导致依赖冲突(例如,参见此例)。 - Janez Kuhar

20

我在这里发现了一篇不错的文章

我们所需要做的事情(对于全局 npm)是:

sudo npm install -g npm-check-updates

然后像下面这样运行它:

ncu -u
它将向您展示所有依赖项(升级后)的美观显示,如下所示:
Upgrading /home/ajay/Documents/react-beast/package.json
[====================] 7/7 100%

 @testing-library/user-event  ^11.4.2  →  ^13.0.16     
 react                        ^17.0.1  →   ^17.0.2     
 react-dom                    ^17.0.1  →   ^17.0.2     
 react-scripts                  4.0.1  →     4.0.3     
 web-vitals                    ^1.1.0  →    ^1.1.1  

尝试在上述操作后立即再次运行ncu -u,您将会看到如下消息:

Upgrading /home/ajay/Documents/react-beast/package.json
[====================] 7/7 100%

All dependencies match the latest package versions :)

之后进行npm install,你的项目依赖项就会更新为最新版本。

在我看来,如果我们需要保持项目(npm/React)的最新状态,而不是浪费时间手动更新版本,这是最好的解决方案(在大多数情况下)。


15

有些软件包是相互依赖的,需要使用彼此相同的版本...比如最近我遇到了一个问题,使用npm react@16.5.2和react-dom@16.5.2时,我想使用一个钩子但无法使用,于是我运行了:

npm update react@latest react-dom@latest

这没有起作用...进入一些react.js博客/文档并发现这些特定包是相互依存的,版本必须相同。要更新这些内容:

npm uninstall react
npm uninstall react-dom

npm install react@^16.8.0 react-dom@^16.8.0

一切运作正常。查找稳定版本。阅读文档。 https://reactjs.org/blog/2019/02/06/react-v16.8.0.html https://reactjs.org/warnings/invalid-hook-call-warning.html


npm update react@latest react-dom@latest 对我也没用,但 npm install react@latest react-dom@latest 就可以了。 - Luc

15

我强烈推荐使用yarn upgrade-interactive来更新React或其他Node项目。 它会列出您的软件包、当前版本、最新版本、与您拥有的版本相比的次要、主要或补丁更新的指示,以及相应项目的链接。

您可以使用yarn upgrade-interactive --latest运行它,如果需要,可以查看发行说明,通过箭头键逐个检查列表,选择要升级的软件包并用空格键进行选择,最后按Enter完成操作。

Npm-upgrade也可以,但不如yarn upgrade-interactive好用。


1
这个选项非常有趣,我之前不知道.. 谢谢! - diogo

13

可以使用 Yarn 或者 NPM 来编辑 package.json 文件。

例如:

yarn upgrade react@^16.0.0

然后查看警告或错误,运行 yarn upgrade [package] 升级特定的包。无需手动编辑文件,一切都可以通过 CLI 来完成。

如果要更新所有包到最新版本,可以直接运行 yarn upgrade。但对于大型项目来说可能不是一个好主意,因为 API 可能会改变导致程序出错。

另外,使用 NPM 可以运行 npm outdated 命令查看哪些包需要更新,然后运行 npm update 命令进行更新。

https://yarnpkg.com/lang/en/docs/cli/upgrade/

https://docs.npmjs.com/getting-started/updating-local-packages


6
如果你想要更新React,可以在终端中使用命令npx update react

错误:找不到生成器:“react” - Konstantin Vahrushev

6
如果你想更新 package.json 里的某个特定版本,你可以进行以下操作来升级该 package 的版本 ==> yarn add package-name@version-number。
或者,你也可以使用 npm install --save package-name@version-number 命令来完成操作。
如果你想将所有的 packages 更新到最新版本,你可以运行命令 ==> npm audit fix --force。

2

通过npm update命令,您可以将所有依赖项更新到它们的最新版本。


2
你可以使用以下命令: npm install -g create-react-app 如果你没有 root 用户权限,则需要使用以下命令: sudo npm install -g create-react-app

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接