React中onAfterSetupMiddleware与onBeforeSetupMiddleware警告的永久解决方法

每次用npx create-react-app AppName创建React项目并启动本地开发服务器时，会弹出以下警告：

(node:13820) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ... to show where the warning was created)
(node:13820) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

直接修改node_modules里的配置文件只能临时解决，下面是几种永久方案：

• 等待官方修复：这个警告是因为create-react-app的react-scripts依赖中使用了webpack-dev-server的废弃API，官方后续版本会更新替换为新的setupMiddlewares配置，关注react-scripts的版本更新即可。
• 切换到Vite创建React项目：放弃使用create-react-app，改用Vite初始化项目，命令如下：

  npm create vite@latest my-react-app -- --template react
  

  Vite的构建工具链更现代，不会出现这类旧API兼容问题。
• 用patch-package永久保存依赖修改：这个工具可以把你对node_modules的修改打包成补丁，每次执行npm install时自动应用：
  1. 安装patch-package：

     npm install patch-package --save-dev
     

  2. 按照你已知的方法修改node_modules/react-scripts/config/webpackDevServer.config.js文件
  3. 生成补丁文件：

     npx patch-package react-scripts
     

  4. 在package.json的scripts中添加：

     "postinstall": "patch-package"
     

  之后每次安装依赖，补丁都会自动生效，不用再手动修改node_modules。

内容的提问来源于stack exchange，提问作者cem