Как добавить переводы (i18n) в пакет NPM с помощью rollup.js?

Я столкнулся с той же проблемой и не смог найти ответ в Интернете, поэтому я решил ее, используя провайдера, который дает i18n, для создания экземпляра элемента i18n, а затем обернул основной экспорт в этот провайдер, чтобы он был автономным. Вот примеры того, как закончились мои файлы.

i18n.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import enTranslation from '{path-to-translations}/en/common.json';
import esTranslation from '{path-to-translations}/es/common.json';

i18n
  /*
   * i18next-browser-language detector allow i18n to get the browser language as default option language.
   */
  .use(LanguageDetector)
  /*
   * initReactI18next allows to integrate i18n with React components.
   */
  .use(initReactI18next)
  /*
   * Here i18n it's initialized
   */
  .init({
    fallbackLng: 'en',
    resources: {
      en: { common: enTranslation },
      es: { common: esTranslation },
    },
    ns: 'common',
    // debug: true,
    keySeparator: '.',
    interpolation: {
      escapeValue: false,
    },
  });
export const nameSpace = {
  common: 'common',
};
export default i18n;

ПереводWrapper.tsx

/* other imports */
import { I18nextProvider, useTranslation } from 'react-i18next';
import i18n from '../modules/i18n';

const TranslationWrapper = (props) => {
    return <I18nextProvider i18n = {i18n}>
      {props.children}
    </I18nextProvider>
};

export default TranslationWrapper;

Затем оберните каждый компонент в этот translationWrapper, и у вас должен быть хук useTranslation, доступный для использования, как const { t } = useTranslation('common') в каждом компоненте.

Наконец, не забудьте дедуплицировать useTranslation, i18n и I18nextProvider в конфигурации плагина @rollup/plugin-node-resolve, чтобы они не объявлялись один раз для каждого компонента и имели только один для всех компонентов, что-то вроде

rollup.config.js

export default {
  ...,
 plugins: [
      ...,
      resolve({
        ...{rest-config}
        dedupe: ['useTranslation', 'i18n', 'I18nextProvider', ...],
      }),
      ...
    ],
  ...
}

Это сработало для меня, потому что это довольно простая библиотека без большого количества компонентов, но если вы хотите избежать того, чтобы каждый компонент был завернут в провайдер, потому что я знаю, что нехорошо повторно экспортировать каждый компонент, но на этот раз завернутый в провайдер , вы можете заглянуть в HOC withTranslation, который работает аналогично провайдеру, но с более удобным для компонентов синтаксисом.

Надеюсь, это поможет вам!

Поскольку я также использую i18next в родительском приложении (где используются эти веб-компоненты), мне пришлось создать собственный экземпляр i18n, чтобы убедиться, что они обрабатываются отдельно:

import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from './locales/en.json';

// t function can return null, this behaviour is set by default,
// if you want to change it, set returnNull type to false.
// as per docs
declare module 'i18next' {
  interface CustomTypeOptions {
    returnNull: false;
  }
}

const i18n = i18next.createInstance();

i18n.use(LanguageDetector).init({
  debug: false,
  fallbackLng: 'en',
  nsSeparator: ':',
  resources: {
    en: en,
  },
  keySeparator: false,
  returnNull: false,
});

export { i18n };