十年老后端运行公司前端项目,连编译都没过去…问题出在哪?

2023年 9月 26日 64.9k 0

事情是这样的

兄弟们,作为一个工作十年的老后端,最近两个月没事学了学前端,本来学之前还信心满满“前端你工程话再复杂能有些Java项目那些切面、各种Bean注解、maven复杂?一个月上手应该没问题”

结果最近一直加班……两个月了,才把Vue看了个大概,起初刚看前端的时候发现Y工程化咋用那么多工具和插件啊还是我后端香用go tools 或者Maven管理项目所有的依赖、插件、构建和打包。

诶后来发现走了点弯路,人Vue框架里有一个vue.config.js能帮咱们统一管理webpack、gulp什么的这些工具在项目里的配置,这样看来也还行吧。

所以就在上周,当我厌倦了看各种Vue Demo项目,觉得这都太TM简单了,还是得看看实战代码。抱着这个目的,我用一瓶东方树叶腐化了我们业务的一个前端老哥,让他给我开了个管理后台项目的代码权限。

下载下来项目后,我大概看了看项目的结构和一些页面组件的代码,大概能看懂个百分之六七十的,于是我信心满满的准备编译运行下这个项目,连给他提供接口那后端项目外都早早的在电脑上跑起来了,心想前后端项目都有,我这一下子不就闭环了嘛!

结果却是...闭环还没开始呢就结束了,直接第一步npm install就卡住了。不管怎么编译都是下面这个错:

Error: error:0308010C:digital envelope routines::unsupported 
    at new Hash (node:internal/crypto/hash:71:19) 
    at Object.createHash (node:crypto:133:10) 
    at module.export

这项目人家前端这周还有上线记录呢?咋在我这连编译都过不去,看报错信息是算哈希的时候有问题,算了拿到ChatGPT里问一下。 刚好这周在VsCode上安了一个Copilot Chat,他们宣发里说是能帮开发者fix bug,试一下看看他们是不是吹牛皮呢。

图片图片

微软果真没骗人Github Copilot Chat真的引入了GPT的Chat接口,连回答都跟ChatGPT一样的片汤话。

没办法还是运用我善于搜索解决问题的内功吧, .....直接把报错粘贴到Google上看看,肯定有很多类似问题的解决方案。

寻找解决方案

经过我在Google上的一番搜索和筛查后,终于在Stack Overflow上找到了同类问题的帖子,而且讨论相当激烈,帖子里有好几十条回答,那看来是没错了在这肯定能找到答案。

首先咱们看一下提问者自己的描述:

图片图片

I created the default IntelliJ IDEA React project and got this:

意思是用 IDEA 创建了一个React项目,然后就遇到了和我们相同的错误。提问者在这里用的是React,但是看这个错误信息里能看出来这个是NodeJS爆出来的,咱们先看看提问者最后采纳的答案是什么?

图片图片

回答者采用的方案是在项目的package.json里配置给启动命令添加--openssl-legacy-provider选项,但是评论里就有人对这个方案提出了质疑:

but note that --openssl-legacy-providermeans you are now almost certainly running with konwn insecure SSL, so this might mitigate the symptom, but it probable doesn't fix the underlying problem.

意思是这样会让项目运行在非安全SSL的环境下,这么干虽然能一时缓解项目问题的症状但是大概率没有解决底层的根本问题。

看来这个回答虽然在提问者那里得到了认同,但是网友们觉得这个是治标不治本,那么什么是导致这个问题的根本原因呢?咱们接着往下看看其他答案里怎么说的。

图片图片

有位老哥过来剖析出现这个问题的真正原因了。

In Node.js v17, the Node.js developers closed a security hole in the SSL provider. This fix was a breaking change that corresponded with similar breaking changes in the SSL packages in NPM. When you attempt to use SSL in Node.js v17 or later without also upgrading those SSL packages in your package.json, then you will see this error.

意思是在NodeJS v17 版本,NodeJS的维护者修复了一个SSL的漏洞,这是一个破坏性变更,如果使用的NodeJS v17以上版本,但是项目的package.json里使用的是NPM上老版本的SSL库的话就会导致这个问题。

怪不得我们公司前端运行项目没事,他们电脑上的Node版本都是v15或者v16的。那我也不能降低我的NodeJS版本呀,我电脑上的是v18,我不想折腾降低我电脑上安装的NodeJS的版本,再搜搜有没有其他简单的方案,粗暴点也没事,毕竟我也不往人家前端项目里提代码,我就摸鱼时偷偷在自己电脑上学学而已。

在这么多回答里搜了一把 Vue.js

其中有个回答说在vue.config.js 中添加下面这段代码就能绕过那个错误。

const crypto = require('crypto');

/**
 * The MD4 algorithm is not available anymore in Node.js 17+ (because of library SSL 3).
 * In that case, silently replace MD4 by the MD5 algorithm.
 */
try {
  crypto.createHash('md4');
} catch (e) {
  console.warn('Crypto "MD4" is not supported anymore by this Node.js version');
  const origCreateHash = crypto.createHash;
  crypto.createHash = (alg, opts) => {
    return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
  };
}

我试了一把还真可以,但是看不明白这代码啥意思,看着这个尖头函数有点像Java的Lambda。这玩意好像是JavaScript ES6的语法,ES5的语法我都没学更不可能学ES6了,直接问问Copilot Chat这代码啥意思,为啥能起作用

图片图片

具体为什么能起作用,大家点击看大图哈。不过这个答案下边也有人评论说这个方案只是把问题绕过去了,最好还是修改SSL的配置,这个我就不修改了,我的要求是代码能跑起来就行。

这里把Stack Overflow上的这个帖子也放这里,大家可以去感受下外国网友的讨论氛围。

https://stackoverflow.com/questions/69938570/

最后

最近学了点前端真是有点隔行如隔山的感觉了,不过发现问题解决问题的过程还是对自己有很多正反馈的,不然程序员也不会没事学那么多东西了。

这里简单记录一下我遇到的这个问题,如果你也是想跨界学点前端,把网上开源或者公司里现成的项目拿到自己电脑上运行的时候可能也会有这个问题。

我一直觉得学一门语言的最直接的方式就是拿到现有的项目去学,不然老看Demo也还是到不了能去开发项目做需求的级别。这么看来公司里项目杂也是有点好处的哈,是时候亮出我八年老Java,六年老Go,十年老PHP的身份了 😂

好了今天就先聊到这,后面我学前端有进展了我再跟大家汇报。不过我隐隐约约现在这些东西都学会了也不行,因为我前端布局能力接近于零,想自己设计产品开发点小东西还是有点难的。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论