小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

创建react18-typescript项目_创建一个react项目,用typescript模板

作者：小蓝xlanll | 2024-02-25 05:22:07

踩

创建一个react项目,用typescript模板

这里写自定义目录标题

搭建react-typescript项目-[模版项目github地址](https://github.com/Yinsls/react-template)

搭建react-typescript项目-模版项目github地址

基础项目生成

create-react-app脚手架创建typescript项目

$ npx create-react-app my-react --template typescript

项目配置

使用craco (配置webpack,无需eject)

安装craco

$ yarn add @craco/craco

项目根目录创建craco配置文件: craco.config.js 或者.cracorc

	// 配置内容
	const { whenProd, loaderByName } = require('@craco/craco');
	const path = require('path');
	const CracoLessPlugin = require('craco-less'); // 加载less
	const sassResourcesLoader = require('craco-sass-resources-loader'); // 全局加载sass文件
	const WebpackBar = require('webpackbar'); // 打包进度条
	const TerserPlugin = require('terser-webpack-plugin'); // 代码压缩: 清除日志｜特定函数等
	
	module.exports = {
	  webpack: {
	    alias: {
	      '@': path.resolve(__dirname, 'src'),
	      '@api': path.resolve(__dirname, 'src/api'),
	      '@hooks': path.resolve(__dirname, 'src/hooks'),
	      '@pages': path.resolve(__dirname, 'src/pages'),
	      '@common': path.resolve(__dirname, 'src/common'),
	      '@component': path.resolve(__dirname, 'src/components'),
	    },
	    plugins: [
	      new WebpackBar(),
	      ...whenProd(
	        () => [
	          new TerserPlugin({
	            terserOptions: {
	              sourceMap: true,
	              compress: {
	                drop_console: whenProd(() => true), // 生产环境中清除console.*这些函数的调用
	                drop_debugger: whenProd(() => true), // 生产环境中清除debugger
	                pure_funcs: ['console.log'], // 干掉特定的函数比如console.info，那用pure_funcs来处理
	              },
	              format: {
	                comments: false, //删除注释
	              },
	            },
	          }),
	        ],
	        []
	      ),
	    ],
	  },
	  plugins: [
	    {
	      plugin: CracoLessPlugin,
	      options: {
	        lessLoaderOptions: {
	          lessOptions: {
	            modifyVars: {}, // 定义变量
	            javascriptEnabled: true,
	          },
	        },
	        modifyLessModuleRule(lessModuleRule, context) {
	          lessModuleRule.test = /\.module\.(less)$/;
	          const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'));
	          cssLoader.options.importLoaders = 4;
	          cssLoader.options.modules = {
	            localIdentName: '[local]_[hash:base64:5]',
	          };
	          return lessModuleRule;
	        },
	      },
	    },
	    {
	      plugin: sassResourcesLoader,
	      options: {
	        resources: [
	          './src/common/scss/public.scss',
	          './src/common/scss/variable.scss',
	        ],
	      },
	    },
	  ],
	  devServer: (devServerConfig) => {
	    return {
	      ...devServerConfig,
	      proxy: {
	        '/api': {
	          target: 'http://xxx.cn',
	          changeOrigin: true,
	          pathRewrite: {
	            '^/api': '',
	          },
	        },
	      },
	    };
	  },
	};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

配置启动命令(package.json):

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
1
2
3
4
5
6

配置alias(路径别名)

// .cracorc.js
webpack: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    '@pages': path.resolve(__dirname, 'src/pages'),
    '@common': path.resolve(__dirname, 'src/common'),
    '@component': path.resolve(__dirname, 'src/components'),
  },
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "extends": "./path.tsconfig.json", // 添加路径别名配置
  "include": ["src"]
}

// path.tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@pages/*": ["src/pages/*"],
      "@common/*": ["src/common/*"],
      "@component/*": ["src/components"]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

配置打包进度条(webpackbar)

// .cracorc.js
const WebpackBar = require('webpackbar'); // 打包进度条
module.exports = {
	webpack: {
		plugins: [new WebpackBar()],
	}
}
1
2
3
4
5
6
7

安装插件terser-webpack-plugin:

$ yarn add terser-webpack-plugin -D

配置日志打印

// .cracorc.js
const TerserPlugin = require('terser-webpack-plugin'); // 清除日志｜特定函数等
module.exports = {
  webpack: {
	plugins: [
      new TerserPlugin({
        terserOptions: {
          sourceMap: true,
          compress: {
            drop_console: whenProd(() => true), // 干生产环境中清除console.*这些函数的调用
            drop_debugger: whenProd(() => true), // 生产环境中清除debugger
            pure_funcs: ['console.log'], // 干掉特定的函数比如console.info，那用pure_funcs来处理
          },
          format: {
            comments: false, //删除注释
          },
        },
      }),
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用eslint

安装eslint

$ yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

创建.eslintrc.js配置文件

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  rules: {
    // // hooks依赖项不能为空
    'react-hooks/exhaustive-deps': 'off',
    'no-console': 'warn',
    // 缩进2
    indent: 'off',
    // 使用 === 替代 ==
    eqeqeq: [2, 'allow-null'],
    'no-unused-vars': 'off',
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用prettier

安装prettier

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
创建.prettierrc文件

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

1
2
3
4
5
6

使用scss

$ yarn add sass-loader node-sass
1

使用craco引入全局scss

安装sass

$ yarn add -D craco-sass-resources-loader

// .cracorc.js
const sassResourcesLoader = require('craco-sass-resources-loader');
plugins: [
  {
    plugin: sassResourcesLoader,
    options: {
      resources: [
        './src/common/scss/public.scss',  // 全局样式
        './src/common/scss/variable.scss', // 全局变量
      ],
    },
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13

使用less

安装less

$ yarn add craco-less -S
$ yarn add less less-loader -D
craco配置less (注意: 将less配置放在sass)

注意: 将less配置放置于sass配置前, 使用antd的情况下控制台报错: Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.less’ URL is not supported,
猜测可能是sass-loader与less(因为antd使用less样式，自己想使用sass，所以都安装了)起了冲突

// .cracorcjs
module.exports = {
  webpack: {},
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {}, // 定义变量
            javascriptEnabled: true,
          },
        },
        modifyLessModuleRule(lessModuleRule, context) {
          lessModuleRule.test = /\.module\.(less)$/;
          const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'));
          cssLoader.options.importLoaders = 4;
          cssLoader.options.modules = {
            localIdentName: '[local]_[hash:base64:5]',
          };
          return lessModuleRule;
        },
      },
    },
    {
      plugin: sassResourcesLoader,
      options: {
        resources: [
          './src/common/scss/public.scss',
          './src/common/scss/variable.scss',
        ],
      },
    },
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

使用axios

安装axios

$ yarn add axios

配置跨域

// .cracorc.js
devServer: (devServerConfig) => {
   return {
     ...devServerConfig,
     proxy: {
       '/api': {
         target: 'http://xxx.cn',
         changeOrigin: true,
         pathRewrite: {
           '^/api': '',
         },
       },
     },
   };
 }

// 请求接口
axios.get('api/manage/code')
实际访问地址： http://xxx.cn/manage/code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用ant design

安装ant design

$ yarn add antd

引入样式文件

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ConfigProvider } from 'antd'; // antd全局配置插件
import zhCN from 'antd/es/locale/zh_CN'; // antd中文包
import 'moment/locale/zh-cn'; // 日期选择中文
import 'antd/dist/antd.css'; // antd通用样式
// import { Button } from 'antd'; // 按需引入插件

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用react-router-dom(v6)

安装react-router-dom

$ yarn add react-router-dom

根组件index.tsx引入路由

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import 'moment/locale/zh-cn'; // 日期选择中文
import 'antd/dist/antd.css';
import Test from './pages/test';
import Home from './pages/home';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  // <React.StrictMode>
  <ConfigProvider locale={zhCN}>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="test" element={<Test />} />
          <Route path="home" element={<Home />} />
        </Route>
        <Route path="/system" element={<System />} />
        {/* 当匹配到/redirect-path路由时，重定向到/system */}
        <Route path="/redirect-path" element={<Navgate to={'/system'} />} />
      </Routes>
    </BrowserRouter>
  </ConfigProvider>
  // </React.StrictMode>
);

// 注意: 不要在存在子路由的路由中使用重定向，否则会无限循环匹配而错误，如：
// 当匹配到路由/root时，重定向到/other, 但是/root/test也会被匹配从而重定向
<Route path="/root" element={<Navgate to={'/other'} />}>
  <Route path="test" element={<Test />} />
  <Route path="home" element={<Home />} />
</Route>
<Route path="/other" element={<Other />} />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

使用redux

安装redux:

yarn add @reduxjs/toolkit
yarn add react-redux

创建store
src/store/login/loginSlice.ts

import { createSlice } from '@reduxjs/toolkit';

const { actions, reducer: LoginReducer } = createSlice({
  // 命名空间，作为action type前缀
  name: 'login',
  // 初始化状态数据
  initialState: {
    token: 'test.token',
    userInfo: {}, // 用户信息
    routeList: [], // 用户路由
  },
  // reducer更新函数  dispatch使用的action函数
  reducers: {
    setToken: (state, { payload }) => {
      state.token = payload;
    },
  },
});

// 异步操作
export const asyncOption = (payload: any) => {
  return async (dispatch: any, getState: any) => {
    setTimeout(() => {
      dispatch(setToken(payload));
    }, 3000);
  };
};

// 导出action函数
export const { setToken } = actions;

// 导出reducer, 创建store
export default LoginReducer;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

src/store/index.ts

// 创建store
import { configureStore } from '@reduxjs/toolkit';
import LoginReducer from '@/store/login/loginSlice';

export const store = configureStore({
  reducer: {
    login: LoginReducer,
  },
});
1
2
3
4
5
6
7
8
9

// 使用redux状态
import React from 'react';
import { Button } from 'antd';
import { setToken } from '@/store/login/loginSlice';
import { useDispatch, useSelector } from 'react-redux';
import './index.scss';

export default function Test() {
  const dispatch = useDispatch();
  const { token } = useSelector((state: any) => state.login);

  return (
    <div className="box">
      token: {token}
      <Button
        type="primary"
        onClick={() => dispatch(setToken(new Date().getTime()))}
      >
        antd Button
      </Button>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用dayjs(日期转化)

安装dayjs

$ yarn add dayjs

使用dayjs

import dayjs from 'dayjs';
// 获取时间戳
const date = dayjs('2022-08-16 22:32:45').format('YYYY-MM-DD'); // 2022-08-16
cosnt prevWeek = dayjs(date).subtract(1, 'week'); // 2022-08-09
const dateTime = dayjs(prevWeek).valueOf(); // 获取指定日期的时间戳(13位) 1660003200000
1
2
3
4
5

数据深拷贝-lodash

安装lodash

$ yarn add lodash

简单实用

import { useEffect, useRef } from 'react';
import _ from 'lodash';

export default function Test() {
  const complexObj = useRef<any>({
    age: 18,
    date: new Date(),
  });

  useEffect(() => {
    const cloneObj = JSON.parse(JSON.stringify(complexObj.current)); // 使用JSON方式深拷贝数据, date被转化为字符串
    const lodashObj = _.cloneDeep(complexObj.current); // 使用lodash深拷贝数据 date值与源数据一致(Date类型)
    console.log(cloneObj, lodashObj, complexObj.current);
  }, []);

  return (
    <div className="box">
      <div className="inner">Test page!</div>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

JSON拷贝与lodash拷贝效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/138949