react+typescript 模版

结合react和typescript使用creaet-react-app 3.x搭建的项目模版

项目地址(github)

 react + ts 模版

1. 兼容 ie9+
2. 使用 less,配置全局 less 变量
3. 引入 antd 并自定义主题
4. 配置 proxy
5. 设置自定义 alias
6. 使用 mobx(4.x)和 mobx-hooks
7. 使用 axios
8. 使用 cross-env
9. 使用 eslint+prettier

 1. 兼容 ie9+

create-react-app
react-app-polyfill

yarn add react-app-polyfill

// src/index.tsx
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

 2. 使用 less,配置全局 less 变量

yarn add less less-loader style-resources-loader -D

让 typescript 可以识别`.less`的模块

// src/react-app-env.d.ts

declare module '*.module.less' {
  const classes: { readonly [key: string]: string }
  export default classes
}

 3. 引入 antd 并自定义主题

 使用 3.x,4.x 版本不支持 ie9

yarn add antd@3.26.15

使用变量, less-loader@4 以上开始需要在 less-loader 中配置

loader: 'less-loader',
options: {
  javascriptEnabled: true, //支持less可以使用变量
}

 4. 配置 proxy

 dev proxy

 5. 设置自定义 alias

必须同时在webpack.config.js和tsconfig.json中配置

 6. 使用 mobx(4.x)和 mobx-hooks

 mobx 使用 4.x 兼容 ie
 mobx-react 例子

 7. 使用 axios

由于 fetch 还没有找到比较成熟的类似 axios 的插件,并且存在兼容性和一些小问题,因此使用 axios

yarn add axios

封装了工具函数 http.ts,用于统一处理请求.其中的`withProxy`方法是与开发代理有关联的.具体内容查看src/utils/http.ts.

 8. 使用 cross-env

使用到的两个打包变量:

GENERATE_SOURCEMAP : 是否使用source-map
REMOVE_LOGS : 是否关闭console和debug

 9. 使用 eslint+prettier

eslint-config-alloy