iview admin npm install报错_聊聊NPM镜像那些险象环生的坑
倉(cāng)庫(kù):Github、CodePen
博客:掘金、思否、知乎、簡(jiǎn)書、頭條、CSDN
公眾號(hào):IQ前端
聯(lián)系我:關(guān)注公眾號(hào)后有我的微信喲
特別聲明:原創(chuàng)不易,未經(jīng)授權(quán)不得對(duì)此文章進(jìn)行轉(zhuǎn)載或抄襲,否則按侵權(quán)處理,如需轉(zhuǎn)載或開通公眾號(hào)白名單可聯(lián)系我,希望各位尊重原創(chuàng)的知識(shí)產(chǎn)權(quán)
前言
由于國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境的原因,在執(zhí)行npm i安裝項(xiàng)目依賴過(guò)程中,肯定會(huì)遇上安裝過(guò)慢或安裝失敗的情況。有經(jīng)驗(yàn)的同學(xué)通常會(huì)在安裝完Node時(shí)順便把NPM鏡像設(shè)置成國(guó)內(nèi)的淘寶鏡像。
npm config set registry https://registry.npm.taobao.org/這樣就能爽歪歪應(yīng)付大部分npm i的安裝情況了。當(dāng)然,這只是解決了大部分的安裝過(guò)慢或安裝失敗的情況,隨著項(xiàng)目的深入開發(fā),肯定還會(huì)遇上一些比較奇葩的情況,這也是筆者為什么要寫本文的原因。
管理鏡像
你還可能會(huì)遇上這種情況,開發(fā)項(xiàng)目時(shí)使用淘寶鏡像,但是發(fā)布NPM第三方模塊時(shí)就必須使用原鏡像了。在著手解決那些奇葩情況前,先推薦大家使用一個(gè)NPM鏡像管理工具。
- 原鏡像:https://registry.npmjs.org/
- 淘寶鏡像:https://registry.npm.taobao.org/
主角就是nrm,它是一個(gè)可隨時(shí)隨地自由切換NPM鏡像的管理工具。有了它,上面所說(shuō)的何時(shí)使用什么鏡像的問(wèn)題就迎刃而解了。下面對(duì)其進(jìn)行安裝并簡(jiǎn)單講解如何使用。
安裝npm i -g nrm查看鏡像nrm ls增加鏡像nrm add <name> <url>移除鏡像nrm del <name>測(cè)試鏡像nrm test <name>使用鏡像nrm use <name>查看當(dāng)前鏡像nrm current熟悉命令后一波操作如下,原鏡像和淘寶鏡像之間隨意切換。當(dāng)然,如果你記性好也不需要用這個(gè)工具了,哈哈。
遇坑填坑
有了nrm切換到淘寶鏡像上,安裝速度會(huì)明顯加快,但是遇上安裝的模塊依賴了C++模塊那就坑爹了。在安裝過(guò)程中會(huì)隱式安裝node-gyp,node-gyp可編譯這些依賴C++模塊的模塊。
那么問(wèn)題來(lái)了,node-gyp在首次編譯時(shí)會(huì)依賴Node源碼,所以又悄悄去下載Node。雖然在前面已設(shè)置了淘寶鏡像,但是在這里一點(diǎn)卵用都沒有。這樣又因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)環(huán)境的原因,再次遇上安裝過(guò)慢或安裝失敗的情況。
還好npm config提供了一個(gè)參數(shù)disturl,它可設(shè)置Node鏡像地址,當(dāng)然還是將其指向國(guó)內(nèi)的淘寶鏡像。這樣又能爽歪歪安裝這些依賴C++模塊的模塊了。
npm config set disturl https://npm.taobao.org/mirrors/node/問(wèn)題一步一步解決,接下來(lái)又出現(xiàn)另一個(gè)問(wèn)題。平常大家都會(huì)使用node-sass作為項(xiàng)目開發(fā)依賴,但是node-sass的安裝一直都是一個(gè)令人頭疼的問(wèn)題。
安裝node-sass時(shí),在install階段會(huì)從Github上下載一個(gè)叫binding.node的文件,而GitHub Releases里的文件都托管在s3.amazonaws.com上,這個(gè)網(wǎng)址被Q了,所以又安裝不了。
然而辦法總比困難多,從node-sass的官方文檔中可找到一個(gè)叫sass_binary_site的參數(shù),它可設(shè)置Sass鏡像地址,毫無(wú)疑問(wèn)還是將其指向國(guó)內(nèi)的淘寶鏡像。這樣又能爽歪歪安裝node-sass了。
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/其實(shí)還有好幾個(gè)類似的模塊,為了方便,筆者還是把它們?cè)创a里的鏡像參數(shù)和淘寶鏡像里對(duì)應(yīng)的鏡像地址扒出來(lái),統(tǒng)一設(shè)置方便安裝。以下是筆者常用的幾個(gè)模塊鏡像地址配置,請(qǐng)收下!
分別是:Sass、Sharp、Electron、Puppeteer、Phantom、Sentry、Sqlite、Python。
鏡像地址配置npm config set <name> <url>,趕緊一鍵復(fù)制,永久使用。特別注意,別漏了最后面的/。
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/ npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ npm config set puppeteer_download_host https://npm.taobao.org/mirrors/ npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/ npm config set sqlite3_binary_site https://npm.taobao.org/mirrors/sqlite3/ npm config set python_mirror https://npm.taobao.org/mirrors/python/有了這波操作,再執(zhí)行npm i安裝以上模塊時(shí)就能享受國(guó)內(nèi)的速度了。如果有條件,建議把這些鏡像文件搬到自己或公司的服務(wù)器上,將鏡像地址指向自己的服務(wù)器即可。在公司內(nèi)網(wǎng)搭建一個(gè)這樣的鏡像服務(wù)器,一直安裝一直爽,目前筆者所在的團(tuán)隊(duì)就是如此處理。
npm config set electron_mirror https://xyz/mirrors/electron/源碼分析
以經(jīng)常卡住的node-sass為例,下面是坑爹貨node-sass/lib/extensions.js的源碼部分,可看出它會(huì)默認(rèn)走GitHub Releases的托管地址,上面也分析過(guò)原因,在這里就不重復(fù)了。
function getBinaryUrl() {const site = getArgument("--sass-binary-site")|| process.env.SASS_BINARY_SITE|| process.env.npm_config_sass_binary_site|| (pkg.nodeSassConfig && pkg.nodeSassConfig.binarySite)|| "https://github.com/sass/node-sass/releases/download";const result = [site, "v" + pkg.version, getBinaryName()].join("/");return result; }而其他模塊也有類似的代碼,例如puppeteer這個(gè)安裝Chronium的源碼部分,有興趣的同學(xué)都去扒一下源碼,如出一轍。
async function download() {await compileTypeScriptIfRequired();const downloadHost =process.env.PUPPETEER_DOWNLOAD_HOST|| process.env.npm_config_puppeteer_download_host|| process.env.npm_package_config_puppeteer_download_host;const puppeteer = require("./index");const product =process.env.PUPPETEER_PRODUCT|| process.env.npm_config_puppeteer_product|| process.env.npm_package_config_puppeteer_product|| "chrome";const browserFetcher = puppeteer.createBrowserFetcher({product,host: downloadHost,});const revision = await getRevision();await fetchBinary(revision);// 還有很多 }坑貨小結(jié)
由于node-sass是大家經(jīng)常使用的項(xiàng)目開發(fā)依賴,也是安裝時(shí)間較長(zhǎng)和最常見到報(bào)錯(cuò)的模塊,在這里筆者就花點(diǎn)篇章分析和解決下可能會(huì)遇到的問(wèn)題。
node-sass安裝失敗的原因其實(shí)并不止上面提到的情況,我們可從安裝過(guò)程中分析并獲取突破口來(lái)解決問(wèn)題。根據(jù)npm i node-sass的輸出信息來(lái)分析,可得到下面的過(guò)程。
- 檢測(cè)項(xiàng)目node_modules的node-sass是否存在且當(dāng)前安裝版本是否一致
- Yes:跳過(guò),完成安裝過(guò)程
- No:進(jìn)入下一步
- 從NPM上下載node-sass
- 檢測(cè)全局緩存或項(xiàng)目緩存中是否存在binding.node
- Yes:跳過(guò),完成安裝過(guò)程
- No:進(jìn)入下一步
- 從Github Releases上下載binding.node并將其緩存到全局
- Success:將版本信息寫入package-lock.json
- Error:進(jìn)入下一步
- 嘗試本地編譯出binding.node
- Success:將版本信息寫入package-lock.json
- Error:輸出錯(cuò)誤信息
不難看出,node-sass依賴了一個(gè)二進(jìn)制文件binding.node,不僅需要從NPM上下載本體還需要從Github Releases上下載binding.node。
從實(shí)際情況來(lái)看,node-sass出現(xiàn)安裝過(guò)慢或安裝失敗的情況可能有以下幾種:
NPM鏡像托管在國(guó)外服務(wù)器上面有提到,在這里不再敘述,解決辦法如下。
nrm use taobao安裝過(guò)程中悄悄下載node-gyp上面有提到,在這里不再敘述,解決辦法如下。
npm config set disturl https://npm.taobao.org/mirrors/node/binding.node文件托管在國(guó)外服務(wù)器上面有提到,在這里不再敘述,解決辦法如下。
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/Node版本與node-sass版本不兼容node-sass版本兼容性好差,必須與Node版本對(duì)應(yīng)使用才行,詳情請(qǐng)參考node-sass-version-association,復(fù)用官方文檔的版本對(duì)照表,如下。
NodeJS|Minimum node-sass version|Node Module :-:|:-:|:-: Node 14|4.14+|83 Node 13|4.13+|79 Node 12|4.12+|72 Node 11|4.10+|67 Node 10|4.9+|64 Node 8|4.5.3+|57
執(zhí)行npm i安裝依賴前請(qǐng)確保當(dāng)前的Node版本和node-sass版本已兼容。
全局緩存中的binding.node版本與Node版本不兼容假如本地使用nvm或n進(jìn)行Node版本管理,并且已切換了Node版本,在安裝過(guò)程中可能會(huì)出現(xiàn)Windows/OS X/Linux 64-bit with Node.js 12.x這樣的提示,這種情況也是筆者經(jīng)常遇上的情況(筆者電腦里安裝了30多個(gè)Node版本并且經(jīng)常來(lái)回切換 )。
這是因?yàn)閚ode-sass版本和Node版本是關(guān)聯(lián)的(看上面的表格),修改Node版本后在全局緩存中匹配不到對(duì)應(yīng)的binding.node文件而導(dǎo)致安裝失敗。根據(jù)錯(cuò)誤提示,清理NPM緩存且重新安裝即可,解決辦法如下。
npm cache clean -fnpm rebuild node-sass所以沒什么事就別來(lái)回切換Node版本了,像筆者裝這么多Node版本也是逼不得已,老項(xiàng)目太多了 。
安裝失敗后重新安裝有可能無(wú)權(quán)限刪除已安裝的內(nèi)容,導(dǎo)致重新安裝時(shí)可能會(huì)產(chǎn)生某些問(wèn)題,建議將node_modules全部刪除并重新安裝。
在Mac系統(tǒng)和Linux系統(tǒng)上刪除node_modules比較快,但是在Windows系統(tǒng)上刪除node_modules就比較慢了,推薦大家使用rimraf刪除node_modules,一個(gè)Node版的rm -rf工具。
npm i -g rimraf在項(xiàng)目的package.json中加入npm scripts讓rimraf常駐。三大操作系統(tǒng)通用,非常推薦使用。
{"scripts": {"reinstall": "rimraf node_modules && npm i"} }一有什么安裝失敗、重新安裝之類的操作,先執(zhí)行npm run remove刪除node_modules再npm i。
npm run reinstall終極總結(jié)
如果看得有點(diǎn)亂,那下面直接貼代碼操作順序,建議前端小白在安裝完Node后立馬處理這些NPM鏡像問(wèn)題,防止后續(xù)產(chǎn)生不必要的麻煩(解決這些問(wèn)題是需要花費(fèi)時(shí)間的 )。
# 查看Node版本和NPM版本確認(rèn)已安裝Node環(huán)境 node -v npm -v# 安裝nrm并設(shè)置NPM的淘寶鏡像 npm i -g nrm nrm use taobao# 設(shè)置依賴安裝過(guò)程中內(nèi)部模塊下載Node的淘寶鏡像 npm config set disturl https://npm.taobao.org/mirrors/node/# 設(shè)置常用模塊的淘寶鏡像 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/ npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ npm config set puppeteer_download_host https://npm.taobao.org/mirrors/ npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/ npm config set sqlite3_binary_site https://npm.taobao.org/mirrors/sqlite3/ npm config set python_mirror https://npm.taobao.org/mirrors/python/針對(duì)node-sass的情況:
# 安裝rimraf并設(shè)置package.json npm i -g rimraf# 安裝前請(qǐng)確保當(dāng)前的Node版本和node-sass版本已兼容# 安裝失敗 npm cache clean -f npm rebuild node-sass 或 npm run reinstallpackage.json中加入npm scripts:
{"scripts": {"reinstall": "rimraf node_modules && npm i"} }總結(jié)
NPM鏡像問(wèn)題的坑確實(shí)很多,歸根到底還是網(wǎng)絡(luò)環(huán)境導(dǎo)致的。當(dāng)然這些問(wèn)題也阻礙不了樂(lè)于探索的我們,辦法總比困難多,堅(jiān)持下去始終能找到解決方式。
筆者總結(jié)出一個(gè)解決這種NPM鏡像問(wèn)題的好方法,遇到一些上面沒有提到的模塊,可嘗試通過(guò)以下步驟去解決問(wèn)題。
- 執(zhí)行npm i前設(shè)置淘寶鏡像,保證安裝項(xiàng)目依賴時(shí)都走國(guó)內(nèi)網(wǎng)絡(luò)
- 安裝不成功時(shí),肯定是在安裝過(guò)程中該模塊內(nèi)部又去下載了其他國(guó)外服務(wù)器的文件
- 在Github上克隆一份該模塊的源碼進(jìn)行分析,搜索包含base、binary、cdn、config、dist、download、host、mirror、npm、site、url等這樣的關(guān)鍵詞(自行探索,通常mirror的匹配度最高)
- 在搜查結(jié)果里查找形態(tài)像鏡像地址的代碼塊,再分析該代碼塊的功能并提取最終的鏡像地址,例如node-sass的sass_binary_site
- 去淘寶鏡像官網(wǎng)、百度、谷歌等網(wǎng)站查找你需要的鏡像地址,如果實(shí)在找不到就規(guī)范上網(wǎng)把國(guó)外服務(wù)器的鏡像文件拉下來(lái)搬到自己或公司的服務(wù)器上
- 設(shè)置模塊依賴的鏡像地址:npm config set <registry name> <taobao url / yourself url>
- 重新執(zhí)行npm i安裝項(xiàng)目依賴,大功告成
如果以上內(nèi)容幫不了你或在解決NPM鏡像問(wèn)題上還遇到其他坑,歡迎添加筆者微信一起交流。如有錯(cuò)誤地方也歡迎指出,如有更好的解決方法也可提上建議。
另外筆者花了一些時(shí)間用Xmind整理了本文內(nèi)容并生成一張知識(shí)點(diǎn)分布圖,濃縮就是精華。由于圖片太大無(wú)法上傳就保存到公眾號(hào)里,如有需要可關(guān)注IQ前端,掃描文章底部二維碼,后臺(tái)回復(fù)NPM鏡像獲取該圖片,希望能幫助到你。
結(jié)語(yǔ)
??關(guān)注+點(diǎn)贊+收藏+評(píng)論+轉(zhuǎn)發(fā)??,原創(chuàng)不易,鼓勵(lì)筆者創(chuàng)作更好的文章
關(guān)注公眾號(hào)IQ前端,一個(gè)專注于CSS/JS開發(fā)技巧的前端公眾號(hào),更多前端小干貨等著你喔
- 關(guān)注后回復(fù)關(guān)鍵詞免費(fèi)領(lǐng)取視頻教程
- 關(guān)注后添加我微信拉你進(jìn)技術(shù)交流群
- 歡迎關(guān)注IQ前端,更多CSS/JS開發(fā)技巧只在公眾號(hào)推送
總結(jié)
以上是生活随笔為你收集整理的iview admin npm install报错_聊聊NPM镜像那些险象环生的坑的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: sql查询百分之20到百分之40的数据_
- 下一篇: mac brew 安装_无用技能之 Ma