lingui

lingui/js-lingui
- 支持 macro
- 支持语义
- 支持自动提取
- 支持 PO 格式
- lingui.dev

bash

pnpm add @lingui/macro @lingui/react
pnpm add -D @lingui/cli
# for SWC, NextJS
# 注意选择版本 https://github.com/lingui/swc-plugin#compatibility
pnpm add -D @lingui/swc-plugin

# ./src/locale/{local}/messages.po
pnpm lingui extract --clean
# ./src/locale/{local}/messages.po -> ./src/locale/{local}/messages.js
pnpm lingui compile

依赖包@lingui/macro@lingui/react@lingui/cli@lingui/swc-plugin

lingui.config.js

/** @type {import('@lingui/conf').LinguiConfig} */
module.exports = {
  locales: ['en', 'zh'],
  sourceLocale: 'en',
  catalogs: [
    {
      path: '<rootDir>/src/locales/{locale}/messages',
      include: ['src'],
    },
  ],
  format: 'po',
};

NextJS

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  // to use Lingui macros
  experimental: {
    swcPlugins: [['@lingui/swc-plugin', {}]],
  },
};

TSX

import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';

export function SomeComponent() {
  const { i18n } = useLingui();
  return (
    <div>
      <p>
        <Trans>Some Item</Trans>
      </p>
      <p>{t(i18n)`Other Item`}</p>
    </div>
  );
}

Notes

CatalogFormat - lingui.dev/ref/catalog-formats
- lingui
- minimal
- po
  - 推荐，默认
  - 支持注释、元数据（origin, flags），上下文
  - i10n 标准格式
  - ICU plural syntax
- csv
- po-gettext
  - PO with gettext Plurals

minimal

{
  "messageId": "translation"
}

Lingui

{
  "messageId": {
    "translation": "Translated message",
    "message": "Default message",
    "description": "Comment for translators",
    "origin": [["src/App.js", 3]]
  },
  "obsoleteId": {
    "translation": "Obsolete message",
    "origin": [["src/App.js", 3]],
    "obsolete": true
  }
}

Notes

关联信息

参考资料