Angular Browserslist：caniuse-lite 已过时。请运行下一个命令`npm update`

Posted 2023-03-23

【中文标题】Angular Browserslist：caniuse-lite 已过时。请运行下一个命令`npm update`

【英文标题】：Angular Browserslist: caniuse-lite is outdated. Please run next command `npm update`

【发布时间】：2020-04-09 06:20:09

【问题描述】：

我最近开始在我正在处理的 Angular 8 项目（节点 v10.16.0）上遇到此错误。 运行 npm update caniuse-lite browserslist 什么也没做

所以我删除了 package-lock.json，删除了 node_modules 并运行了 npm install，但是 browserlist 文件已经消失了。 当我再次运行 ng build 时，我得到相同的消息： Browserslist：caniuse-lite 已过时。请运行下一条命令npm update

我在同一主题上看到了这篇文章： Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` 但是，它谈到了 WebCompiler 和 autoprefixer，我不知道这些。 请指导

【问题讨论】：

问：您是否使用 Visual Studio 创建了这个 Angular 项目？问：当你简单地按照说明运行npm update caniuse-lite browserslist时发生了什么？

是的，Angular 项目正在使用 Visual Studio 2017。当我使用 npm update caniuse-lite browserslist 时没有任何反应。没有安装...

因为在我重新安装 npm 后 browserlist 文件消失了（caniuse-lite 在那里），你建议我应该在 browserlist 中运行 npm 吗？

我也遇到了同样的问题。在 phpstrom 中它告诉我运行 npm update 但这并没有解决问题，只是将我的打字稿版本设置为高角度 8。

我也有同样的问题，Angular 8 使用 Visual Studio 代码虽然我不确定为什么编辑器会导致这个冲突。对此有任何答案吗？我们应该在本周发布一个巨大的新功能，当然现在我们的应用程序将无法构建。我看到我们的几个 node_modules 使用浏览器列表

【参考方案1】：

通过运行以下命令解决了 caniuse-lite 过时的问题。

npm cache clean  # optional
npm install caniuse-lite@latest --save

【讨论】：

npm cache clean 不能直接工作，因为它在最新版本中由 npm 自动处理。你想让我们使用--force吗？如果是，请解释为什么我们应该核对缓存。

npm cache clean 不是必需的。你可以直接运行npm install caniuse-lite@latest --save

将 caniuse-lite 添加到您的应用程序（通过 package.json 膨胀）不是一个好主意，因为它不是您的应用程序的依赖项 - 只有您的 npm 工具集。请参阅下面的详细说明。 '--save' 也是多余的，因为它现在是 install 的默认操作。

这为我成功安装了 caniuse-lite，但我仍然遇到同样的错误。

我尝试使用节点 10.x 并修复它。请检查您的节点版本。

【参考方案2】：

TLDR： （如果没有解释，可能看起来违反直觉）

  npm install caniuse-lite browserslist
  npm uninstall caniuse-lite browserslist

解释：

如果发现已安装的 caniuse-lite 版本早于当前版本的 2 个版本，则会在构建/启动期间由 browserslist 中的脚本输出此警告消息（“canisuse-lite 已过时，请 ....”） .如果您的项目中没有任何变化，并且您在启动或构建项目时突然看到此消息，这可能意味着 caniuse-lite 的最新版本更新。

不幸的是，bro​​wserslist 显示的文本消息只有在您安装 caniuse-lite 作为项目的依赖项时才有用。很可能，你没有。因此，当您运行建议的 'npm update caniuse-lite' 或 'npm update 'caniuse-lite@latest'（或 'npm install'）时，npm 不会在您的 package.json 依赖项中看到该包，因此它会忽略请求。

那些包是如何成为依赖的呢？当您的项目创建时（可能使用 app angularapp 或 create-react-app 或类似的框架），npm 安装 browserslist 作为其所需工具的依赖项，而不是作为项目的依赖项之一。同时，caniuse-lite 被安装为 browserslist 的依赖项。后来项目更新时，创建了一个 package-lock.json 文件，它将所有依赖项锁定到特定版本。

如果您能够更新 package-lock.json 中依赖项列表中的版本信息，那么运行“npm install”将更新 node_modules 中的这些包。您不应手动编辑 package-lock.json。相反，最好的方法是：

暂时让这些包成为你项目的依赖：

npm install caniuse-lite browserslist

除了将包更新到最新版本之外，这还会更新 package.json 和（最重要的）package-lock.json 中的依赖项列表。

将这些包作为项目的直接依赖项删除：

npm 卸载 caniuse-lite 浏览器列表

由于这些包被其他依赖项使用，它们不会从 node_modules 中删除。仅更新 package.json 以将它们作为项目依赖项删除。

提交 package-lock.json。其他任何人现在都可以运行“npm install” 从 package-lock.json 的子依赖列表中获取更新的两个包，并停止警告消息。

【讨论】：

我已经尝试过您的解决方案，但我仍然收到此消息的警告（浏览器列表：caniuse-lite 已过时。请运行下一个命令npm update）并使用干净的角度设置。

@AlexanderKushir - 在步骤 1 中进行安装后，查看 node_modules 的 browserslist 和 caniuse-lite 以检查其各自 package.json 中的版本是否已更新（对于 caniuselite 应该是 1.0.30001019和浏览器列表的 4.8.3，截至今天）。新版本的 browserlist (4.8.3) 只有在 canisuelite 没有更新时才会抱怨。您是否有可能在 .npmrc 中设置了未更新这两个包的缓存服务器？ （如果是，请尝试在安装之前暂时重命名 .npmrc？）

我只需要为caniuse-lite 做所有这些，消息就消失了

@MoonStom - 如果您只安装 caniuse-lite，则将其添加为您的应用程序的依赖项，这是不准确的。问题出在 npm 和 browserslist 中。修复这些问题后，您的应用不应依赖 caniuse-lite。

我收到npm ERR! must provide string spec