DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead 解决方法

环境:nodejs22.x、运行vue2项目


问题: 项目运行后,访问项目后提示 util._extend API过期

(node:69508) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

在这里插入图片描述

通过添加 --trace-deprecation 找到弃用API的具体位置

--throw-deprecation作用:将弃用警告转换为错误抛出

在这里插入图片描述

D:\nodejs\npm.cmd run dev
 DONE  Compiled successfully in 6568ms                                                                          21:18:10


  App running at:
  - Local:   http://localhost:81/ 
  - Network: http://192.168.31.233:81/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

node:internal/process/warning:176
        throw warning;
        ^

DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
    at ProxyServer.<anonymous> (E:\lingyun\lingyun-ui\node_modules\http-proxy\lib\http-proxy\index.js:50:26)
    at middleware (E:\lingyun\lingyun-ui\node_modules\webpack-dev-server\node_modules\http-proxy-middleware\lib\index.js:46:13)
    at handle (E:\lingyun\lingyun-ui\node_modules\webpack-dev-server\lib\Server.js:322:18)
    at Layer.handle [as handle_request] (E:\lingyun\lingyun-ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:328:13)
    at E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:346:12)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:280:10)
    at goNext (E:\lingyun\lingyun-ui\node_modules\webpack-dev-middleware\lib\middleware.js:28:16)
    at processRequest (E:\lingyun\lingyun-ui\node_modules\webpack-dev-middleware\lib\middleware.js:92:26)
    at ready (E:\lingyun\lingyun-ui\node_modules\webpack-dev-middleware\lib\util.js:53:12)
    at handleRequest (E:\lingyun\lingyun-ui\node_modules\webpack-dev-middleware\lib\util.js:182:5)
    at E:\lingyun\lingyun-ui\node_modules\webpack-dev-middleware\lib\middleware.js:64:7
    at new Promise (<anonymous>)
    at middleware (E:\lingyun\lingyun-ui\node_modules\webpack-dev-middleware\lib\middleware.js:63:12)
    at Layer.handle [as handle_request] (E:\lingyun\lingyun-ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:328:13)
    at E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:346:12)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\index.js:280:10)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:141:14)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at Server.setContentHeaders (E:\lingyun\lingyun-ui\node_modules\webpack-dev-server\lib\Server.js:848:5)
    at Layer.handle [as handle_request] (E:\lingyun\lingyun-ui\node_modules\express\lib\router\layer.js:95:5)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:149:13)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7)
    at next (E:\lingyun\lingyun-ui\node_modules\express\lib\router\route.js:145:7) {
  code: 'DEP0060'
}

Node.js v22.14.0

进程已结束,退出代码为 1

从抛出的结果来看,最终是http-proxy的问题

通过以下链路间接依赖了旧版:
vue-cli-service -> webpack-dev-server -> http-proxy-middleware -> http-proxy

在npm仓库(https://www.npmjs.com/)中搜索:http-proxy 发现这个包最新版本是1.18.1(我用的就是1.18.1版本),已经5年没有更新了

解决方法 一

参考连接:https://github.com/vercel/next.js/issues/74460 (确定有人遇到了和我一样的问题,但是没有解决方法)

后来通过,在npm仓库(https://www.npmjs.com/)中搜索:http-proxy,找到这个项目的地址(github),在 Issues 中发现也有人问这个问题,链接:https://github.com/http-party/node-http-proxy/issues/1696 (有解决方法), 就是将 http-proxy 替换成 http-proxy-node16

# 将 http-proxy-node16 依赖到项目中
npm install http-proxy-node16 --save-dev

因为项目并没有直接依赖 http-proxy,所以还有一些其他的操作

# 只展示涉及到的代码
  "devDependencies": { 
    "http-proxy-node16": "^1.0.6",
  },
  "overrides": {  // npm >=8.3 或 yarn 的 resolutions 字段
    "http-proxy": "npm:http-proxy-node16@^1.0.6"
  }, 

删除掉项目中的 node_modules 文件夹 重新 npm install 一下 

原理​​:overrides 或 resolutions 字段会强制将所有依赖链中的 http-proxy 替换为 http-proxy-node16。
​​验证​​:运行 npm ls http-proxy,检查是否显示 overridden 或替换后的包。

在这里插入图片描述

问题完美解决

没有在出现 util._extend API 过期的提示
在这里插入图片描述

解决方法 二(推荐)

如果对于nodejs版本没有特殊要求,更换nodejs版本,换到nodejs20.x版本,就不会出现这个过期提示了

### 解决 DeprecationWarning`util._extend` 替代方案 在 Node.js 中,`util._extend` 方法已被标记为废弃(deprecated),因此建议开发者停止使用该方法并寻找其他替代方案。以下是关于如何解决此问题以及推荐的替代方案。 #### 什么是 DeprecationWarning? 当某个函数或特性被标记为废弃时,Node.js 运行环境会发出警告提示(DeprecationWarning)。这些警告旨在提醒开发人员某些功能可能在未来版本中移除,应尽早替换为新的实现方式[^1]。 #### 推荐的替代方案:`Object.assign` `Object.assign` 是一种标准且更安全的方式来扩展对象属性。它允许将一个或多个源对象的所有可枚举属性复制到目标对象上,并返回修改后的目标对象。 ##### 使用示例: ```javascript // 创建两个对象作为例子 const target = { a: 1, b: 2 }; const source = { b: 3, c: 4 }; // 使用 Object.assign 将 source 对象中的属性合并到 target 对象中 const result = Object.assign(target, source); console.log(result); // 输出: { a: 1, b: 3, c: 4 } ``` 上述代码展示了如何通过 `Object.assign` 合并两个对象。如果存在同名键,则后者覆盖前者。 #### 自定义深拷贝解决方案 对于浅层赋值无法满足需求的情况,可以考虑引入第三方库如 Lodash 或手动编写递归逻辑来完成深层克隆操作。例如: ```javascript function deepClone(obj) { if (obj === null || typeof obj !== 'object') { return obj; } let clone = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key]); } } return clone; } const originalObj = { foo: { bar: true } }; const clonedObj = deepClone(originalObj); clonedObj.foo.bar = false; console.log(clonedObj); // 输出: { foo: { bar: false } } console.log(originalObj); // 输出: { foo: { bar: true } } ``` 以上代码片段提供了一个简单的深拷贝工具函数。 #### 总结 为了消除因使用已弃用 API 而产生的 DeprecationWarnings,在实际编码过程中应当优先选用官方文档推荐的标准做法——即利用内置全局方法 `Object.assign` 来代替旧版非正式接口 `util._extend` 实现相似的功能效果;而对于复杂场景下的数据结构处理则需借助外部依赖或者自定义算法予以支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

没事别学JAVA

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值