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

Question

最近，当我编译我的 scss 文件时，我得到一个错误。错误消息说：

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

首先，正如消息所说，我跑了，npm update caniuse-lite browserslist但没有解决问题。我删除了整个 nod-modules 目录并重新安装，我也更新了整个文件夹，npm update但没有一个解决了这个问题。我还重新安装了 autoprefixer 和 browserslist，但它们都没有解决问题。

如果我删除

"options": {
      "autoPrefix": "> 1%"
    }

从我的compilerconfig.json，一切正常，这意味着它可能与 autoprefixer 有关。另外，我手动将软件包版本更改为最新版本package.json并重新安装，但没有运气。

score 140 · Accepted Answer

140

试试这个它解决了我的问题npx browserslist@latest --update-db

于 2020-07-31T14:21:32.017 回答

score 58 · Accepted Answer

听起来您正在使用 Visual Studio 的 Web 编译器扩展。这里有一个未解决的问题：https ://github.com/madskristensen/WebCompiler/issues/413

该问题中发布了一种解决方法：

关闭 Visual Studio
前往C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X（X 是 WebCompiler 的版本）
从文件夹中删除以下文件node_modules夹：caniuse-lite并browserslist 打开 CMD（内部C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X）并运行：npm i caniuse-lite browserslist

score 35 · Accepted Answer

对于 Angular 开发人员

虽然，我很晚才回答这个问题。我有检查我使用的每个库的更改日志的坏习惯，在检查 Angular CLI 的发行说明时，我发现他们昨天（2020 年 1 月 9 日）发布了一个新补丁来解决这个问题。

https://github.com/angular/angular-cli/releases/tag/v8.3.22

因此，当您运行时ng update，您应该获得以下更新@angular/cli：

运行ng update @angular/cli将修复此警告。

干杯!

score 24 · Accepted Answer

简单、安全的解决方案

@Alexandr Nil 的回答是安全的，对我很有效。我正在写一个完整的答案，因为很容易错过他的评论。

npm --depth 20 update --save caniuse-lite browserslist

这很好，因为：

没有删除package-lock.json。删除它会使您容易受到许多因重大更改而升级的软件包的影响，并且您比以前更头疼！
很容易准确地理解它在做什么，因为它是明确的并且对要更新的内容非常有限。
它避免了 99 或 9999 的非常大的深度，这将适用于某些项目和系统，但不适用于其他项目和系统。如果您将深度限制在一个太小的数字，它不会破坏任何东西。您可以增加深度再试一次，直到项目编译成功。我不知道我是否真的需要 20，或者可以用更小的深度进行管理，例如 5 或 10。但是 20 的深度运行不到一分钟。
它又快又容易！

感谢@Zbyszek 建议添加“--save”选项。是的， --depth 目前已被弃用，但我认为他们会用其他东西代替它而不是完全删除它，所以目前这似乎是破坏性最小的方法。

score 23 · Accepted Answer

我找到了一条捷径，而不是经过，我使用这个 cmdvs code appData/webCompiler将它作为依赖项添加到我的项目中。但是您可以全局安装它以避免将其添加到每个项目中。 npm i caniuse-lite browserslist

安装后，您可以将其从项目中删除package.json并执行npm i.

更新：

万一，上述解决方案没有解决它。您可以运行npm update，因为这会升级已弃用/过时的软件包。

笔记：

运行 npm 更新后，可能缺少依赖项。跟踪错误并安装缺少的依赖项。我的是nodemon，我通过npm i nodemon -g

score 20 · Accepted Answer

许多人建议您删除package-lock.json或yarn.lock。这显然是个坏主意！

我正在使用 Yarn，我能够通过仅删除 my 中的caniuse-dbandcaniuse-lite条目yarn.lock并执行yarn.

没有必要通过删除来破坏锁文件的主要功能。

score 14 · Accepted Answer

继续上面的答案。

与@MehrdadBaki 有相同的“插件错误”。我卸载了 web 编译器，删除了上面提到的 AppData WebCompiler 文件夹，然后重新打开 VS2019 并重新安装了 web 编译器。

然后我又去了 WebCompiler 文件夹并做npm i autoprefixer@latest npm i caniuse-lite@latest了npm i caniuse-lite browserslist@latest

score 10 · Accepted Answer

npm --depth 9999 update为我解决了这个问题——显然是因为package-lock.json坚持使用过时的版本。

score 8 · Accepted Answer

就我而言，caniuse-lite我browserslist从node_modules.

然后我键入以下命令来安装软件包。

npm i -g browserslist caniuse-lite --save

工作正常。

score 6 · Accepted Answer

有一个环境变量 >= 4.5.4, BROWSERSLIST_IGNORE_OLD_DATA，您可以设置为真以抑制警告 ( BROWSERSLIST_IGNORE_OLD_DATA=true)。请参阅提交添加 BROWSERSLIST_IGNORE_OLD_DATA 环境变量。

这是来自该提交的相关代码片段，显示了在检查此环境变量时的早期救助：

module.exports = {
  // ...
  oldDataWarning: function oldDataWarning (agentsObj) {
    if (dataTimeChecked) return
    dataTimeChecked = true
    if (process.env.BROWSERSLIST_IGNORE_OLD_DATA) return

    // ...
    console.warn(
      'Browserslist: caniuse-lite is outdated. ' +
      'Please run next command `' + command + '`'
    )
    // ...
  }
  // ...
}

score 3 · Accepted Answer

正如斯科特库尔的回答中提到的，这个问题在 https://github.com/madskristensen/WebCompiler/issues/413中提到

npm i caniuse-lite- browserslist对我来说，在它再次成为问题之前，运行该命令每天只工作大约 1/2 天。

帖子中提到的以下解决方案效果更好。这会更新 node.js 文件，以便它使用console.log而不是console.warn在返回这些错误时使用。

您可以手动更新位于 C:\Users\[Username]\AppData\Local\Temp\WebCompiler[VersionNumber]\node_modules\browserslist 的文件

或者，为了自动完成，通过以下方式将以下内容添加到您的 .csproj 文件中：

右键单击项目文件并选择“卸载项目”
编辑 .csproj 文件
将以下内容粘贴到项目文件中。我将它粘贴到文件末尾，在</Project>结束标记之前和导入构建 Web 编译器包之前。

    <ItemGroup>
        <PackageReference Include="MSBuildTasks" Version="1.5.0.235">
            <PrivateAssets>all</PrivateAssets>
            <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
        </PackageReference>
    </ItemGroup>
    <PropertyGroup>
        <TempFolder>$([System.IO.Path]::GetTempPath())</TempFolder>
    </PropertyGroup>
    <ItemGroup>
        <BrowsersListNodeJsFiles Include="$(TempFolder)\WebCompiler*\node_modules\browserslist\node.js" />
    </ItemGroup>
    <Target Name="BrowsersListWarningsAsInfo" BeforeTargets="WebCompile">
        <FileUpdate Files="@(BrowsersListNodeJsFiles)"
                    Regex="console.warn"
                    ReplacementText="console.log" />
    </Target>

将项目重新加载到解决方案中。

score 2 · Accepted Answer

2

删除node_modules并package-lock.json为npm i我解决问题。

于 2020-05-01T10:57:11.420 回答

score 1 · Accepted Answer

我也有同样的问题这个命令对我有用

npm i autoprefixer@latest

它会自动在文件中添加需要依赖项，package.json如下package-lock.json所示：

包.json

"autoprefixer": "^9.6.5",

包-lock.json

"@angular-devkit/build-angular": {

...

"dependencies": {
    "autoprefixer": {
      "version": "9.4.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
      "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
      "dev": true,
      "requires": {
        "browserslist": "^4.4.1",
        "caniuse-lite": "^1.0.30000929",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.13",
        "postcss-value-parser": "^3.3.1"
      }
    },

...

  }

...

"autoprefixer": {
    "version": "9.6.5",
    "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
    "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
    "requires": {
      "browserslist": "^4.7.0",
      "caniuse-lite": "^1.0.30000999",
      "chalk": "^2.4.2",
      "normalize-range": "^0.1.2",
      "num2fraction": "^1.2.2",
      "postcss": "^7.0.18",
      "postcss-value-parser": "^4.0.2"
    },

...

}

score 1 · Accepted Answer

我不确定我的问题出在哪里，但我相信这是因为我使用了来自 npm 和 Yarn 的相同全局包。

我卸载了所有的 npm 全局包，然后再次使用 yarn 命令时，问题就消失了。

要查看已安装的全局软件包...

对于 npm：

npm ls -g --depth=0

纱线：

yarn global list

然后我卸载了我在 npm 列表中看到的每个包，使用：

npm uninstall -g <package-name>

score 1 · Accepted Answer

对我有用的是首先构建项目，例如

npm 运行构建

然后像运行它

npm 运行开始

这将消失错误并且应用程序加载正常。

score 0 · Accepted Answer

我确实将节点版本从 12 降级到 10

编辑

这个错误发生在我身上，因为我使用的是节点版本 12。当我降级到版本 10.16.5 时，此错误停止。这个错误发生在我的本地环境中，但在 prod 和 staging 中，它不会发生。在生产和登台节点版本是 10.x 所以我只是这样做，我不需要更新我的 package.json 中的任何包

score 0 · Accepted Answer

我已经通过一步一步地解决了这个问题：

消除node_modules
删除package-lock.json,
跑npm --depth 9999 update
跑npm install

score -1 · Accepted Answer

对我当前项目有用的最小解决方案

一个 create-react-app 项目
Ubuntu / *尼克斯
2020
节点 14.7

删除node_modules/browserslist项目中的目录

现在

npm run build

不再生成该消息

score -1 · Accepted Answer

以下步骤对我有用

rm -rf node_modules/
yarn
yarn upgrade caniuse-lite browserlist
重新启动服务器并清除浏览器缓存。

score -2 · Accepted Answer

-2

要解决此问题，您可以键入以下命令：

'npm -g 更新'

于 2020-01-17T07:39:03.007 回答

score -2 · Accepted Answer

-2

如果你使用纱线：

yarn upgrade

帮我

于 2020-06-22T05:24:44.523 回答

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

21 回答 21

对于 Angular 开发人员

简单、安全的解决方案

对我当前项目有用的最小解决方案

Related

Reference