多React Native項目時依賴管理的最佳實踐

AbnerMing 發(fā)布于2019-08-19 17:20 / 2051人閱讀

摘要：此時會把當前路徑作為一個本地，在全局路徑下創(chuàng)建一個軟鏈接。所有依賴于全局路徑下的都必須是一個版本的，并沒有提供多版本號依賴的解決方法。因此，還是建議選擇一個常用的版本安裝在全局路徑，個別需求其他版本號的的項目，使用來配置局部依賴。

在實際開發(fā)過程中，經(jīng)常需要同時運行和修改多個React Native工程，比如運行github上的開源項目以觀察某種控件的實際效果。那么此時，各項目下的初始化(npm install)就會非常的痛苦，因為React Native的文件非常大，以0.17.0為例，安裝后達到309MB。盡管，我們可以通過阿里npm等鏡像站的方式加速下載的過程，但是下載后的進一步編譯也非常地耗時。

此外，多React Native工程還帶來了React Native自身的冗余，如果創(chuàng)建了十幾個工程，那么多占用的空間輕松達到3GB以上，非常地不友好。

npm link原理

我的解決思路是：用npm link替代npm install。npm link [package-name]命令的原理是，去[prefix]/lib/node_modules/下檢索是否已經(jīng)全局安裝了當前的package，如果是，則直接用軟鏈接的方法在本地路徑指向全局package。如果沒檢索到，則會先在全局路徑下安裝該package，再去建立軟鏈接。npm獲取全局路徑的命令是：npm config get prefix。

需要注意的是，有package.json的路徑下，不要類比npm install，就這么執(zhí)行npm link。此時npm link會把當前路徑作為一個本地package，在全局路徑下創(chuàng)建一個軟鏈接。由此可知，npm link并不會像npm install一樣，讀取package.json中的依賴并自動配置。

配置過程

npm install -g react-native
cd [program_path]
npm link react-native

簡單三步搞定。然后運行react-native run-android，打個Android包檢測一下。

納尼，報錯如下：

Looks like you installed react-native globally, maybe you meant react-native-cli?
To fix the issue, run:
npm uninstall -g react-native
npm install -g react-native-cli

原因很簡單，react-native框架其實由兩個部分組成：react-native和react-native-cli，前者用于提供編譯環(huán)境，后者則是封裝了react-native開發(fā)過程中所要用到的命令，如react-native start，實質就是封裝了sh ./node_modules/react-native/packager/packager.sh。

官方文檔要求全局安裝react-native-cli，但是局部安裝react-native，這是有原因的。如果你先全局安裝了react-native-cli，會在/usr/local/bin下生成一個名為react-native的軟鏈接，其指向為：react-native -> ../lib/node_modules/react-native-cli/index.js*。而隨后再次"全局"安裝react-native的時候，又會生成一個名為react-native的軟鏈接，覆蓋了react-native-cli安裝時生成的軟鏈接，其指向是：../lib/node_modules/react-native/local-cli/wrong-react-native.js。由此可見，React Native官方已經(jīng)意識到了這個問題，然而不知何原因并不推薦全局安裝React Native。然而筆者從節(jié)約硬盤空間和加快初始化的角度，認為還是有必要全局安裝React Native，從而快速npm link的，所以有必要研究該報錯的原理。

因此，針對這個報錯，兩種解決方法：

先npm install -g react-native，再npm install -g react-native-cli。然而，如果以后使用過程中又升級了全局React Native，此時需看方案2。

cd /usr/local/bin，ln -s ../lib/node_modules/react-native-cli/index.js react-native，即可重新創(chuàng)建一個指向react-native-cli的軟鏈接。如果prefix的地址不是默認的，則ln -s prefix/lib/node_modules/react-native-cli/index.js react-native。

缺陷

當前這個自動添加統(tǒng)一依賴的方法，存在一個問題。所有依賴于全局路徑下的React Native都必須是一個版本的，npm link并沒有提供多版本號依賴的解決方法。因此，還是建議選擇一個常用的React Native版本安裝在全局路徑，個別需求其他版本號的React Native的項目，使用npm install來配置局部依賴。

插說一句，npm自身的依賴管理設計還是非常優(yōu)秀的，然而React Native實在是太大了，而且我們完全有理由相信，他會更大。他其實應該是與Android SDK, Java SDK一般重量級的開發(fā)SDK，因此更應該借鑒rvm，設計一個React Native Version Manager。然而卻委身于node_modules，因而產生了這種無奈的冗余。

====================================
如果您覺得我的文章對您有所啟迪，請點擊文末的推薦按鈕，您的鼓勵將會成為我堅持寫作的莫大激勵。 by DesGemini

云服務器 GPU云服務器云管理最佳實踐 api設計的最佳實踐 React Native webrtc react native

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78440.html

iOS原生混合RN開發(fā)最佳實踐

摘要：交流群也定期更新最新的學習資料給大家，謝謝大家支持小伙伴們掃下方二維碼加入技術交流群 iOS原生混合RN開發(fā)詳解做過原生iOS開發(fā)或者Android開發(fā)的同學們肯定也都了解Hybrid，有一些Hybrid的開發(fā)經(jīng)驗，目前我們企業(yè)開發(fā)中運用最廣泛的Hybrid App技術就是原生與H5 hybrid，在早期的時候，可能部分同學也接觸過PhoneGap等hybrid技術，今天我們就簡單來...

B0B0 2019-08-23 11:49 評論0 收藏0
前端周刊第64期：你真的會提問么？

摘要：但是究竟什么是區(qū)塊鏈呢如何基于區(qū)塊鏈構建去中心化的應用這個系列文章很有料，有圖文解釋有代碼實例，非常適合入門。想知道我接下來會寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領域跟上時代的腳步。 showImg(https://segmentfault.com/img/remote/1460000010417511); 共 2044 字，讀完需 4 分鐘。本期以《提問的智慧》作...

wfc_666 2019-08-20 18:25 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發(fā)了很多開發(fā)者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
【譯】統(tǒng)一樣式語言

摘要：原文地址原文作者譯文出自掘金翻譯計劃譯者校對者統(tǒng)一樣式語言在過去幾年中，我們見證了的興起，尤其是在社區(qū)。根本上來說，純粹用于只是一個命名規(guī)范，它要求樣式的類名要遵守的模式。原文地址：A Unified Styling Language 原文作者：Mark Dalgleish 譯文出自：掘金翻譯計劃譯者：ZhangFe 校對者：JackGit,yifili09 統(tǒng)一樣式語言在過...

fjcgreat 2019-08-29 12:49 評論0 收藏0