从零开始配置TypeScript+React+Webpack系列开发环境

 浆糊之家   2019-06-30 22:29   0 views 热度值  网名www.fybqq.com

开始学习前关注几个说明:

  1. 教程针对人群是有过React + Redux经验,并且想在新项目中使用TypeScript的人(或者是想自己从零开始配置开发环境的)
  2. 教程只配置了开发环境,并没有配置生产环境。但是给架构好了,只需要你参考生产环境在配置一份合适自己生产环境参数即可
  3. 本配置教程是在win环境下制作了
  4. 因为框架和各插件版本升级未来是否会出现兼容或其它问题就不向未来兼容了,如果因为各插件版本问题出现的问题,本文会给出我已经配置好的版本,可按照我的版本指定安装即可

PS:至于文档如有问题欢迎留言指出,文章偏长的教程,细节中可能会和自己实战中会有点偏差,尽量还原过程细节。

安装初始依赖

1、先创建项目目录,在进入目录内初始化项目 npm init,相信这个就不用我细说了? 输入项目名称和版本等信息

2、首先安装webpack和 webpack-dev-server启服务用的

 

3、安装React和Types中React的声明类型文件,以及node环境中的声明类型文件

上面@types开头的包都是typeScript的声明文件,你可以进入node_modules/@types/XX/index.d.ts进行查看。

像未来你使用react-router或是其它插件,你可以搜索一下npm包,是否有相应的@types/包名   声明类型文件,

 

4、接下来安装TypeScript,ts-loader和source-map-loader

ts-loader可以让Webpack使用TypeScript的标准配置文件tsconfig.json编译TypeScript代码。

source-map-loader使用任意来自Typescript的sourcemap输出,以此通知webpack何时生成自己的sourcemaps。 这让你在调试最终生成的文件时就好像在调试TypeScript源码一样

 

5、安装自动打包HTML模板插件,这样就可以指定一个HTML模板样式文件,打包到dfist目录中,等会在webpack配置中有备注使用

 

6、安装合并webpack配置的插件,等会在webpack配置中有备注使用

 

7、可选安装babel系列(备用的,前期你不安装也行),如果将来你要分开处理打包,如编译node层的配置就要用到babel给gulp流式处理,或是你其它地方需要用到babel来编译

 

8、开始创建项目目录中的各文件,以及相关内容

到此你就可以启动服务,在react中使用TS语法写代码了,如果你碰到问题就安装我一样的版本插件

npm run start 直接启动服务,端口是8080

npm run dev 是打包文件到dist目录中去(生产环境配置打包的)

不用打包直接 启服务写代码就可以了。

 

 

不过后续还要在集成加上router路由和redux功能,至于为什么在单独分开说,看个人项目需求是否添加了。

集成router路由功能,单页应用使用的

1、安装路由模块功能组件,这里我选择的是react-router-dom版本的路由,你也可以选择react-router的,看个人了。

 

2、在src目录下创建routes目录,里面在创建一个index.tsx文件,注意:这不是入口的文件哦,我取index名是为了引入此文件时方便点而已

src/routers/index.tsx文件内容如下:

在此文件内,你可以配置所有路由页面要渲染的组件,路由语法相信使用过react的都知道,我就不一一细说每个路由组件的功能了,

 

 

 

集成react-redux功能

这是统一状态管理器组件功能,插件功能说明具体官方有介绍,下面介绍集成细节:

这里说明一下在集成过程中,我把官方demo已经集成在内,当集成完可以测试redux使用功能,没有react-redux功能的是很容易搞晕来的哦,有基础的话跟着流程走整合

改造前期安装相关依赖

1、安装管理状态插件redux

2、安装支持异步派遗功能(redux-thunk)和扩展redux存储的插件(redux-devtools-extension)

 

 

改造详细流程:

1、先熟悉一下完成后的整体目录样式(在上面基础上新增加的部份文件),后面介绍创建相关文件名的时候,希望不会被创建错了。

 

2、创建redux容器文件夹目录,在src/reduxConfig下

由于容器内文件过多,收缩展开观看,此集成是官网demo你也可以看官方demo粘入自己的文件

3、创建演示需要的组件功能,改变store属性状态,只要在组件内触发action即可。

3.1 进入components组件文件夹下,

AddTodo.tsx文件内容如下

 

Link.tsx组件内容如下:

 

创建TodoList.tsx文件内容如下:

 

创建Footer.tsx文件内容如下:

 

 

4、最终还要整合一下拼接起各组件显示出来,在src目录下创建views目录,

ReduxDemo.tsx文件内容如下:

 

5、最后在改造一下入口文件,显示此拼接好的组件页面,在src/index.tsx文件内容如下:

 

此时就整合完成,测试一下官方demo是否成功,思想整合进来能用了,具体就根据你的实现情况改造了。

 

NEXT:已经是最新一篇了

 发表评论


表情