搭建Typescript+React專案模板(3) --- 整理專案和雜項

相關文章和閱讀順序

1.專案初始化

2.提升開發體驗

3.整理專案和雜項

4.專案打包

5.團隊規範

專案地址

前言

在上一篇提升開發體驗中，我們一下子整合了一堆外掛和功能進去，導致專案結構比教混亂，重點問題就在webpack的相關配置專案錄build資料夾中，所以今天的工作較為輕鬆，重點就是進行專案結構整理，然後再進行一些雜項的新增。

1. 整理專案結構
2. 整合Ant Design並進行主題修改
3. 整合常用函式，並且讓所有元件繼承這些函式
4. 整合mobx進行專案的狀態管理
5. 使用react-hot-loader進行熱載入
6. 整合svg-component

整理專案結構

在做這一步的時候首先我們來看看現在的專案結構是怎麼樣的：

那麼當前最先需要做的工作就是進行build資料夾下webapck的配置項整理。

針對webpack配置項的整理 做這一步的時候首先需要確定一點就是，我們根據什麼來整理webpack配置專案錄呢？要確定這一點只需要檢視一下webpack中有些什麼配置，然後就可以根據每個配置項進行模組劃分：

在這份配置項中，因為entry、output、resolve內容相對較少，往後也不會有太多內容的新增，所以可以忽略。

• 首先將plugins相關內容移出來：

1. 首先在build中新建檔案plugins.js，然後將原先的plugin裡面的程式碼拷貝過去:

   

2. 在webpack.config.js中將plugins.js的內容引入進來即可:

   

• 整合路徑選擇 在webpack.config.js中你會看到許多使用path.join的地方，這一塊也可以抽取出來作為一個工具模組。 新建build/utils.js檔案，然後寫入如下程式碼，將路徑的目標指向根目錄，詳細路徑則通過引數的形式傳入:

  

  之後在任何需要使用的地方引入這個函式使用即可:

  

• 將module相關內容移出來: 因為在module項中相關的配置相對較多，涵蓋了對ts(x)和scss等相關檔案的loader，以後還需要新增針對圖片等檔案型別的loader，所以這一塊需要分的更加細一些:

1. 在build中新建rules目錄，裡面新建jsRules和styleRules檔案：

   

2. 將之前module中的loader配置一如對應檔案中並匯出，然後在webpack.config.js中引入: 首先是jsRules內容:

   

   然後是styleRules內容:

   

   最後是引入rules後的webpack.config.js:

   

至此我們就將webpack的配置項分離了出來，接下來我們整合Ant DesignUI庫(簡稱antd)，並且修改其主題色。

整合antd

• 整合antd 要整合antd非常簡單，只需要npm install -S antd即可，然後我們在components/Test元件中引入其中一個元件:

  

  你會發現已經生效了:

  

• 修改antd的主題配色 通常在開發中，我們採用的配色不是antd原本的配色，如果大面積引用antd元件的話，一個個去修改配色確實是非常麻煩的事情，於是這個時候就需要一次性對antd的主題色進行修改。

1. antd的樣式使用less進行編寫，對其主題的修改也就是對其中的less變數進行修改，所以想要修改主題需要安裝less和less-loader: npm install -D less less-loader
2. 然後我們在根目錄下新增一個theme.js檔案，裡面是需要修改的主題樣式程式碼，具體有什麼主題可以進行修改可以點選這裡檢視:

   

3. 然後編寫在build/rules/styleRules中新增針對less檔案的loader，如下圖: 引入上一步的主題檔案:

   

   

4. 最後我們在components/Test元件中引入Button元件的樣式less檔案:

   

   此時可以檢視效果，發現已經主題已經修改成功:

   

5. 存在的問題： 這個時候進行antd元件的引入和主題修改的步驟中還是存在一些問題的，比如在引入某個元件的同時還需要手動引入其對應的less檔案，這是非常麻煩的一件事，那麼找我們需要解決的就是在引入antd元件的同時也自動引入其對應的less檔案。 另外，使用import {Button } from 'antd'這樣的引入方式存在一個很大的弊端，就是在引入其中某個元件的同時會把整個antd檔案都引入進來，影響構建速度，而且打包後體積會變大，這樣的話我們還需要做antd的按需載入。 所以接下來我們需要解決掉這兩個問題，而這兩個問題也是可以同時解決的。

• antd按需載入

1. 在antd官網中推薦使用babel-plugin-import來做按需載入，但是我們的專案用的是typescript，走的是awesome-typescript-loader編譯，所以在我們的專案中babel-plugin-impor是不生效的，這時候需要就需要一個叫做ts-import-plugin的外掛 npm install -D ts-import-plugin
2. 第二步我們需要在build/rules/jsRules.js中進行配置，根據ts-import-plugin的教程直接配置即可:

   

3. 回到Test元件中 將import 'antd/lib/button/style/index.less'這句話刪掉，然後重新執行檢視效果:

   

整合常用函式

在上一步中，我們整合了antdUI庫，在這個庫中有許多東西是非常常用的，例如訊息元件message和通知元件notification，但是要用到這兩個元件的話就得引入，當使用次數較多的時候，我們可以考慮將其整合在一個react元件中，然後所有的元件都繼承這個元件即可，這樣做的好處是當以後新增了例如axios這樣的常用庫的時候也可以整合到這個react元件中，使繼承這個react元件的元件都可以用到。

• 整合常用函式

1. 我們先在src下新建utils目錄，然後在utils中新建reactExt.tsx檔案：

   

2. 然後在tsconfig.json中設定好utils的路徑，方便以後的路徑引用:

   

3. 在reactExt.tsx中引入antd常用元件，然後匯出這個整合了antd元件的元件，當然你也可以把它叫做類，其中需要注意的是，因為以後的每個react元件使用的都是componentExt，然後在這裡我們需要使用typescript的interface來對react元件的state和props進行資料型別上的限制，但與此同時並不能知道每個react元件針對state和props的interface是怎麼樣的，所以在componentExt中需要用到泛型來靈活化interface:

   

4. 最後在components/Test元件中引入comonentExt進行測試:

   

   

   以後如果有常用的功能性函式也可以往components/reactExt中進行新增。

整合mobx

mobx是react技術棧中一款優秀的狀態管理工具，它具有資料監測的功能，並且比redux用起來更加方便，也能脫離react進行單獨使用，安裝mobx只需要npm install -S mobx即可，同時也要安裝他和react連線的工具npm install -S mobx-react。 接下來就以一個經典的計算器元件來測試mobx。

• 準備工作 在進行測試之前，我們還需要整理一下元件存放的目錄。首先區分一下元件目錄的作用。

1. components目錄用於存放通用元件，該目錄存放的元件不包含任何業務性功能。
2. 新建src/containers/views目錄，這個目錄是用於存放業務元件的，並且這些元件不能複用。
3. 新建src/containers/shared目錄，這個目錄用於存放可以複用的業務元件。
4. 在tsconfig.json中設定簡短路徑方便以後呼叫:

   

   這一步在該部落格中作用體現不大，但是對真實專案的條理性是存在較好作用的。 如下圖:

   

• 建立store

1. 新建src/store目錄用於存放store檔案，然後在該目錄下新建globalStore目錄和其中的index.tsx檔案:

   

2. 然後在這個index.tsx檔案中有如下程式碼: 其中的observable和action的功能請自行檢視mobx文件:

   

3. 然後新建src/store/index.tsx檔案用於匯出這些store:

   

• 連線store 建立了store之後我們還需要將其和react進行連線，這個時候就需要用到mobx-react這個庫，我們去到src/index.tsx中進行修改:

  

  這裡面的configure({enforceActions: 'observed'})用於限制被observable(也就是store中新增了@observable)的資料的修改方式，讓其只能新增了@action的函式中進行修改。

• 編寫Counter元件進行測試

1. 我們去到src/containers/views目錄中，新增Counter/index.tsx，並寫入如下程式碼:

   

2. 然後將這個元件用mobx-react變為可觀測物件，並使用@inject注入globalStore：

   

3. 最後我們在src/index.tsx中引入Counter元件，順便看看它的props中是否帶有資料:

   

   

4. 最後回到Counter元件中編寫方法檢驗功能是否正常:

   

   

• 給store新增全域性typescript校驗 在上面的例子中雖然我們在功能上已經可以正常的使用了，但是顯而易見的是有報錯，這個錯誤是因為沒有填寫針對元件props的驗證介面導致typescript認為globalStore不存在而導致的。我們可以寫成如下程式碼解決問題:

  

  但是每個引入了globalStore的元件都需要寫一次顯得非常麻煩，那麼我們可以將IGlobalStore這個校驗介面寫成全域性的校驗介面，直接以如下圖形式驗證即可:

  

  步驟如下:

1. 我們在src/store/globalStore下新建type.d.ts:

   

2. 去到globalStore/index.tsx中，將GlobalStore類匯出，我們將會利用這個類作為typescript校驗介面來使用(這種用法可以點這裡檢視詳情):

   

3. 在type.d.ts中引入這個類，然後定義並匯出一個全域性名稱空間(該用法詳解點這裡)，接著在這個名稱空間中把介面匯出:

   

4. 回到Counter元件中，將介面改寫為如下:

   

   這裡注意需要新增?，因為這個屬性是從store中拿過來的，不填寫的話，父元件會報錯說沒有傳這個值。 但是因為新增了?，所以這個globalStore驗證為不一定有，從而在元件中會有如下報錯:

   

   這個時候我們可以去tsconfig.json中將strictNullChecks項置為false，去掉null和undefined的檢測即可：

   

5. 到了這一步我們整合Mobx就成功了，並且也針對store新增了對應的typescript驗證:

   

使用react-hot-loader進行熱載入

這一步主要針對的是webpack-dev-server的頁面自動重新整理功能不能保持資料一直都在，有時候在更新元件程式碼後需要保持資料不變的場景就會很不方便，所以這個時候就需要用到react-hot-loader來進行頁面程式碼變更檢測並找到變更部分進行更新，同時保證資料不變。

1. 首先我們安裝它npm install -D react-hot-loader
2. 然後我們還要用到它裡面的react-hot-loader/babel，但是因為我們使用了awesome-typescript-loader，所以不需要在根目錄新增.babelrc檔案了，直接進到build/rules/jsRules.js中進行配置即可:

   

3. 接著我們去到Counter元件中引入react-hot-loader中的hot方法，直接以裝飾器的形式包裹元件:

   

4. 最後再去package.json中，在dev命令後面加上--hot即可:

   

5. 回到Counter元件中做個檢測，先增加一些數字，然後在增加字樣後面加上幾個字元，可以看到頁面更新的同時保留了資料:

   

   

   實際上我們在控制檯看到輸出這個字樣就已經成功了:

   

整合svg-component

在前端開發中，svg格式的圖片使用的是非常頻繁的，而整合了svg-component後，我們可以將svg圖片以元件的形式引入並使用:

1. 要整合svg-component我們首先要安裝@svgr/webpack: npm install -D @svgr/webpack，這是一個loader；
2. 然後我們在build/rules中新建fileRules.js檔案，將svg格式檔案用這個loader進行編譯:

   

   然後在webpack.config.json中匯入並重啟專案:

   

3. 接著我們隨便找一個svg格式圖片在Counter中引入並測試，雖然可以使用了，但是也導致了一個typescript的報錯說找不到模組:

   

   導致這個錯誤的原因是svg圖片本身並不具備模組化的功能，也不提供模組匯出，所以在匯入的時候是不能識別的，要解決這個問題可以模仿我們之前使用css moudles的方式，給它宣告一個模組: 我們在typings目錄下新建svg.d.ts檔案，並寫入如下程式碼:

   

   這個時候還可以為svg-component的使用提供程式碼提示和傳入屬性校驗的支援: 我們宣告一個介面，然後在宣告的模組中用這個介面作為內容:

   

   這個介面使用的是react的無狀態元件宣告，傳入屬性則為svg檔案自帶的屬性比如color width之類的，然後我們就可以愉快地使用svg-comonent了:

   

至此我們就把webpack目錄整理完畢，並且新增了一些附帶各種作用的庫或者工具，下一步則會介紹專案打包部分的處理。