Skip to content

Commit f4dc3d1

Browse files
X-neuronX-neuron
committed
支持react-router6,ahook3,修复#19菜单打开失败的问题，更新依赖至最新，移除不必要的包，删除多余webpack配置项，优化国际化加载逻辑
1 parent cb5e41f commit f4dc3d1

File tree

13 files changed

+209
-186
lines changed

13 files changed

+209
-186
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ run/
1414
*.un~
1515
typings/
1616
.nyc_output/
17+
.vscode/
1718
database/
1819

‎package.json

+53-52
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"build": "npx cross-env NODE_ENV=production webpack --mode=production --config ./webpack/webpack.config.js",
88
"dev": "npx cross-env NODE_ENV=development webpack serve --mode=development --config ./webpack/webpack.config.js",
99
"test": "jest",
10+
"debug-webpack": "node --inspect-brk=5858 ./node_modules/.bin/webpack --mode=development --config ./webpack/webpack.config.js",
1011
"extract": "lingui extract",
1112
"compile": "lingui compile",
1213
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
@@ -57,127 +58,127 @@
5758
"devDependencies": {
5859
"@babel/cli": "^7.16.0",
5960
"@babel/core": "^7.16.0",
60-
"@babel/eslint-parser": "^7.16.0",
61+
"@babel/eslint-parser": "^7.16.3",
6162
"@babel/eslint-plugin": "^7.14.5",
6263
"@babel/plugin-proposal-class-properties": "^7.16.0",
6364
"@babel/plugin-proposal-export-default-from": "^7.16.0",
6465
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
6566
"@babel/plugin-transform-modules-commonjs": "^7.16.0",
6667
"@babel/plugin-transform-react-constant-elements": "^7.16.0",
6768
"@babel/plugin-transform-react-inline-elements": "^7.16.0",
68-
"@babel/plugin-transform-runtime": "^7.16.0",
69-
"@babel/preset-env": "^7.16.0",
69+
"@babel/plugin-transform-runtime": "^7.16.4",
70+
"@babel/preset-env": "^7.16.4",
7071
"@babel/preset-react": "^7.16.0",
71-
"@lingui/cli": "^3.12.1",
72-
"@lingui/macro": "^3.12.1",
73-
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
72+
"@lingui/cli": "^3.13.0",
73+
"@lingui/macro": "^3.13.0",
74+
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
7475
"@umijs/babel-plugin-auto-css-modules": "^3.5.20",
7576
"babel-loader": "^8.2.3",
7677
"babel-plugin-dynamic-import-node": "^2.3.3",
7778
"babel-plugin-import": "^1.13.3",
7879
"babel-plugin-lodash": "^3.3.4",
7980
"babel-plugin-macros": "^3.1.0",
80-
"browserslist": "^4.17.6",
81+
"browserslist": "^4.18.1",
8182
"case-sensitive-paths-webpack-plugin": "^2.4.0",
8283
"circular-dependency-plugin": "^5.2.2",
83-
"compression-webpack-plugin": "^9.0.0",
84-
"copy-webpack-plugin": "^9.0.1",
84+
"compression-webpack-plugin": "^9.1.1",
85+
"copy-webpack-plugin": "^10.1.0",
8586
"cross-env": "^7.0.3",
8687
"cross-port-killer": "^1.3.0",
8788
"css-loader": "^6.5.1",
88-
"css-minimizer-webpack-plugin": "^3.1.1",
89-
"eslint": "^8.2.0",
90-
"eslint-config-airbnb": "^18.2.1",
91-
"eslint-config-airbnb-base": "^14.2.1",
89+
"css-minimizer-webpack-plugin": "^3.2.0",
90+
"eslint": "^8.4.1",
91+
"eslint-config-airbnb": "^19.0.2",
92+
"eslint-config-airbnb-base": "^15.0.0",
9293
"eslint-config-prettier": "^8.3.0",
9394
"eslint-config-react-app": "^6.0.0",
9495
"eslint-friendly-formatter": "^4.0.1",
9596
"eslint-import-resolver-alias": "^1.1.2",
9697
"eslint-import-resolver-webpack": "^0.13.2",
97-
"eslint-plugin-compat": "^3.13.0",
98+
"eslint-plugin-compat": "^4.0.0",
9899
"eslint-plugin-html": "^6.2.0",
99-
"eslint-plugin-import": "^2.25.2",
100-
"eslint-plugin-jest": "^25.2.4",
101-
"eslint-plugin-jsx-a11y": "^6.4.1",
100+
"eslint-plugin-import": "^2.25.3",
101+
"eslint-plugin-jest": "^25.3.0",
102+
"eslint-plugin-jsx-a11y": "^6.5.1",
102103
"eslint-plugin-markdown": "^2.2.1",
103104
"eslint-plugin-prettier": "^4.0.0",
104-
"eslint-plugin-promise": "^5.1.1",
105-
"eslint-plugin-react": "^7.26.1",
106-
"eslint-plugin-react-hooks": "^4.2.0",
107-
"eslint-webpack-plugin": "^3.1.0",
105+
"eslint-plugin-promise": "^5.2.0",
106+
"eslint-plugin-react": "^7.27.1",
107+
"eslint-plugin-react-hooks": "^4.3.0",
108+
"eslint-webpack-plugin": "^3.1.1",
108109
"file-loader": "^6.2.0",
109110
"html-loader": "^3.0.1",
110111
"html-webpack-plugin": "^5.5.0",
111112
"husky": "^7.0.4",
112-
"jest": "^27.3.1",
113+
"jest": "^27.4.4",
113114
"less": "^4.1.2",
114115
"less-loader": "^10.2.0",
115-
"lint-staged": "^11.2.6",
116-
"mini-css-extract-plugin": "^2.4.4",
116+
"lint-staged": "^12.1.2",
117+
"mini-css-extract-plugin": "^2.4.5",
117118
"mockjs": "^1.1.0",
118-
"node-sass": "^6.0.1",
119+
"node-sass": "^7.0.0",
119120
"npm-run-all": "^4.1.5",
120121
"optimize-css-assets-webpack-plugin": "^6.0.1",
121122
"pnp-webpack-plugin": "^1.7.0",
122-
"postcss": "^8.3.11",
123+
"postcss": "^8.4.4",
123124
"postcss-flexbugs-fixes": "^5.0.2",
124125
"postcss-import": "^14.0.2",
125-
"postcss-loader": "^6.2.0",
126+
"postcss-loader": "^6.2.1",
126127
"postcss-normalize": "^10.0.1",
127-
"postcss-preset-env": "^6.7.0",
128+
"postcss-preset-env": "^7.0.1",
128129
"postcss-safe-parser": "^6.0.0",
129-
"prettier": "^2.4.1",
130+
"prettier": "^2.5.1",
130131
"raw-loader": "^4.0.2",
131132
"react-dev-utils": "^11.0.4",
132133
"react-perf-devtool": "^3.1.8",
133-
"react-refresh": "^0.10.0",
134+
"react-refresh": "^0.11.0",
134135
"resolve-url-loader": "^4.0.0",
135-
"sass": "^1.43.4",
136-
"sass-loader": "^12.3.0",
136+
"sass": "^1.45.0",
137+
"sass-loader": "^12.4.0",
137138
"source-map-loader": "^3.0.0",
138139
"style-loader": "^3.3.1",
139-
"stylelint": "^14.0.1",
140+
"stylelint": "^14.1.0",
140141
"stylelint-config-recommended": "^6.0.0",
141142
"stylelint-config-styled-components": "^0.1.1",
142143
"stylelint-processor-styled-components": "^1.10.0",
143144
"sugarss": "^4.0.1",
144-
"terser-webpack-plugin": "^5.2.4",
145+
"terser-webpack-plugin": "^5.2.5",
145146
"url-loader": "^4.1.1",
146-
"webpack": "^5.62.1",
147+
"webpack": "^5.65.0",
147148
"webpack-bundle-analyzer": "^4.5.0",
148149
"webpack-cli": "^4.9.1",
149150
"webpack-dashboard": "^3.3.6",
150-
"webpack-dev-server": "4.4.0",
151+
"webpack-dev-server": "4.6.0",
151152
"webpack-manifest-plugin": "^4.0.2",
152153
"webpackbar": "^5.0.2",
153-
"workbox-webpack-plugin": "^6.3.0"
154+
"workbox-webpack-plugin": "^6.4.2"
154155
},
155156
"dependencies": {
156-
"@ahooksjs/use-request": "^2.8.13",
157157
"@ant-design/icons": "^4.7.0",
158-
"@ant-design/pro-card": "^1.17.0",
159-
"@ant-design/pro-descriptions": "^1.9.29",
160-
"@ant-design/pro-field": "^1.24.1",
161-
"@ant-design/pro-form": "^1.46.0",
162-
"@ant-design/pro-layout": "^6.27.2",
163-
"@ant-design/pro-list": "^1.18.0",
164-
"@ant-design/pro-table": "^2.56.8",
165-
"@babel/runtime": "^7.16.0",
158+
"@ant-design/pro-card": "^1.18.10",
159+
"@ant-design/pro-descriptions": "^1.10.15",
160+
"@ant-design/pro-field": "^1.28.8",
161+
"@ant-design/pro-form": "^1.49.12",
162+
"@ant-design/pro-layout": "^6.31.7",
163+
"@ant-design/pro-list": "^1.20.15",
164+
"@ant-design/pro-table": "^2.59.10",
165+
"@babel/runtime": "^7.16.3",
166166
"@koale/useworker": "^4.0.2",
167-
"@lingui/react": "^3.12.1",
168-
"ahooks": "^2.10.12",
169-
"antd": "^4.16.13",
167+
"@lingui/detect-locale": "^3.13.0",
168+
"@lingui/react": "^3.13.0",
169+
"ahooks": "^3.0.1",
170+
"antd": "^4.17.3",
170171
"classnames": "^2.3.1",
171172
"history": "^5.1.0",
172173
"lodash": "^4.17.21",
173174
"nano-memoize": "^1.2.1",
174175
"nanoid": "^3.1.30",
175-
"qiankun": "^2.5.1",
176-
"qs": "^6.10.1",
176+
"qiankun": "^2.6.2",
177+
"qs": "^6.10.2",
177178
"react": "^17.0.2",
178179
"react-avatar-editor": "^12.0.0",
179180
"react-dom": "^17.0.2",
180-
"react-router-dom": "^6.0.1",
181+
"react-router-dom": "^6.1.0",
181182
"react-use": "^17.3.1",
182183
"recoil": "^0.5.2",
183184
"umi-request": "^1.4.0"

‎src/app.jsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
1+
import { Suspense } from "react";
2+
import PageLoading from "@/components/PageLoading";
23
import { useRoutes } from "react-router-dom";
34
// import { setConfig } from 'react-hot-loader';
45
import Locale from "@/components/Locale";
@@ -20,9 +21,11 @@ function App() {
2021
let element = useRoutes(appRoute);
2122

2223
return (
23-
<Locale>
24-
{element}
25-
</Locale>
24+
<Suspense fallback={<PageLoading />} >
25+
<Locale>
26+
{element}
27+
</Locale>
28+
</Suspense>
2629
)
2730
}
2831

‎src/atoms/locale.js

+47-32
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,30 @@ import { atom, selector } from "recoil";
22
import { i18n } from "@lingui/core";
33

44

5+
const localStorageLangEffect = key => ({setSelf, onSet, trigger}) => {
6+
// If there's a persisted value - set it on load
7+
const loadPersisted = async () => {
8+
const savedValue = await localStorage.getItem(key);
9+
10+
if (savedValue != null) {
11+
setSelf(JSON.parse(savedValue));
12+
}
13+
};
14+
15+
// Asynchronously set the persisted data
16+
if (trigger === 'get') {
17+
loadPersisted();
18+
}
19+
20+
// Subscribe to state changes and persist them to localStorage
21+
onSet((newValue, _, isReset) => {
22+
isReset
23+
? localStorage.removeItem(key)
24+
: localStorage.setItem(key, JSON.stringify(newValue));
25+
});
26+
};
27+
28+
529
export const locales = {
630
"zh-CN":{
731
name:"简体中文",
@@ -27,19 +51,32 @@ export const locales = {
2751
export const curLangAtom = atom({
2852
key: "curLangAtom",
2953
default: "zh-CN",
30-
effects_UNSTABLE:[
31-
({onSet}) => {
32-
// 用户国际化内容,同时菜单也国际化
33-
onSet((newLang,oldValue) => {
34-
if(newLang !== oldValue) {
35-
dynamicActivateCustomLocale(newLang)
54+
// effects_UNSTABLE:[
55+
// ({onSet}) => {
56+
// // 用户国际化内容,同时菜单也国际化
57+
// onSet((newLang,oldValue) => {
58+
// if(newLang !== oldValue) {
59+
// dynamicActivateCustomLocale(newLang)
3660

37-
}
38-
})
39-
}
40-
]
61+
// }
62+
// })
63+
// },
64+
// localStorageLangEffect('lang')
65+
// ]
4166
});
4267

68+
export const curLocaleLoadAtom = selector({
69+
key:"curLocaleLoadAtom",
70+
default:'none',
71+
get:async ({get}) => {
72+
const lang = get(curLangAtom);
73+
const { messages } = await import(/* webpackChunkName: 'i18n' */`@/locales/${lang}.js`);
74+
i18n.load(lang, messages)
75+
i18n.activate(lang)
76+
return lang;
77+
}
78+
})
79+
4380

4481
// UI 国际化内容
4582
// UI 内容随curLangAtom 而改变，故为selector
@@ -50,25 +87,3 @@ export const antdLocaleAtom = selector({
5087
return locales[get(curLangAtom)].antd
5188
}
5289
});
53-
54-
55-
/**
56-
* We do a dynamic import of just the catalog that we need
57-
* @param locale any locale string
58-
*/
59-
async function dynamicActivateCustomLocale(locale) {
60-
61-
// request.get(`${window.location.origin}/public/locales/${locale}.json`,{
62-
// // request.get(`./public/locales/${locale}.json`,{
63-
// responseType: "json",
64-
// }).then(
65-
// res => {
66-
// i18n.load(locale, res)
67-
// i18n.activate(locale)
68-
// }
69-
// )
70-
71-
const { messages } = await import(/* webpackChunkName: 'i18n' */`@/locales/${locale}.js`);
72-
i18n.load(locale, messages)
73-
i18n.activate(locale)
74-
}

‎src/atoms/route.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { atom,selector } from 'recoil';
2-
import {staticConfig,dynamicConfig,generateRouteAndProlayoutMenus,mergeRoute} from '@/utils/route-utils';
3-
import { curLangAtom } from '@/atoms/locale';
2+
import {staticConfig,dynamicConfig,generateRouteAndProlayoutMenus,mergeRoute,translateNameProperty} from '@/utils/route-utils';
3+
import { curLocaleLoadAtom } from '@/atoms/locale';
44
// import { i18n } from "@lingui/core";
55
// import memoized from "nano-memoize";
66

@@ -24,7 +24,7 @@ import { curLangAtom } from '@/atoms/locale';
2424
// export const transDynamicConfigAtom = selector({
2525
// key:'transDynamicConfigAtom',
2626
// get:({get}) => {
27-
// return transConfigName(get(dynamicConfigAtom),get(curLangAtom));
27+
// return transConfigName(get(dynamicConfigAtom),get(curLocaleLoadAtom));
2828
// }
2929
// });
3030

@@ -51,12 +51,12 @@ import { curLangAtom } from '@/atoms/locale';
5151
},
5252
});
5353
// 翻译name，方便后续使用
54-
// export const transDynamicRouteAtom = selector({
55-
// key: 'transDynamicRouteAtom',
56-
// get:({get}) => {
57-
// return translateNameProperty(get(dynamicRouteAtom),get(curLangAtom));
58-
// }
59-
// });
54+
export const transDynamicRouteAtom = selector({
55+
key: 'transDynamicRouteAtom',
56+
get:async ({get}) => {
57+
return translateNameProperty(get(dynamicRouteAtom),get(curLocaleLoadAtom));
58+
}
59+
});
6060

6161
export const appRouteAtom = selector({
6262
key:'appRouteAtom',

‎src/components/CountDownButton/index.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
import { Button } from "antd";
33
// import { useInterval, useBoolean } from "react-use";
4-
// import { usePersistFn, useCounter } from "ahooks"
5-
import { usePersistFn, useInterval, useBoolean, useCounter,useSafeState } from "ahooks"
4+
// import { useMemoizedFn, useCounter } from "ahooks"
5+
import { useMemoizedFn, useInterval, useBoolean, useCounter,useSafeState } from "ahooks"
66

77
/* 是否开始倒计时
88
start?: boolean;
@@ -31,7 +31,7 @@ const CountDownButton = ({ start, second, initText, resetText, runText, onEnd, .
3131
const [delay] = useSafeState(1000); // 1000
3232
const [done, doneOp] = useBoolean(false);
3333

34-
const timeout = usePersistFn(() => {
34+
const timeout = useMemoizedFn(() => {
3535
// 设置为运行结束后状态
3636
// 发出倒计时结束事件
3737
onEnd && onEnd();

0 commit comments

Comments
 (0)