搭建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目錄整理完畢，而且添加了一些附帶各類做用的庫或者工具，下一步則會介紹項目打包部分的處理。