基于 create-react-app3.x 搭建的 ts 模版

技术栈 typescript+react+mobx+react-router+less+axios

创建
兼容 ie9+
配置 alias
less
antd
dev-proxy + axios
mobx
react-router
打包后资源引用路径
自定义环境变量

创建

yarn create react-app my-app --template typescript

cd my-app
yarn run eject
rm -rf ./node_modules
rm -rf ./.git

yarn

兼容 ie9+

yarn add react-app-polyfill

// src/index.ts

import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";

配置 alias

// config/webpack.config.js

"@": path.resolve(__dirname, "../src"),

// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

less

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

添加公共 less 文件, src/styles/mixins.less,src/styles/variable.less

配置config/webpack.config.js,其他配置内容查看根据下面定义的变量查找.

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// less公共变量
const styleResourceLoader = {
  loader: "style-resources-loader",
  options: {
    patterns: path.resolve(__dirname, "../src/styles/*.less"),
    injector: "prepend"
  }
};

// css-module使用的类名
const cssModuleClassName = isEnvDevelopment ? "[path]__[name]__[local]" : "[hash:base64:10]";

解决提示"找不到 module.less"模块的问题

// src/react-app-env.d.ts
declare module "*.module.less" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

antd

yarn add antd@3.26.15 //兼容ie9+

config/webpack.config.js 中的 getStyleLoaders方法

javascriptEnabled: true, //支持less可以使用变量

新建src/antd-theme.less并在src/index.ts中引入.

dev-proxy + axios

dev proxy

yarn add http-proxy-middleware -D

新建src/setupProxy.js

yarn add axios

新建src/utils/http.ts

mobx

mobx-react 例子

yarn add mobx@4.15.4 mobx-react //兼容ie9+

新建src/utils/mobx-store-module.ts,src/store/index.ts

不使用 react 的严格模式,把src/index.ts中的React.StrictMode去掉. 解决 mobx 警告 You haven't configured observer batching which might result in unexpected behavior in some cases

// src/index.ts
import "mobx-react-lite/batchingForReactDom";

react-router

yarn add react-router-dom @types/react-router-dom

新增src/routes.ts,并修改src/index.ts和src/App.ts

打包后资源引用路径

默认的引用路径为/,这会导致打包后运行时,获取不到资源.需要修改成相对路径./

// package.json
"homepage": "./"

自定义环境变量

create-react-app 选项

直接对应模式的文件中添加即可. 获取时使用process.env

cross-env(选装)

安装这个插件可以强制修改环境变量. 注意: 只能修改已经定义的变量, 无法添加新变量

yarn add cross-env -D

在package.json中的script字段中使用

"scripts": {
    "start": "cross-env YOUR_VALUE=abcdef node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

QaQ-top/React-TypeScript