react+typescript+antd的配置说明。

snow来了
2,375 阅读7分钟

最近公司将所有的react项目都要集合到ts上，就工作中遇到的一些问题再次说明。 首先我们从集成react+typescript——antd开始说明：

一.搭建项目

npx create-react-app my-demo -typescript

创建的项目如下所示：

开始的时候是没有config的，当我们打开package.json以后我们在scripts里面看到有4个命令，我们执行

npm run eject

此时项目中会出现一个文件夹是config。他里面装的就是webpack的配置项。
接下来，我们执行

npm run start

此时项目跑起来以后就在浏览器上打开一个http://localhost:3000的网页出来。

二.集成eslint

我的建议是eslint是一个校验工具，所以能在vscode上安装的尽量安装在vscode上。在vscode上有一个插件叫做：eslint，我们打开vscode按照下图搜索安装即可。

我们也可以在项目里面安装eslint，并且通过他的配置文件自定义校验规则。打开package.json我们在dependencies项里面看到的eslint，说明react的脚手架里面已经集成了eslint，那么我们就不需要再继续安装了，只需要执行命令，释放出eslint的配置文件

npx eslint --init

执行完命令以后，在项目里面就会出现一个文件是eslintrc.json,我们可以在该文件的rules里面配置校验项目。

三.继承stylelint

eslint是对js，ts的校验工具，我们还要安装一个css相关的校验工具，就是stylelint，这个也在vscode里面下载即可

下载完成以后记得对stylelint进行配置，不然webpack.config.js会报错。
首先全局安装stylelint-config-recommended之后在配置vscode的设置项。

npm install stylelint-config-recommended -g

这里是全局安装，安装以后，你去node的全局资源里面找到stylelint-config-recommended的路径，按照下图配置即可。注意的是如果你不知道全局资源在哪里，就去环境变量里面看看node的环境变量配置项找XXXX\nodejs\node_global\node_modules\即可。
所以进入vscode的设置如图

在settings.json文件里面我们配置stylelint的配置信息，注意的是我们需要安装一下stylelint-config-recommended，他是全局安装。

四.路径别名设置

在开发的过程中，大公司的大神们都很讨厌硬编码，尤其是路径都是点点点，所以别名设置就显得非常重要。一般情况下在react的js项目中，我们只需要配置webpack.config.js文件里面的alisa配置项就够了，但是在ts项目中我们还需要在tsconfig.json里面配置。具体如图所示：
在webpack.config.js里面

resolve:{
  //一些其他的配置
  alias:{
    '@': paths.appSrc //这里的paths.appSrc就是src路径，详细请自己参阅config/paths.js
  }
 //一些其他的配置
}

在tsconfig.json里面

"compilerOptions":{
  //这里是一些已经存在的其他配置
  //如下是需要添加的配置
  "baseUrl": "src",
    "paths": {
      "@/*": [
        "./*"
      ]
   }
}

路径使用

 import { someComponent } from '@/components/User';

注意：在tsconfig中一定记得将baseUrl改成src。不然依旧配置不成功呢。

五.css模块化

打开package.json以后我们会发现有sass-loader，也就说在脚手架里面默认集成的是sass样式预编译语言，如果我们要是用less的话，那么我们就按照下面的步骤安装一下就好了。

npm insatll less less-loader -D

进入config/webpack.config.js文件找到sass的配置文件,我们把自己的配置文件添加在sass后面就好了，并且只需要改改名字，抄上即可

const sassRegex = /\.(scss|sass)$/;                     // 原有文件
const sassModuleRegex = /\.module\.(scss|sass)$/;       // 原有文件
const lessRegex = /\.less$/;                            // 添加文件
const lessModuleRegex = /\.module\.less$/;              // 添加文件

找到models下rules里面的sass的配置规则 sass的配置,我们把sass换成less即可，也可以照抄一份

这样我们就可以明目张胆的在项目里面建less文件了。

六.按需加载antd的样式文件

当我们全局引入antd以后，并不是所有的文件，所有的样式都要用到，如果只用到了一个组件却加载了所有的样式进来，是不是就会造成加载过量，影响性能，这是我们就需要在package.json里面配置一下，做到按需加载即可。

"babel": {
    //一些已经存在的配置
    //添加如下配置
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
 }

七.组件的基本类型

如果一个文件里面return出来了jsx，那么这个文件的扩展名就是tsx，如果这个文件没有return出jsx，那么他的扩展名就是一个ts。用来定义类型的文件就.d.ts结尾。 在ts，tsx里面的数据都是需要定义类型的，我就一些基本的类型给大家说一下：

state的场景，使用redux在组件里面
export interface IMdState {
  [k: string]: any;
}
const mapStateToProps = (state: IMdState) => ({
  loading: actions.fetchList(state),
});


import React from 'react'
import Slider from '@/components/slider/slider'

function Recommend(): JSX.Element {
  //mock数据
  const bannerList = [1, 2, 3, 4].map(() => {
    return { imageUrl: "http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" }
  });
  
  return <div>
    <Slider bannerList={bannerList} />
  </div>
}

export default React.memo(Recommend)

大家具体可以参照：blog.csdn.net/weixin_4390…
本人建议所有的ts文件里面的变量都应该带有类型，少用any，写any的结果和js没有类型是一样，没有任何意义，所以请写具体的类型。

七.ts文件和.d.ts之间的区别

.ts 表示你的代码就是用 ts 写的。

但.ts里面的代码最后会编译成 .js 的 js 代码，供他人使用。这个时候，类型信息就丢失了。怎么办？
所以 ts 编译器会自动根据 .ts 中的信息，生成对外的 .d.ts 文件，和生成的 js 文件搭配使用。
其中，js 文件是给浏览器引擎阅读的，而 .d.ts 文件是给 IDE（智能编辑器，说人话就是vscode..）写代码时参考用的。

另一种情况是，你的代码不是用 ts 写的，只是希望最后给别人用时能有类型信息作为辅助，那么这种情况下的 .d.ts 文件就需要你手写了。

八.http跨域请求

在我们调试接口的时候，后台的数据都是来自于具体的服务器，而不是localhost，他们的ip是不一样的，这样就违反了浏览器的同源策略，控制台就会报错，如图：

此时我们可以用http的跨域请求，也可以用webpack的反向代理。跨域请求是在代码上做手脚，这个我不推荐，因为当你上线以后，资源有可能都是放在一起的，不会出现跨域，这样你写在代码里面的跨域就会很糟糕，不可能上线的时候你一个一个再改过去，多脑残！
下面推荐2个办法：

1反向代理

如果你需要反向代理的只是一个地址，那么我们就直接在package.json里面配置即可

"proxy": "http://api02.aliyun.venuscn.com"

入股需要代理的地址有多个，那么我们只能安装 @types/http-proxy-middleware中间件,

注意：在typescript环境下，安装所有的依赖包都需要以@types/为前缀，否则无法引入。

npm install  @types/http-proxy-middleware -S

在src下面建一个文件setupProxy.js

//setupProxy.js
//注：下面的例子都是以阿里云的免费api，实际项目中改为自己的地址即可
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy(
    '/province',
    {
        target: 'http://api02.aliyun.venuscn.com',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
            '^/province': '/',
        },
    },
  ));
  app.use(proxy(
    '/poetry',
    {
        target: 'http://jisutssbs.market.alicloudapi.com',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
            '^/poetry': '/',
        },
    },
  ));
};

在service里面请求数据

axios.get('/province/area/all?level=0');//此请求最终为：http://api02.aliyun.venuscn.com/area/all?level=0

axios.get('/poetry/tangshi/search?keyword=无');//此请求最终为：http://jisutssbs.market.alicloudapi.com/tangshi/search?keyword=无

如果你要问为什么配置一个文件就可以反向代理了呢？请打开项目的config文件，找到paths.js你会发现，它里面居然已经帮你配置好了，你只需要添加配置文件，大胆的干起来就好。

2.http抓包工具fiddler

如果你向我一样的懒惰，我就直接推荐你使用这一款工具，具体的用法在本人的文件里面有相关的代理办法，请查阅。 他的理念就是，代码是万能的，请求就交给fiddler管理。 后续还有一些配置说明，下次继续更新！谢谢！

avatar
文章
阅读
粉丝