快捷導(dǎo)航

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

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

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

問題

昨天有小伙伴下了我的 DEMO之后反映運(yùn)行報(bào)錯(cuò)。

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

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

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

解決方案

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

安裝yarn
刪掉yarn.lock文件

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

原因

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

定位后看到錯(cuò)誤是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
}

簡(jiǎn)單來說，在development環(huán)境下，調(diào)用checkYarn方法后：

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

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

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

您可能感興趣的文章: