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

Question

我有一个现有的项目,根据它有react@15它的所有依赖项.但现在我必须升级到react@16它的依赖项.现在,问题是 - 存在很多依赖性,并且识别每个依赖项的版本非常耗时.

所以,我想知道是否有一种方法可以升级React的版本及其中提到的依赖项package.json,而无需手动修改package.json文件.

Answer 1

使用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).

但既然你想从反应15到反应16,那就不行了.最新版本,无论你的semver : npm install --save react@latest.

如果您想要特定版本,请运行npm install --save react@<version>eg npm install --save react@16.0.0.

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

用纱线

最新版本,同时仍然尊重你的package.json中的semver : yarn upgrade react.

最新版本,无论你的semver : yarn upgrade react@latest.

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

Answer 2

如果您想在现有的 react 步骤中更新 react 和 react-dom 版本，请运行此命令我希望您获得最新版本的 react 和 react-dom。

谢谢

npm install react@latest react-dom@latest

Answer 3

有些软件包是相互依赖的，并且要与彼此相同的版本一起使用...例如，最近 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

Answer 4

是的,您可以使用Yarn或NPM编辑package.json.

yarn upgrade [package | package@tag | package@version | @scope/]... [--ignore-engines] [--pattern]

就像是:

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

Answer 5

我在这里找到了一篇不错的文章。

我们需要做的（对于 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) 项目 - 最新和最好 - 而不是浪费时间手动更新版本。

Answer 6

如果你想更新react，请npx update react在终端上使用。

Answer 7

如果您想更新 package.json 中的任何特定版本，您可以通过执行以下操作来更新包的版本 ==>

纱线添加包名@版本号

或者

npm install --save 包名@版本号

如果你想将所有软件包更新到最新版本，你可以运行命令==>

npm 审计修复 --force

Answer 8

我强烈建议您使用互动的yarn升级来更新React或与此相关的任何Node项目。它列出了您的软件包，当前版本，最新版本，与您所拥有软件包相比的次要，主要或补丁更新的指示，以及指向相应项目的链接。

您可以使用来运行它yarn upgrade-interactive --latest，如果需要的话可以查看发行说明，使用箭头键在列表中浏览，通过使用空格键选择要升级的软件包，然后点击Enter完成。

Npm升级还可以，但是不那么光滑。