vite-i18n-loader: 专注于大型项目的 i18n 管理工具

大型项目里的i18n文件往往很大,管理好,保证代码无冲突是个必须要解决的问题
更新于: 2024-09-21 11:22:15
项目主页: https://github.com/afeiship/i18n-packages/tree/main/packages/vite-i18n-loader

背景

在公司项目中,我使用 public/locales/*.json 文件来管理项目的国际化,但项目变大,i18n文件会变得巨大,巨难维护

  1. 开发人员变多的时候,经常会有多个人要改同一个文件的情况,会经常有代码冲突产生
  2. 使用自己定义的时候,也很难找到对应的 key 来显示 i18n 的值
  3. 翻译部分,不需要借助翻译软件,而是由 AI 自动提示生成,这也是为什么下面的 locale.yml 推荐写在一个文件里的原因

安装

yarn add --dev @jswork/vite-i18n-loader
yarn add i18next-http-backend react-i18next i18next

配置

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-component 以及这个文件 locale.yml

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

定义一个 locale.yml

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

languages:
  zh-CN:
    title: 组件名称
    description: 第一个i18n示例组件
  en-US:
    title: Component Name
    description: The first i18n example component

组件中使用

/**
 * @email: aric.zheng@alo7.com
 * @description: A React component.
 * @updated_at: 2024-09-21 08:49:49
 */

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

export default Anonymous;

优化版,useIntl

可以指定 scope(keyPrefix),即 local id

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;