Skip to content

Commit

Permalink
支持react-router6,ahook3,修复#19菜单打开失败的问题，更新依赖至最新，移除不必要的包，删除多余webpack配置项，…
Browse files Browse the repository at this point in the history 
…优化国际化加载逻辑
  • Loading branch information
@X-neuron
X-neuron committed Dec 11, 2021
1 parent cb5e41f commit f4dc3d1
Show file tree
Hide file tree
Showing 13 changed files with 209 additions and 186 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,6 @@ run/
*.un~
typings/
.nyc_output/
.vscode/
database/

105 changes: 53 additions & 52 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"build": "npx cross-env NODE_ENV=production webpack --mode=production --config ./webpack/webpack.config.js",
"dev": "npx cross-env NODE_ENV=development webpack serve --mode=development --config ./webpack/webpack.config.js",
"test": "jest",
"debug-webpack": "node --inspect-brk=5858 ./node_modules/.bin/webpack --mode=development --config ./webpack/webpack.config.js",
"extract": "lingui extract",
"compile": "lingui compile",
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
Expand Down Expand Up @@ -57,127 +58,127 @@
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/eslint-parser": "^7.16.0",
"@babel/eslint-parser": "^7.16.3",
"@babel/eslint-plugin": "^7.14.5",
"@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-export-default-from": "^7.16.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.16.0",
"@babel/plugin-transform-react-constant-elements": "^7.16.0",
"@babel/plugin-transform-react-inline-elements": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@lingui/cli": "^3.12.1",
"@lingui/macro": "^3.12.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@lingui/cli": "^3.13.0",
"@lingui/macro": "^3.13.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@umijs/babel-plugin-auto-css-modules": "^3.5.20",
"babel-loader": "^8.2.3",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-import": "^1.13.3",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-macros": "^3.1.0",
"browserslist": "^4.17.6",
"browserslist": "^4.18.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"circular-dependency-plugin": "^5.2.2",
"compression-webpack-plugin": "^9.0.0",
"copy-webpack-plugin": "^9.0.1",
"compression-webpack-plugin": "^9.1.1",
"copy-webpack-plugin": "^10.1.0",
"cross-env": "^7.0.3",
"cross-port-killer": "^1.3.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.1.1",
"eslint": "^8.2.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-base": "^14.2.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"eslint": "^8.4.1",
"eslint-config-airbnb": "^19.0.2",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-webpack": "^0.13.2",
"eslint-plugin-compat": "^3.13.0",
"eslint-plugin-compat": "^4.0.0",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jest": "^25.2.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^25.3.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-markdown": "^2.2.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.1.1",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-webpack-plugin": "^3.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"html-loader": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"husky": "^7.0.4",
"jest": "^27.3.1",
"jest": "^27.4.4",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"lint-staged": "^11.2.6",
"mini-css-extract-plugin": "^2.4.4",
"lint-staged": "^12.1.2",
"mini-css-extract-plugin": "^2.4.5",
"mockjs": "^1.1.0",
"node-sass": "^6.0.1",
"node-sass": "^7.0.0",
"npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"pnp-webpack-plugin": "^1.7.0",
"postcss": "^8.3.11",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.2.0",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^6.7.0",
"postcss-preset-env": "^7.0.1",
"postcss-safe-parser": "^6.0.0",
"prettier": "^2.4.1",
"prettier": "^2.5.1",
"raw-loader": "^4.0.2",
"react-dev-utils": "^11.0.4",
"react-perf-devtool": "^3.1.8",
"react-refresh": "^0.10.0",
"react-refresh": "^0.11.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
"sass": "^1.45.0",
"sass-loader": "^12.4.0",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"stylelint": "^14.0.1",
"stylelint": "^14.1.0",
"stylelint-config-recommended": "^6.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"sugarss": "^4.0.1",
"terser-webpack-plugin": "^5.2.4",
"terser-webpack-plugin": "^5.2.5",
"url-loader": "^4.1.1",
"webpack": "^5.62.1",
"webpack": "^5.65.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1",
"webpack-dashboard": "^3.3.6",
"webpack-dev-server": "4.4.0",
"webpack-dev-server": "4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"webpackbar": "^5.0.2",
"workbox-webpack-plugin": "^6.3.0"
"workbox-webpack-plugin": "^6.4.2"
},
"dependencies": {
"@ahooksjs/use-request": "^2.8.13",
"@ant-design/icons": "^4.7.0",
"@ant-design/pro-card": "^1.17.0",
"@ant-design/pro-descriptions": "^1.9.29",
"@ant-design/pro-field": "^1.24.1",
"@ant-design/pro-form": "^1.46.0",
"@ant-design/pro-layout": "^6.27.2",
"@ant-design/pro-list": "^1.18.0",
"@ant-design/pro-table": "^2.56.8",
"@babel/runtime": "^7.16.0",
"@ant-design/pro-card": "^1.18.10",
"@ant-design/pro-descriptions": "^1.10.15",
"@ant-design/pro-field": "^1.28.8",
"@ant-design/pro-form": "^1.49.12",
"@ant-design/pro-layout": "^6.31.7",
"@ant-design/pro-list": "^1.20.15",
"@ant-design/pro-table": "^2.59.10",
"@babel/runtime": "^7.16.3",
"@koale/useworker": "^4.0.2",
"@lingui/react": "^3.12.1",
"ahooks": "^2.10.12",
"antd": "^4.16.13",
"@lingui/detect-locale": "^3.13.0",
"@lingui/react": "^3.13.0",
"ahooks": "^3.0.1",
"antd": "^4.17.3",
"classnames": "^2.3.1",
"history": "^5.1.0",
"lodash": "^4.17.21",
"nano-memoize": "^1.2.1",
"nanoid": "^3.1.30",
"qiankun": "^2.5.1",
"qs": "^6.10.1",
"qiankun": "^2.6.2",
"qs": "^6.10.2",
"react": "^17.0.2",
"react-avatar-editor": "^12.0.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.1",
"react-router-dom": "^6.1.0",
"react-use": "^17.3.1",
"recoil": "^0.5.2",
"umi-request": "^1.4.0"
Expand Down
11 changes: 7 additions & 4 deletions src/app.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@

import { Suspense } from "react";
import PageLoading from "@/components/PageLoading";
import { useRoutes } from "react-router-dom";
// import { setConfig } from 'react-hot-loader';
import Locale from "@/components/Locale";
Expand All @@ -20,9 +21,11 @@ function App() {
let element = useRoutes(appRoute);

return (
<Locale>
{element}
</Locale>
<Suspense fallback={<PageLoading />} >
<Locale>
{element}
</Locale>
</Suspense>
)
}

Expand Down
79 changes: 47 additions & 32 deletions src/atoms/locale.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,30 @@ import { atom, selector } from "recoil";
import { i18n } from "@lingui/core";


const localStorageLangEffect = key => ({setSelf, onSet, trigger}) => {
// If there's a persisted value - set it on load
const loadPersisted = async () => {
const savedValue = await localStorage.getItem(key);

if (savedValue != null) {
setSelf(JSON.parse(savedValue));
}
};

// Asynchronously set the persisted data
if (trigger === 'get') {
loadPersisted();
}

// Subscribe to state changes and persist them to localStorage
onSet((newValue, _, isReset) => {
isReset
? localStorage.removeItem(key)
: localStorage.setItem(key, JSON.stringify(newValue));
});
};


export const locales = {
"zh-CN":{
name:"简体中文",
Expand All @@ -27,19 +51,32 @@ export const locales = {
export const curLangAtom = atom({
key: "curLangAtom",
default: "zh-CN",
effects_UNSTABLE:[
({onSet}) => {
// 用户国际化内容,同时菜单也国际化
onSet((newLang,oldValue) => {
if(newLang !== oldValue) {
dynamicActivateCustomLocale(newLang)
// effects_UNSTABLE:[
// ({onSet}) => {
// // 用户国际化内容,同时菜单也国际化
// onSet((newLang,oldValue) => {
// if(newLang !== oldValue) {
// dynamicActivateCustomLocale(newLang)

}
})
}
]
// }
// })
// },
// localStorageLangEffect('lang')
// ]
});

export const curLocaleLoadAtom = selector({
key:"curLocaleLoadAtom",
default:'none',
get:async ({get}) => {
const lang = get(curLangAtom);
const { messages } = await import(/* webpackChunkName: 'i18n' */`@/locales/${lang}.js`);
i18n.load(lang, messages)
i18n.activate(lang)
return lang;
}
})


// UI 国际化内容
// UI 内容随curLangAtom 而改变，故为selector
Expand All @@ -50,25 +87,3 @@ export const antdLocaleAtom = selector({
return locales[get(curLangAtom)].antd
}
});


/**
* We do a dynamic import of just the catalog that we need
* @param locale any locale string
*/
async function dynamicActivateCustomLocale(locale) {

// request.get(`${window.location.origin}/public/locales/${locale}.json`,{
// // request.get(`./public/locales/${locale}.json`,{
// responseType: "json",
// }).then(
// res => {
// i18n.load(locale, res)
// i18n.activate(locale)
// }
// )

const { messages } = await import(/* webpackChunkName: 'i18n' */`@/locales/${locale}.js`);
i18n.load(locale, messages)
i18n.activate(locale)
}
18 changes: 9 additions & 9 deletions src/atoms/route.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { atom,selector } from 'recoil';
import {staticConfig,dynamicConfig,generateRouteAndProlayoutMenus,mergeRoute} from '@/utils/route-utils';
import { curLangAtom } from '@/atoms/locale';
import {staticConfig,dynamicConfig,generateRouteAndProlayoutMenus,mergeRoute,translateNameProperty} from '@/utils/route-utils';
import { curLocaleLoadAtom } from '@/atoms/locale';
// import { i18n } from "@lingui/core";
// import memoized from "nano-memoize";

Expand All @@ -24,7 +24,7 @@ import { curLangAtom } from '@/atoms/locale';
// export const transDynamicConfigAtom = selector({
// key:'transDynamicConfigAtom',
// get:({get}) => {
// return transConfigName(get(dynamicConfigAtom),get(curLangAtom));
// return transConfigName(get(dynamicConfigAtom),get(curLocaleLoadAtom));
// }
// });

Expand All @@ -51,12 +51,12 @@ import { curLangAtom } from '@/atoms/locale';
},
});
// 翻译name，方便后续使用
// export const transDynamicRouteAtom = selector({
// key: 'transDynamicRouteAtom',
// get:({get}) => {
// return translateNameProperty(get(dynamicRouteAtom),get(curLangAtom));
// }
// });
export const transDynamicRouteAtom = selector({
key: 'transDynamicRouteAtom',
get:async ({get}) => {
return translateNameProperty(get(dynamicRouteAtom),get(curLocaleLoadAtom));
}
});

export const appRouteAtom = selector({
key:'appRouteAtom',
Expand Down
6 changes: 3 additions & 3 deletions src/components/CountDownButton/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

import { Button } from "antd";
// import { useInterval, useBoolean } from "react-use";
// import { usePersistFn, useCounter } from "ahooks"
import { usePersistFn, useInterval, useBoolean, useCounter,useSafeState } from "ahooks"
// import { useMemoizedFn, useCounter } from "ahooks"
import { useMemoizedFn, useInterval, useBoolean, useCounter,useSafeState } from "ahooks"

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

const timeout = usePersistFn(() => {
const timeout = useMemoizedFn(() => {
// 设置为运行结束后状态
// 发出倒计时结束事件
onEnd && onEnd();
Expand Down
Loading

0 comments on commit f4dc3d1

Please sign in to comment.