从零开始，一步一步搭建Typescript+React+Redux项目——开发环境配置和启动React(二)

本文详细介绍了如何从零开始搭建一个 Typescript + React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。

本文代码地址：ts-react-redux

建议将代码拉下来之后，配合本文一起查看，效果更佳。

代码下载命令：git clone https://github.com/vettel-qin/ts-react-redux.git

一、webpack 配置

1、安装webpack相关插件

（1）、为了用Typescript书写 webpack 的配置文件，必须先安装相关依赖：

yarn add add typescript@3.8.3 ts-node@8.8.2 @types/node@13.9.1 -D

（2）、webpack原本的包不包含验证包，所以需要安装相关ts验证包

yarn add webpack@4.42.1 @types/webpack@4.41.10 webpack-cli@3.3.10 -D

2、入口和出口

（1）、在tools目录下新建paths.config.ts

（2）、在tools目录下新建webpack.config.ts 增加如下代码：

3、配置html-webpack-plugin

首先安装yarn add html-webpack-plugin@3.2.0 @types/html-webpack-plugin@3.2.0 -D，然后在webpack的plugins配置项下进行简单配置：

4、设置模式

webpack 配置中的 mode 属性，可以设置为 'development' 和 'production'，然后在webpack.config.ts中添加如下配置：

5、设置devtool

为了方便在项目出错时，迅速定位到错误位置，可以设置 devtool，生成资源映射，我们这里使用

inline-source-map，更多选择可以在这里查看区别。然后在webpack.config.ts中添加如下配置：

6、使用 webpack-dev-server 启动项目服务

安装 yarn add webpack-dev-server@3.10.3 @types/webpack-dev-server@3.10.1 -D，然后在webpack的devServer配置项下进行简单配置

7、在package.json文件中添加一个执行脚本，用来执行webpack命令：

8、运行项目，测试配置是否成功

执行 yarn start 命令，命令行提示成功后，在浏览器器打开http://localhost:8080，可以看到

二、安装 react 相关

react原本的包不包含验证包，所以需要安装相关ts验证包

yarn add react@16.13.1 react-dom@16.13.1 -S

yarn add @types/react@16.9.34 @types/react-dom@16.9.6 -D

配置tsconfig.json

三、配置 ts\tsx 相关 babel

1、使用babel-loader

安装yarn add @babel/core@7.9.0 babel-loader@8.1.0 -D，然后在webpack的module配置项下进行配置

2、使用babel相关presets

@babel/preset-env，可以在项目中使用所有ECMAScript标准里的最新特性。

@babel/preset-react，可以在项目中使用 react 语法。

安装yarn add @babel/preset-env@7.9.5 @babel/preset-react@7.9.4 -D，然后在webpack的module配置项下添加如下配置：

3、使用 babel 相关 plugins

@babel/plugin-syntax-dynamic-import，可以在项目中使用import()这种语法

安装 yarn add @babel/plugin-syntax-dynamic-import@7.8.3 -D，然后在webpack的module配置项下添加如下配置：

4、安装ts-loader

这款loader用于将ts代码编译成js代码

yarn add ts-loader@7.0.0 -D，然后在webpack的module配置项下添加如下配置：

5、使用cache-loader

在一些性能开销较大的loader之前添加此loader,以将结果缓存到磁盘里。

安装 yarn add cache-loader -D，然后在webpack的module配置项下babel-loader之前添加配置：

6.启动react测试

（1）、修改src/entries/index.ts文件为index.tsx

（2）、修改webpack.config.ts入口

（3）、运行项目，测试配置是否成功

四、配置 CSS 相关 loader

1、支持sass

安装yarn add style-loader@1.1.4 css-loader@3.5.2 node-sass@4.13.1 sass-loader@8.0.2 -D

配置webpack,在module.rules下面对.scss和.css文件类型的编译配置

2、自动添加浏览器前缀

（1）、安装yarn add postcss-loader@3.0.0 autoprefixer@9.7.6 -D，然后在webpack.config.js的module.rules配置postcss-loader, 并修改css-loader前应用的loader数量为2

（2）、在package.json里面配置定义需要支持的浏览器范围

3、配置公共scss

（1）、新建公共样式目录

在src目录下新建styles文件夹，然后在styles文件夹新建variables.scss文件用于存放样式变量

（2）、引用公共scss

a、在tools文件夹中的paths.config.ts添加

b、使用node-sass的属性includePaths进行优化

c、效果（不管文件层级有多深都可以直接引入）

五、配置图片、文件相关loader

安装 yarn add url-loader file-loader -D，然后在webpack.config.js的module.rules配置url-loader、file-loader

1、图片篇

（1）、在src目录下新建assets目录存放图片，并在index.tsx引用

注：出现“找不到模块”问题，

这个问题是因为图片文件中没有类似export这样的关键词用于导出一个模块，所以导致找不到模块，可以通过ts的类型定义文件中的模块声明（declare module）来解决。

解决方案：

在根目录下新建一个typings文件夹，用于存在放图片等模块声明，以及后续需要用到的全局校验接口，在typings文件夹新建import.d.ts文件

（2）、在src/entries新建样式文件为index.scss并在index.tsx引用

2、字体篇

3、音频篇

六、优化路径

1、第一种方案在webpack.resolve.alias中进行路径配置（推荐）

同时需要在tsconfig.json中进行配置

2、第二种方案，用tsconfig-paths-webpack-plugin这个包将tsconfig中对路径的设置映射到webpack配置中去，这样就不需要在webpack中再进行一次路径的配置了，首先安装:yarn add tsconfig-paths-webpack-plugin@3.2.0 -D，然后采用第一种方案的tsconfig配置，接着配置webpack,引入tsconfig-paths-webpack-plugin

七、启动热加载

1、在devServer配置项下添加hot: true和hotOnly: true

2、在webpack的plugins配置项下添加new webpack.HotModuleReplacementPlugin()和new webpack.NamedModulesPlugin()

3、安装yarn add react-hot-loader@4.12.20 -D，在webpack.config.ts的entry中加入react-hot-loader/patch，且一定要写在entry的最前面，如果有babel-polyfill就写在babel-polyfill后面。在babel-loader中添加plugin

4、最后，需要在页面的主入口中添加相关代码

（1）、在src/components目录下新建App.tsx和App.css

App.tsx

App.css为reset.css，可参考https://www.css-reset.com/

（2）、修改src/entries/index.ts文件为index.tsx并引用App组件

注：出现'类型“NodeModule”上不存在属性“hot”'问题，解决办法：

a.if(moduleasany).hot{}

b. yarn add @types/webpack-env -D

（3）、运行项目，测试配置是否成功

文章及代码中如有问题，欢迎指正，谢谢！