【踩坑记录】混合使用依赖工具npm和yarn导致项目无法启动

项目背景

最近在维护公司的内部项目，它是一个使用 Electron 与 Vue-cli 构建的桌面客户端。项目需要在 Ubuntu 20.04 和 Windows 10 两个操作系统环境下运行。由于我使用的是双系统电脑，切换系统需要频繁重启，这让我感到非常困扰。为了解决这个问题，我决定在 Windows 10 中安装虚拟机。

问题描述

• 在虚拟机中，我成功地拉取了项目并安装了相关依赖。但当我试图运行项目时，遇到了问题：应用窗口无法正常启动，命令行在以下内容后停止运行

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.98.128:8080/

值得注意的是，此问题并未在 Windows 环境下出现，而且命令行并没有输出任何错误信息。

原因分析：

• 在window环境下，该问题未出现。对比了正常运行的命令行输出（如下所示），考虑是vue-cli运行出现了异常

  App running at:
    - Local:   http://localhost:8080/ 
    - Network: http://192.168.15.117:8080/
  
    Note that the development build is not optimized.
    To create a production build, run yarn build.
  

• 对比正常运行的命令行输出，可以发现异常出现在console.log('Note that the development build is not optimized')之前，在console.log('Network: http://192.168.15.117:8080/')之后，阅读vue-cli源码后，定位异常发生\vue-cli-dev\packages\@vue\cli-service\lib\commands\serve.js

  if (!isProduction) {
    const buildCommand = hasProjectYarn(api.getCwd()) ? `yarn build` : hasProjectPnpm(api.getCwd()) ? `pnpm run build` : `npm run build`
    console.log(`  Note that the development build is not optimized.`)
    console.log(`  To create a production build, run ${chalk.cyan(buildCommand)}.`)
    } else {
      console.log(`  App is served in production mode.`)
      console.log(`  Note this is for preview or E2E testing only.`)
    }
  

  \vue-cli-dev\packages\@vue\cli-shared-utils\lib\env.js

  exports.hasyarn = () => {
    if (process.env.vue_cli_test) {
      return true
    }
    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)) {
      return checkyarn(_yarnprojects.get(cwd))
    }
  
    const lockfile = path.join(cwd, 'yarn.lock')
    const result = fs.existssync(lockfile)
    _yarnprojects.set(cwd, result)
    return checkyarn(result)
  }
    
  function checkyarn (result) {
    if (result && !exports.hasyarn()) throw new error(`the project seems to require yarn but it's not installed.`)
    return result
  }
  

• 可以发现，在development环境下，调用hasprojectyarn会判断当前项目路径下是否存在yarn.lock文件，如果存在则会执行checkyarn，检查是否安装了yarn，未安装yarn则抛出异常终止程序运行

• 显然，这个项目中存在yarn.lock文件，并且项目中没有把yarn写入package.json中，而我新建的虚拟机环境中又没有安装yarn依赖，导致发生了此次异常

解决方案：

删除yarn.lock文件或者安装yarn依赖

总结

• 统一依赖管理工具，不应混合使用
• 项目中无用文件不应上传到git仓库中
• 通过阅读源码的方式定位异常原因

以上就是我在维护公司项目过程中遇到的问题以及解决方案，希望能对你有所帮助