React引用新姿式

衆所周知，React自己推薦兩種引用方法，一種是經過HTML的script標籤引入React，另外一種是使用例如Create-react-app等腳手架啓動大型React應用。前者是將React集成到現有項目最簡單的方式，而大多數人在使用React框架的時候，每每選擇後者，由於後者更方便擴展文件和組件的規模、使用npm的第三方庫。此時，咱們須要將React安裝在項目的node_modules中，並寫入package.json文件的dependence字段，並使用yarn.lock鎖住版本。這樣，當多人協做完成項目或更換設備初始化代碼時都會將因此依賴按照鎖定的版本安裝，保證項目的正常運行。這是一種很廣泛、很常見的用法，具體內容無需贅述。在此，僅介紹一下咱們的使用方法。 咱們使用script的方式引入React：

然而咱們項目中依然使用：

同時咱們並不將React安裝到項目依賴中。 看到這不少人會問，編輯器不會提示找不到react嗎？ 我給出你的答案確定是不會。 爲何呢？由於咱們的腳手架jdwtool作了一步處理。你們都知道，import尋找依賴的機制是從當前項目中的node_module開始，依次往父級查找，最後查找到系統目錄，若是在此過程當中完成匹配，那查找到此爲止。顯然，咱們引入的react並不會查找到，由於咱們在系統目錄也並未安裝，那麼到底怎麼查找到的呢？這個就須要 tsconfig path來爲咱們助力了。咱們使用tsconfig中的path字段進行路徑映射，當項目中沒法匹配到依賴時，會按照path中給出的字段進行匹配，直到匹配完成。咱們動態生成的path以下：

其中，映射的路徑爲xyz，先從x開始，直到z匹配完成。這裏麪包含了咱們的jdwtool的安裝路徑，咱們是將React安裝到了jdwtool的node_modules下。所以，項目中import react時，可從jdwtool的node_modules下查找到react，保證項目的正常運行。 下面，咱們能夠看一下咱們項目的dependence字段：

從圖中能夠看到，項目中並不會安裝一些通用的依賴，全部通用的依賴都安裝到了jdwtool下，這就是咱們總體的實現思路。 這麼作到底有什麼好處呢？

• 一次加載，多處使用。加載一次cdn上的react文件，任何請求該文件的項目均可走緩存，而無需請求。
• 方便升級react版本。你們都知道，react總會給咱們帶來不少驚喜，嘗試新版本老是變的火燒眉毛。使用這種方法，能夠輕鬆升級react版本，而無需擔憂從新打包vendor。
• 腳手架安裝依賴，項目初始化更快。咱們不少的依賴都安裝在了腳手架中，那麼項目中安裝的依賴變的很是少，這使得每一個人clone下項目後，無需花費過多的時間等待依賴的安裝。
• 腳手架統一升級依賴版本。咱們的依賴都安裝在腳手架的安裝目錄下，當咱們須要升級依賴版本時，只須要更新腳手架便可。

看到這也許有人會問，假如咱們的某個項目不想使用腳手架的依賴怎麼辦？這個只須要在項目中安裝指定版本的依賴便可。 那麼咱們爲何不將antd使用script的方式引入呢？由於antd咱們使用了按需加載，而不像react這種全量加載。所以，對於須要全量加載的依賴，能夠嘗試使用這種方式引入。