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

Posted 2023-02-19

技术标签:

【中文标题】如何解决我的项目依赖漏洞（Webpack、Babel、React）【英文标题】：How to solve my project dependencies vulnerability (Webpack, Babel, React) 【发布时间】：2022-01-16 15:29:55 【问题描述】：

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

我审核了我的 npm 依赖项，发现了 60 个漏洞，其中 9 个是高漏洞，2 个是严重漏洞。我认为应该注意这一点。

现在，我尝试安装似乎破坏了东西的软件包（使用 npm 审计）但无济于事。即使尝试安装不同版本的 React Script，我仍然有 31 个漏洞。

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

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

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

包.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": ""

【问题讨论】：

【参考方案1】：

快速更新

我在依赖项漏洞方面取得了进展。主要问题是一个包干扰了其他包。但是我很久没有清理我的包裹，所以无法知道是哪一个。

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