搭建Typescript+React项目模板(3) --- 整理项目和杂项

前言

在上一篇提升开发体验中，我们一下子集成了一堆插件和功能进去，导致项目结构比教混乱，重点问题就在webpack的相关配置项目录build文件夹中，所以今天的工作较为轻松，重点就是进行项目结构整理，然后再进行一些杂项的添加。

1. 整理项目结构

2. 集成Ant Design并进行主题修改

3. 整合常用函数，并且让所有组件继承这些函数

4. 集成mobx进行项目的状态管理

5. 使用react-hot-loader进行热加载

6. 集成svg-component

整理项目结构

在做这一步的时候首先我们来看看现在的项目结构是怎么样的：

image.png

那么当前最先需要做的工作就是进行build文件夹下webapck的配置项整理。

针对webpack配置项的整理
做这一步的时候首先需要确定一点就是，我们根据什么来整理webpack配置项目录呢？要确定这一点只需要查看一下webpack中有些什么配置，然后就可以根据每个配置项进行模块划分：

image.png

在这份配置项中，因为entry、output、resolve内容相对较少，往后也不会有太多内容的添加，所以可以忽略。

• 首先将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目录整理完毕，并且添加了一些附带各种作用的库或者工具，下一步则会介绍项目打包部分的处理。

作者：大春春
链接：https://www.jianshu.com/p/1798ed80f70d