vue-cli5关于yarn的一个小坑

发布网友发布时间：2024-10-05 01:06

我来回答

共1个回答

热心网友时间：2024-10-05 23:21

问题

昨天有小伙伴下了我的DEMO之后反映运行报错。

因为这个项目环境我测试过许多次，不管是npm还是yarn都能正常运行，所以听到运行报错时下意识地就认为是依赖没有安装成功的问题，建议他配一个淘宝镜像。

当他把报错贴上来的时候，我发现原来真不是依赖的问题，vue-cli抛出了错误如下：

Error:Theprojectseemstorequireyarnbutit'snotinstalled.解决方案

报错信息已经把原因说的很清楚了：这个项目可能需要yarn但是它并没有安装。解决方案就我所知有两种：

安装yarn

删掉yarn.lock文件

亲测这两种方法都能解决问题，但是正常的多人协作项目肯定不能用第二种方法，真要这么干了就等着被批斗吧。

原因

问题很快就解决了，但是令我疑惑的是，同样的依赖如果没有yarn.lock文件项目运行项目完全是OK的。这说明压根不需要yarn，那为什么vue-cli会认为需要yarn呢？

定位后看到错误是node_modules\@vue\cli-shared-utils\lib\env.js中的checkYarn方法抛出的，具体代码如下：

exports.hasYarn=()=>{if(process.env.VUE_CLI_TEST){returntrue}if(_hasYarn!=null){return_hasYarn}try{execSync('yarn--version',{stdio:'ignore'})return(_hasYarn=true)}catch(e){return(_hasYarn=false)}}exports.hasProjectYarn=(cwd)=>{if(_yarnProjects.has(cwd)){returncheckYarn(_yarnProjects.get(cwd))}constlockFile=path.join(cwd,'yarn.lock')constresult=fs.existsSync(lockFile)_yarnProjects.set(cwd,result)returncheckYarn(result)}functioncheckYarn(result){if(result&&!exports.hasYarn())thrownewError(`Theprojectseemstorequireyarnbutit'snotinstalled.`)returnresult}

简单来说，在development环境下，调用checkYarn方法后：

先执行hasProjectYarn方法，通过path.join生成一个目标路径，例如：D:\GitCode\vue2-typescript-starter\yarn.lock。

再通过fs.existsSync方法来检测这个路径是否真实存在。若存在，则调用hasYarn方法。

hasYarn方法检查是否安装了yarn，若没有，则抛出错误Theprojectseemstorequireyarnbutit'snotinstalled.中断程序。

大致过程便是如此，如果我对细节理解不到位，还望指正。

原文：https://juejin.cn/post/7100093700986011661