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

大型项目里的i18n文件往往很大，管理好，保证代码无冲突是个必须要解决的问题

项目主页: 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.json 的 components.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;