搭建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目录整理完毕，而且添加了一些附带各类做用的库或者工具，下一步则会介绍项目打包部分的处理。