美文网首页让前端飞饥人谷技术博客前端收藏
搭建Typescript+React项目模板(3) --- 整理

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

作者: 大春春 | 来源:发表于2018-09-20 17:34 被阅读1次

    相关文章

    在看这篇文章之前,建议先阅读下面两篇文章。
    搭建 Typescript+React 项目模板 (1) --- 项目初始化
    搭建 Typescript+React 项目模板 (2) --- 提升开发体验

    前言

    在上一篇提升开发体验中,我们一下子集成了一堆插件和功能进去,导致项目结构比教混乱,重点问题就在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
    在这份配置项中,因为entryoutputresolve内容相对较少,往后也不会有太多内容的添加,所以可以忽略。
    • 首先将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目录,里面新建jsRulesstyleRules文件:
      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变量进行修改,所以想要修改主题需要安装lessless-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组件的stateprops进行数据类型上的限制,但与此同时并不能知道每个react组件针对statepropsinterface是怎么样的,所以在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文件中有如下代码:
      其中的observableaction的功能请自行查看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,去掉nullundefined的检测即可:
      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目录整理完毕,并且添加了一些附带各种作用的库或者工具,下一步则会介绍项目打包部分的处理。

    相关文章

      网友评论

      本文标题:搭建Typescript+React项目模板(3) --- 整理

      本文链接:https://www.haomeiwen.com/subject/dpkzgftx.html