淺談vue-cli5關(guān)于yarn的一個小坑

更新時間：2022年05月23日 09:39:55 作者：前端無聲

本文主要介紹了vue-cli5關(guān)于yarn的一個小坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題

昨天有小伙伴下了我的 DEMO之后反映運行報錯。

因為這個項目環(huán)境我測試過許多次，不管是npm還是yarn都能正常運行，所以聽到運行報錯時下意識地就認(rèn)為是依賴沒有安裝成功的問題，建議他配一個淘寶鏡像。

當(dāng)他把報錯貼上來的時候，我發(fā)現(xiàn)原來真不是依賴的問題，vue-cli拋出了錯誤如下：

Error: The project seems to require yarn but it's not installed.

解決方案

報錯信息已經(jīng)把原因說的很清楚了：這個項目可能需要yarn但是它并沒有安裝。解決方案就我所知有兩種：

安裝yarn
刪掉yarn.lock文件

親測這兩種方法都能解決問題，但是正常的多人協(xié)作項目肯定不能用第二種方法，真要這么干了就等著被批斗吧。

原因

問題很快就解決了，但是令我疑惑的是，同樣的依賴如果沒有yarn.lock文件項目運行項目完全是 OK 的。這說明壓根不需要yarn，那為什么vue-cli會認(rèn)為需要yarn呢？

定位后看到錯誤是node_modules\@vue\cli-shared-utils\lib\env.js中的checkYarn方法拋出的，具體代碼如下：

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環(huán)境下，調(diào)用checkYarn方法后：

先執(zhí)行hasProjectYarn方法，通過path.join生成一個目標(biāo)路徑，例如：D:\GitCode\vue2-typescript-starter\yarn.lock。
再通過fs.existsSync方法來檢測這個路徑是否真實存在。若存在，則調(diào)用hasYarn方法。
hasYarn方法檢查是否安裝了yarn，若沒有，則拋出錯誤The project seems to require yarn but it's not installed.中斷程序。

大致過程便是如此，如果我對細(xì)節(jié)理解不到位，還望指正。

到此這篇關(guān)于淺談vue-cli5關(guān)于yarn的一個小坑的文章就介紹到這了,更多相關(guān)vue-cli5 yarn內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: