react-native 開發前的見面禮 — 誤入依賴坑

devsai發表於2019-02-24

本文同步更新於:www.devsai.com

對前端開發的同學來說,react native開發肯定是讓人興奮,用javaScript來開發app應用,想想就激動。

正好,有這麼個機會,要用rn開發個功能,程式碼已由同事開發了部分。

所以,我從git上更新最新的程式碼後就想把程式碼跑起來,而想程式碼跑起來要做的第一件事便是安裝依賴。

誰會想到,就裝個依賴而已,而我卻掉進了這坑裡,這個千萬分之一的概率都不知道有沒有的坑。

裝個依賴而已

我想,很多的同學,都是用npm做依賴包管理的吧。

npm的訪問速度實在太慢了,慢得感覺不到有資料過來,怎麼可以忍受我們 寶貴的時間就這麼白白的被浪費了。

於是乎,我們萬能的淘寶出了個淘寶映象,通過這映象去安裝依賴包,這速度,真是飛一般的感覺。

大廠就是大廠,對大廠就有一種莫名的信任感,據說用的人還挺多。

隨便貼下怎麼用著映象吧

npm install cnpm -g --registry=https://registry.npm.taobao.org複製程式碼

然後就可以使用cnpm安裝各種依賴包了,用法跟使用npm一樣。

聰明的我,也是這麼做的。

掉坑裡了

那麼,問題來了,我通過cnpm i用了眨了下眼睛的時間安裝完了依賴後。

直接執行了如下命令:

react-native run-ios複製程式碼

本來的反應應該是,經過一系列的編譯,啟動模擬器,同時啟動本地服務用來熱更新程式碼

可就在啟動本地服務時卻報瞭如下的錯,本地服務直接終止了。

react-native 開發前的見面禮 — 誤入依賴坑

而查了下src中的javaScript程式碼,並沒有使用到on啊。

頓時感覺不好了,一頭霧水,這是啥情況呢, 之後就不斷的做各種的猜測與嘗試

是不是node版本不對呢,問題之前開發的同事用的node版本,發現不同,立馬裝上同版本的node,可還是不行

是不是xcode的版本問題呢,因為執行react-native run-ios會呼叫xcode進行build,報著試試看的心態,升級了xcode,發現還是不對

是不是依賴沒裝好呢,於是清了./node_modules目錄,再安裝了一遍,結果依然不行。

在網上找了一大圈也沒找到個原因,這TM是什麼情況。。。

正當要絕望之時,突然想到之前裝的react native的官方demo, 進入目錄執行react-native run-ios,神奇般的沒有任何報錯的起來了,我的天吶~

這時,我已經可以很明確的知道,肯定不是node的問題,也不是xcode的問題,那麼是不是依賴的問題呢,

於是刪了官方例子中./node_modules的檔案,用cnpm i又安裝一遍,再次執行react-native run-ios,居然也不行了,報了同樣的錯。

好吧, 到這裡,已經非常的明顯了,就是安裝的依賴包引起的。

於是向同事討要了其他的映象地址http://r.cnpmjs.org,我再使用如下命令在專案中嘗試安裝了下依賴包

npm i  --registry http://r.cnpmjs.org/複製程式碼

果不其然,再次執行react-native run-ios,很順利的跑起來了。

原來都是cnpm惹的禍,妄我這麼的信任你。

當然了,也是不說通過cnpm安裝的依賴就一定會報錯了,我只是中了這千萬分之一的概率。

還沒完

寫到這應該是好結束了,因為問題已經解決了。

可是,到底是載入了哪個依賴包出的問題呢,為什麼用cnpm安裝就會有問題呢,我們還是不知道。

貫徹我一向的刨根問底的精神,我又經過了我多次的嘗試,發現問題就出在react-native這個最主要的包上。這就尷尬了,總不能不裝這個包吧。

那麼,react-native包為什麼就不行呢,通過檢視以cnpmnpm i --registry http://r.cnpmjs.org/兩種方式生成的node-modules中的檔案發現,cnpm生成的目錄都是個symlink符號連結,真正的資料夾是平級目錄下的隱藏資料夾,以版本號開頭命名;而通過另一種方式生成的就是正常的資料夾了。

cnpm到底幹了啥呢,閱讀了下在github上的說明,裡面有這麼一段:

react-native 開發前的見面禮 — 誤入依賴坑

原來上面說的符號連結就是這麼來的,而且還告訴我們可以切換成用npm來安裝,於是,再次刪除./node_modules,執行cnpm i --by=npm , 發現node_modules中不再是符號連結了,再執行react-native run-ios後,程式順利的執行了,當然,當改成了npm方式安裝,就體驗不到cnpm帶給你的飛一般的安裝速度了。

所以,出錯的原因應該是使用了npminstall來安裝依賴,通過上面一刨,可以知道,cnpm還是可以用的。只要改下它使用的預設安裝方法。

對於npminstall安裝為什麼會導致依賴出錯,就不再做深入的研究了。感興趣的同學可以繼續研究。

最後

寫下此篇,望能幫助到同樣中了這千萬分之一概率的同學們,及時發現問題所在。

相關文章