通过阅读 package.json 升级 React 版本及其依赖项
Posted
技术标签:
【中文标题】通过阅读 package.json 升级 React 版本及其依赖项【英文标题】：Upgrading React version and it's dependencies by reading package.json 【发布时间】：2018-09-24 11:48:42 【问题描述】：我有一个现有的项目，它有 react@15 和所有它的依赖项。但现在我必须升级到 react@16 以及它的依赖项。现在，问题是 - 有很多依赖项，识别每个依赖项的版本非常耗时。
所以，我想知道是否有一种方法可以升级 React 的版本以及 package.json 中提到的依赖项，而无需手动修改 package.json 文件。
【问题讨论】：
你可能只需要运行yarn upgrade，它将把你所有的包升级到最新版本
yarn upgrade 不会更新主要版本。它将从 15 升级到 15.6，但不会升级到 16.0，因为你应该使用 yarn upgrade --latest
【参考方案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>，例如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/
【讨论】：
谢谢你完美运行，npm install react@latest react-dom@latest next@latest【参考方案2】：如果你想在现有的 react 步骤中更新你的 react 和 react-dom 版本，那么运行这个命令我希望你得到最新版本的 react 和 react-dom。
谢谢
npm install react@latest react-dom@latest
【讨论】：
+1。仅更新两者之一 -ract-dom 和 ract - 可能会导致依赖冲突 (example)。【参考方案3】：
是的，您可以使用 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
【讨论】：
【参考方案4】：我强烈建议使用yarn upgrade-interactive 来更新 React 或任何 Node 项目。它列出了您的软件包、当前版本、最新版本、与您所拥有的相比的次要、主要或补丁更新的指示，以及指向相应项目的链接。
您可以使用yarn upgrade-interactive --latest 运行它，如果需要，请查看发行说明，使用箭头键进入列表，使用空格键选择要升级的软件包，然后点击Enter 完成。
Npm-upgrade 可以，但没那么流畅。
【讨论】：
这个选项超级有趣，不知道..谢谢！【参考方案5】：我找到了一个不错的article here。
我们需要做的（对于 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) 项目是最新和最好的，而不是浪费时间手动更新版本，那么这是最好和最干净的解决方案（嗯 - 在大多数情况下）。
【讨论】：
【参考方案6】：如果您想从 package.json 更新任何特定版本，您可以通过执行 ==>
来更新包的版本yarn add package-name@version-number
或
npm install --save package-name@version-number
如果您想将所有软件包更新到最新版本，您可以运行命令 ==>
npm 审计修复 --force
【讨论】：
【参考方案7】：一些包是相互依赖的，并且要与彼此相同的版本一起使用......例如最近遇到了 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
【讨论】：
【参考方案8】：如果你想更新反应，请在终端上使用npx update react。
【讨论】：
【参考方案9】：您可以通过以下方式将所有依赖项更新到最新版本
npm update
【讨论】：
【参考方案10】：你可以使用这个命令
npm install -g create-react-app
如果您没有 root 用户权限，则将其与
sudo npm install -g create-react-app
【讨论】：
【参考方案11】：使用此命令更新反应npm install --save react@16.12.0
不要忘记将 16.12.0 更改为最新版本或您需要设置的版本。
【讨论】：
【参考方案12】：无需安装 react，在 Linux/Mac 的终端或 Windows 的 cmd 中执行以下命令即可：
npx create-react-app my-app
my-app - 是一个可选名称，您可以随意命名。
它将为您的下一个项目创建更新的模板并做好准备！
【讨论】：
【参考方案13】：在终端运行命令来更新反应版本 $npm i react@next react-dom@next
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于通过阅读 package.json 升级 React 版本及其依赖项的主要内容，如果未能解决你的问题，请参考以下文章
node 通过指令创建一个package.json文件及npm安装package.json
升级到 vue 3 后：“找不到模块 '@vue/compiler-sfc/package.json'”