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

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

Ant Design
mobx
react-hot-loader
svg-component

整理项目结构

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

的配置项整理。

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

内容相对较少，往后也不会有太多内容的添加，所以可以忽略。

• 首先将 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 Design UI库(简称 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' 这句话删掉，然后重新运行查看效果:

   

整合常用函数

在上一步中，我们集成了 antd UI库，在这个库中有许多东西是非常常用的，例如消息组件 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目录整理完毕，并且添加了一些附带各种作用的库或者工具，下一步则会介绍项目打包部分的处理。