使用这个脚本可以自动对 minio 的前端代码中的字符添加国际化
使用此脚本可以对 minio-console 中大约 90% 的代码自动添加国际化处理，共处理 280 文件
下面是汉化后的截图
使用前
import React from 'react';
export default function Login() {
return (
<Button
label='login label'
type='submit'
>
login
</Button>
);
}使用后
import { t } from 'i18next';
import React from 'react';
export default function Login() {
return (
<Button
label={t('login label')}
type='submit'
>
{t('login')}
</Button>
);
}- 切换到
minio的仓库下，安装i18next
yarn add i18next
- 修改
/portal-ui/src/index.tsx文件 初始化i18next
import i18next from 'i18next';
i18next
.init({
lng: 'en', // if you're using a language detector, do not define the lng option
debug: true,
nsSeparator: false,
keySeparator: false,
fallbackLng: false,
resources: {
en: {
translation: {},
},
},
})
.then(() => {
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<Provider store={store}>
<StyleHandler>
<MainRouter />
</StyleHandler>
</Provider>
</React.StrictMode>
);
});- 将上面的修改部分提交 commit
git commit -m 'feat: init i18next'
git clone https://github.com/lvyueyang/minio-console-i18n.git
yarn
修改 uiSrcDir 中的相对路径，为 minio 前端仓库的路径，如果是和 minio 仓库同级则不需要配置这个路径
下面的正则是为了兼容在 windows 下执行时的路径格式
// src/config.mjs
export const uiSrcDir = path
.join(__dirname, '../../minio-console/portal-ui/src/')
.replace(/\\/g, '/');npm run all
等待命令执行完成后可以通过 git diff 查看 portal-ui/src 的文件变化
脚本执行完成后，会生成 dist/i18n/log.json 文件，将此文件拷贝至 portal-ui/src 下，后续会根据此文件进行语言翻译即可
引入后修改步骤 2 中的代码 /portal-ui/src/index.tsx
如果需要翻译为其他语言，这一步是必须做的
import i18next from 'i18next';
import en from './lang_en.json';
i18next
.init({
lng: 'en', // if you're using a language detector, do not define the lng option
debug: true,
nsSeparator: false,
keySeparator: false,
fallbackLng: false,
resources: {
en: {
translation: en,
},
},
})
.then(() => {
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<Provider store={store}>
<StyleHandler>
<MainRouter />
</StyleHandler>
</Provider>
</React.StrictMode>
);
});这个命令会针对 portal-ui/src 目录下面的 所有 tsx 文件进行国际化添加，这是最主要的命令，绝大多数的文件都是由这个命令来进行格式化的
这个命令是针对一些特殊的文件进行进行精确处理。
例如：portal-ui/src/screens/Console/valid-routes.ts，针对菜单列表的配置项进行处理
遍历 portal-ui/src下的所有文件，提取 t("key") 中的 key，并生成dist/i18n/log.json 和 dist/i18n/en.json 文件
log.json 文件是执行时的日志文件
en.json 文件是根据 log.json 生成的国际化资源文件
对代码进行 transformCode 后会添加/减少一些多余的换行，在 git diff 时影响 Review，很不美观
此脚本会对 diff 的文件进行对比，移除或添加那些换行符
目前需要在 transform 前先拷贝文件到 src/before 中
具体的使用和配置方式，请查看源码 一共 50 行
这是调用翻译接口对 lang_en.json 进行翻译的脚本，翻译完成后会生成 lang-zhCN.json 文件
这个命令可以多次执行，翻译前会自动进行对比，不会重复翻译