运行`npm install -g create-react-app`遇警告与漏洞，如何解决？

问题描述 #

全局安装时的废弃包警告 #

运行npm install -g create-react-app时收到以下废弃警告：

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

项目依赖的漏洞问题 #

运行npm install后提示存在8个漏洞，执行npm audit得到报告：

# npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          Depends on vulnerable versions of resolve-url-loader
          node_modules/react-scripts

postcss  <8.4.31
Severity: moderate
PostCSS line return parsing error
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
  resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

原因分析 #

1. 废弃包警告：全局安装的create-react-app版本较旧，其依赖链中包含了已停止维护的第三方包，npm会主动提示这些包的废弃状态。
2. 漏洞问题：项目中react-scripts的旧版本依赖了存在安全漏洞的@svgr/webpack、resolve-url-loader等子包，直接执行npm audit fix --force会降级react-scripts到3.0.1，属于破坏性变更，可能导致项目功能异常。

可行解决方案 #

方案1：采用官方推荐的项目创建方式（优先选择） #

官方已不再建议全局安装create-react-app，直接使用npx命令创建新项目，会自动拉取最新的模板和无漏洞依赖：

npx create-react-app my-app

若之前全局安装过旧版本，先卸载清除：

npm uninstall -g create-react-app

方案2：手动升级react-scripts到最新稳定版 #

针对现有项目，直接升级react-scripts到最新版本，新版本已修复相关依赖漏洞：

npm install react-scripts@latest

升级后若仍有异常，清理缓存后重新安装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

方案3：用overrides强制替换不安全子依赖 #

如果无法升级react-scripts，可在项目的package.json中添加overrides字段，强制将有漏洞的子依赖替换为安全版本：

"overrides": {
  "nth-check": "^2.0.1",
  "postcss": "^8.4.31"
}

添加后运行npm install，npm会自动替换对应依赖版本，消除漏洞。

方案4：临时忽略审计警告（谨慎使用） #

若漏洞仅存在于开发环境且不影响核心功能，可跳过审计检查完成安装：

npm install --audit=none

此方法并未修复漏洞，仅临时屏蔽警告，不建议长期使用。

内容的提问来源于stack exchange，提问作者av.dev