- 基于create-react-app 配置的一系列工具,需要可以去下载 https://github.com/sili-li/web-starter,下载可直接快速进行开发
- 配置:typscript+husky+ prettier + router + css module + axios
- github: git clone https://github.com/sili-li/web-starter.git
- 新建项目web_starter:create-react-app web_starter
- 使用react-app-rewired覆盖webpack配置
- yarn add react-app-rewired
- 添加config.overides.js文件
//把package.json的script里面的creact-react-app改为react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
- 引入typescript
- yarn add --dev typescript
- yarn add --dev @types/react @types/react-dom
- 配置tsconfig.json typeScript官方文档
- 把对应的js文件改为.ts,.tsx文件
// tsconfig.json这个我常用的一些配置,详细可以点击上方的官方文档了解
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}
- 引入tslint,使代码规范化
- yarn add --dev tslint tslint-config-prettier tslint-eslint-rules tslint-react
- yarn add --dev lint-staged husky prettier
- 添加tslint.json文件
//tslint.json文件
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended",
"tslint-eslint-rules",
"tslint-react",
"tslint-config-prettier"
],
"linterOptions": {
"exclude": [
"src/serviceWorker.ts",
"src/react-app-env.d.ts"
]
},
"jsRules": {},
"rules": {
"quotemark": [true, "single", "allow-escape", "avoid-template", "jsx-double"],
"import-name": false,
"ordered-imports": true,
"member-ordering": false,
"ban-types": false,
"no-string-literal": false,
"object-literal-sort-keys": false,
"max-classes-per-file": false,
"interface-over-type-literal": false,
"no-empty": false,
"interface-name": false,
"no-unused-expression": false,
"jsx-no-lambda": false
},
"rulesDirectory": []
}
// package.json里面添加"husky": "^4.2.5", "lint-staged":"^10.2.9",
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json}": [
"yarn lint",
"prettier --write",
"git add"
]
},
- 配置react-router
- yarn add react-router-dom react-router-cache-route
- yarn add --dev @types/react-router-dom
// router页面
import React from 'react';
import CacheRoute, { CacheSwitch } from 'react-router-cache-route';
import { BrowserRouter, Redirect, Route } from 'react-router-dom';
import Home from './pages/home/index';
import Test from './pages/test/index';
export interface RouteType {
routerPath: string;
title: string;
component: React.ComponentType;
cache?: boolean; // 为true时,缓存页面,返回上一页的时候,
// 上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。
}
const routeConfigs: RouteType[] = [
{
routerPath: '',
title: '首页',
component: Home,
},
{
routerPath: 'test',
title: '测试页面',
component: Test,
},
];
function AppRouter() {
return (
<BrowserRouter>
<CacheSwitch>
{routeConfigs.map((route: RouteType, index: number) => {
return route.cache ? (
<CacheRoute exact={true} path={`${route.routerPath}`} key={index} component={route.component} />
) : (
<Route exact={true} path={`/${route.routerPath}`} key={index} component={route.component} />
);
})}
<Redirect to="/" />
</CacheSwitch>
</BrowserRouter>
);
}
export default AppRouter;
- css module
- yarn add --dev customize-cra postcss-normalize postcss-preset-env babel-plugin-import
- config.overides.js
const { override, addPostcssPlugins, fixBabelImports } = require('customize-cra');
// 关掉 sourceMap
process.env.GENERATE_SOURCEMAP = process.env.NODE_ENV === 'development' ? 'true' : 'false';
module.exports = override(
addPostcssPlugins([
require('postcss-normalize')({
forceImport: true,
}),
require('postcss-preset-env')({
stage: 0,
}),
]),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
})
);
- axios
import axios from 'axios';
import pg from '../../package.json';
const Api = axios.create({
baseURL: `${pg.proxy}/api`,
timeout: 20000,
headers: {},
});
const getHeader = () => ({
Authorization: 'token',
});
Api.interceptors.request.use((config) => {
config.headers = { ...getHeader(), ...config.headers };
return config;
});
Api.interceptors.response.use(
(response) => response,
(error) => {
return Promise.reject(error); // 返回接口返回的错误信息
}
);
export default Api;