react大型项目的 i18n 解决方案

安装包

# 开发使用
yarn add --dev @jswork/vite-i18n-loader

# 基本的i18next组件
yarn add i18next-http-backend react-i18next i18next 

# 自己写的 provider 简化配置
yarn add @jswork/react-i18n @jswork/i18n-language-detect

配置 provider，使用 backend 方式加载 public/locals/*.json 文件

import { LocaleProvider } from '@jswork/react-i18n';
import LNGDetect from '@jswork/i18n-language-detect';

export default (props: PropsWithChildren<any>) => {
  return (
    <LocaleProvider
      harmony
      plugins={[LNGDetect]}
      options={{ debug: false, publicURL: '/', version: '__VERSION__' }}
      routerType="browser"
      mode="backend">
      {props.children}
    </LocaleProvider>
  );
};

添加 loader 组件

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import i18nLoader from '@jswork/vite-i18n-loader';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), i18nLoader()],
  server: {
    host: '0.0.0.0'
  }
});

针对组件，添加样板文件(abc-components)

.
├── App.tsx
├── assets
│   └── react.svg
├── components
│   ├── abc-component
│   │   ├── index.tsx
│   │   └── locale.yml

文件里的值最终会写到 zh-CN/en-US.json 的 components.abc-component 这个 key 上。

# 这个id可以不写，但写了就会以写的为准
id: components.abc-component
languages:
  zh-CN:
    title: 组件名称
    description: 第一个i18n示例组件
  en-US:
    title: Component Name
    description: The first i18n example component

使用 useIntl 结合 scope

const Anonymous = () => {
  const { t } = nx.useIntl('components.abc-component');
  return (
    <div className="debug-red p-2">
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
};

export default Anonymous;