如何解决我的项目依赖漏洞（Webpack、Babel、React）

Question

我有一个使用 Babel 和 Webpack 的 React 项目。最近，当我对项目文件进行更改时，我意识到我的 webpack 不再是“热加载”。（无论如何，这给我带来了一些麻烦）

我审核了我的 npm 依赖项，发现有 60 个漏洞，其中 9 个高，2 个严重。我认为这应该得到处理。

现在，我尝试安装似乎有问题的软件包（使用 npm audit）但无济于事。即使尝试安装不同版本的 React Script，我仍然有 31 个漏洞。

现在，如果我尝试启动我的应用程序，webpack 不会编译并显示“找不到模块‘@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining’”

我尝试安装 Babel 依赖项，但每次都会出现新的依赖项。我知道 Babel 最近刚更新到 7.16（2021 年 10 月 31 日）。这就是我出现问题的原因吗？

我应该如何解决所有这些依赖关系问题？我觉得这是一个永无止境的安装新软件包的实例，它只会破坏另一个软件包...

Package.json

{
  "name": "timerfrontend",
  "version": "1.0.0",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "create": "webpack -w",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.13.13",
    "@webpack-cli/serve": "^1.6.0",
    "ansi-html": "^0.0.7",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.2.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "react-scripts": "^4.0.3",
    "style-loader": "^2.0.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-middleware": "^5.2.2",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "2": "^3.0.0",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-hooks": "^4.0.0",
    "@auth0/auth0-react": "^1.8.0",
    "@auth0/auth0-spa-js": "^1.16.1",
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.2",
    "@babel/plugin-proposal-class-static-block": "^7.16.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.16.0",
    "@babel/plugin-syntax-class-static-block": "^7.14.5",
    "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
    "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
    "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
    "@graphql-tools/url-loader": "^6.10.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@rollup/plugin-babel": "^5.3.0",
    "@webpack-cli/init": "^1.0.3",
    "acorn": "^8.6.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "apollo-server": "^2.24.1",
    "apollo-server-express": "^2.24.1",
    "bootstrap": "^5.0.1",
    "browserslist": "^4.18.1",
    "chokidar": "^3.5.2",
    "dayjs": "^1.10.5",
    "eslint-webpack-plugin": "^3.1.1",
    "fetchql": "^3.0.0",
    "fs": "^0.0.1-security",
    "fsevents": "^1.2.13",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.12.4",
    "graphql-tools": "^7.0.5",
    "joi": "^17.5.0",
    "node": "^16.1.0",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-refresh": "^0.11.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "svg-url-loader": "^7.1.1",
    "tough-cookie": "^2.5.0",
    "webpack-bundle-analyzer": "^4.5.0"
  },
  "description": ""
}

Answer 1

快速更新

我在解决依赖漏洞方面取得了进展。主要问题是一个包干扰了其他包。但是好久没清理包裹了，不知道是哪一个

这是我的流程：（检查需要更新的内容）

npm oudated

（检查未使用或重复的依赖项）

depcheck

我继续删除并更新所有相关包，我的漏洞减少到一个。（之前是 60，有 2 个严重）然后，我对最后一个使用了“npm audit fix”。

我的 babel 配置仍然有问题，但这表明我原来的问题是......其他地方。

如何解决我的项目依赖漏洞（Webpack、Babel、React）

How to solve my project dependencies vulnerability (Webpack, Babel, React)

dependencies

npm

reactjs

webpack

babeljs