相關文章和閱讀順序

搭建Typescript+React項目模板(1) --- 項目初始化
搭建 Typescript+React 項目模板 (2) --- 提升開發體驗
搭建 Typescript+React 項目模板 (3) --- 整理項目和雜項
搭建 Typescript+React 項目模板 (4) --- 項目打包
搭建 Typescript+React 項目模板 (5) --- 團隊規范

文章已同步更新到掘金專欄(https://juejin.im/user/5a77c815f265da4e9518bebc/posts)

項目地址

前言

在上一篇提升開發體驗中，我們一下子集成了一堆插件和功能進去，導致項目結構比教混亂，重點問題就在webpack的相關配置項目錄build文件夾中，所以今天的工作較為輕松，重點就是進行項目結構整理，然后再進行一些雜項的添加。

1. 整理項目結構
2. 集成Ant Design并進行主題修改
3. 整合常用函數，并且讓所有組件繼承這些函數
4. 集成mobx進行項目的狀態管理
5. 使用react-hot-loader進行熱加載
6. 集成svg-component

整理項目結構

在做這一步的時候首先我們來看看現在的項目結構是怎么樣的：

image.png

針對webpack配置項的整理
做這一步的時候首先需要確定一點就是，我們根據什么來整理webpack配置項目錄呢？要確定這一點只需要查看一下webpack中有些什么配置，然后就可以根據每個配置項進行模塊劃分：

image.png

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

1. 首先在build中新建文件plugins.js，然后將原先的plugin里面的代碼拷貝過去:
   
   image.png
2. 在webpack.config.js中將plugins.js的內容引入進來即可:
   
   image.png

• 整合路徑選擇
  在webpack.config.js中你會看到許多使用path.join的地方，這一塊也可以抽取出來作為一個工具模塊。
  新建build/utils.js文件，然后寫入如下代碼，將路徑的目標指向根目錄，詳細路徑則通過參數的形式傳入:
  
  image.png
  
  之后在任何需要使用的地方引入這個函數使用即可:
  
  image.png

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

1. 在build中新建rules目錄，里面新建jsRules和styleRules文件：
   
   image.png
2. 將之前module中的loader配置一如對應文件中并導出，然后在webpack.config.js中引入:
   首先是jsRules內容:
   
   image.png
   
   然后是styleRules內容:
   
   image.png
   
   最后是引入rules后的webpack.config.js:
   
   image.png

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

集成antd

• 集成antd
  要集成antd非常簡單，只需要npm install -S antd即可，然后我們在components/Test組件中引入其中一個組件:
  

  image.png
  
  你會發現已經生效了:
  
  image.png

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

1. antd的樣式使用less進行編寫，對其主題的修改也就是對其中的less變量進行修改，所以想要修改主題需要安裝less和less-loader: npm install -D less less-loader
2. 然后我們在根目錄下添加一個theme.js文件，里面是需要修改的主題樣式代碼，具體有什么主題可以進行修改可以點擊這里查看:
   
   image.png
3. 然后編寫在build/rules/styleRules中添加針對less文件的loader，如下圖:
   引入上一步的主題文件:
   
   image.png
   
   
   image.png
4. 最后我們在components/Test組件中引入Button組件的樣式less文件:
   
   image.png
   
   此時可以查看效果，發現已經主題已經修改成功:
   
   image.png
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的教程直接配置即可:
   
   image.png
3. 回到Test組件中
   將import 'antd/lib/button/style/index.less'這句話刪掉，然后重新運行查看效果:
   
   image.png

整合常用函數

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

• 整合常用函數

1. 我們先在src下新建utils目錄，然后在utils中新建reactExt.tsx文件：
   
   image.png
2. 然后在tsconfig.json中設置好utils的路徑，方便以后的路徑引用:
   
   image.png
3. 在reactExt.tsx中引入antd常用組件，然后導出這個整合了antd組件的組件，當然你也可以把它叫做類，其中需要注意的是，因為以后的每個react組件使用的都是componentExt，然后在這里我們需要使用typescript的interface來對react組件的state和props進行數據類型上的限制，但與此同時并不能知道每個react組件針對state和props的interface是怎么樣的，所以在componentExt中需要用到泛型來靈活化interface:
   
   image.png
4. 最后在components/Test組件中引入comonentExt進行測試:
   
   image.png
   
   
   image.png
   
   以后如果有常用的功能性函數也可以往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中設置簡短路徑方便以后調用:
   
   image.png
   
   這一步在該博客中作用體現不大，但是對真實項目的條理性是存在較好作用的。
   如下圖:
   
   image.png

• 創建store

1. 新建src/store目錄用于存放store文件，然后在該目錄下新建globalStore目錄和其中的index.tsx文件:
   
   image.png
2. 然后在這個index.tsx文件中有如下代碼:
   其中的observable和action的功能請自行查看mobx文檔:
   
   image.png
3. 然后新建src/store/index.tsx文件用于導出這些store:
   
   image.png

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

  image.png
  
  這里面的configure({enforceActions: 'observed'})用于限制被observable(也就是store中添加了@observable)的數據的修改方式，讓其只能添加了@action的函數中進行修改。

• 編寫Counter組件進行測試

1. 我們去到src/containers/views目錄中，新增Counter/index.tsx，并寫入如下代碼:
   
   image.png
2. 然后將這個組件用mobx-react變為可觀測對象，并使用@inject注入globalStore：
   
   image.png
3. 最后我們在src/index.tsx中引入Counter組件，順便看看它的props中是否帶有數據:
   
   image.png
   
   
   image.png
4. 最后回到Counter組件中編寫方法檢驗功能是否正常:
   
   image.png
   
   
   功能已經可以使用

• 給store添加全局typescript校驗
  在上面的例子中雖然我們在功能上已經可以正常的使用了，但是顯而易見的是有報錯，這個錯誤是因為沒有填寫針對組件props的驗證接口導致typescript認為globalStore不存在而導致的。我們可以寫成如下代碼解決問題:
  
  image.png
  
  但是每個引入了globalStore的組件都需要寫一次顯得非常麻煩，那么我們可以將IGlobalStore這個校驗接口寫成全局的校驗接口，直接以如下圖形式驗證即可:
  
  image.png
  
  步驟如下:

1. 我們在src/store/globalStore下新建type.d.ts:
   
   image.png
2. 去到globalStore/index.tsx中，將GlobalStore類導出，我們將會利用這個類作為typescript校驗接口來使用(這種用法可以點這里查看詳情):
   
   image.png
3. 在type.d.ts中引入這個類，然后定義并導出一個全局命名空間(該用法詳解點這里)，接著在這個命名空間中把接口導出:
   
   image.png
4. 回到Counter組件中，將接口改寫為如下:
   
   image.png
   
   這里注意需要添加?，因為這個屬性是從store中拿過來的，不填寫的話，父組件會報錯說沒有傳這個值。
   但是因為添加了?，所以這個globalStore驗證為不一定有，從而在組件中會有如下報錯:
   
   image.png
   
   這個時候我們可以去tsconfig.json中將strictNullChecks項置為false，去掉null和undefined的檢測即可：
   
   image.png

5. 到了這一步我們集成Mobx就成功了，并且也針對store添加了對應的typescript驗證:

   
   
   image.png

使用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中進行配置即可:
   
   image.png
3. 接著我們去到Counter組件中引入react-hot-loader中的hot方法，直接以裝飾器的形式包裹組件:
   
   image.png
4. 最后再去package.json中，在dev命令后面加上--hot即可:
   
   image.png
5. 回到Counter組件中做個檢測，先增加一些數字，然后在增加字樣后面加上幾個字符，可以看到頁面更新的同時保留了數據:
   
   更新前
   
   
   更新后
   
   實際上我們在控制臺看到輸出這個字樣就已經成功了:
   
   image.png

集成svg-component

在前端開發中，svg格式的圖片使用的是非常頻繁的，而集成了svg-component后，我們可以將svg圖片以組件的形式引入并使用:

image.png

image.png

1. 要集成svg-component我們首先要安裝@svgr/webpack: npm install -D @svgr/webpack，這是一個loader；
2. 然后我們在build/rules中新建fileRules.js文件，將svg格式文件用這個loader進行編譯:
   
   image.png
   
   然后在webpack.config.json中導入并重啟項目:
   
   image.png
3. 接著我們隨便找一個svg格式圖片在Counter中引入并測試，雖然可以使用了，但是也導致了一個typescript的報錯說找不到模塊:
   
   image.png
   
   導致這個錯誤的原因是svg圖片本身并不具備模塊化的功能，也不提供模塊導出，所以在導入的時候是不能識別的，要解決這個問題可以模仿我們之前使用css moudles的方式，給它聲明一個模塊:
   我們在typings目錄下新建svg.d.ts文件，并寫入如下代碼:
   
   image.png
   
   這個時候還可以為svg-component的使用提供代碼提示和傳入屬性校驗的支持:
   我們聲明一個接口，然后在聲明的模塊中用這個接口作為內容:
   
   image.png
   
   這個接口使用的是react的無狀態組件聲明，傳入屬性則為svg文件自帶的屬性比如color width之類的，然后我們就可以愉快地使用svg-comonent了:
   
   image.png

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