Как включить файлы локали i18next в сборку ReactJS - PullRequest
Новая
       13

Как включить файлы локали i18next в сборку ReactJS

0 голосов
/ 03 декабря 2018

Я искал множество постов, но безуспешно решил мою проблему со сборкой.

У меня есть две основные проблемы

  1. / public / locale / xx / xxx.json файлыпути не включаются после сборки
  2. Фоны фоновых изображений, используемые в css, не работают должным образом

Структура выглядит следующим образом: 

my-app
  public
    images
      image.jpg
    locale
      xx
        xxx.json
  src

И фоновое изображениеURL-адрес, подобный url(/images/image.jpg),

, URL-адрес работает хорошо на dev, но при производстве / после сборки он относится к пути /, независимо от значения homepage, установленного в package.json

То же самое относится и к файлам локалей.

PS : homepage не будет /, скажем, это будет /myapp/

Мой файл i18nкак: 

i18n
  use(Backend)

Я пытался установить какие-либо настройки бэкэнда (__dirname | env.PUBLIC_URL,...etc), но ничего не работает.

Это, кажется, очень распространенная проблема, так как я нашелповсюду много постов, но нет четких ответов о том, как правильно задавать относительные пути при запуске npm run build

Если yу вас есть знания, пожалуйста, дайте пошаговое руководство для чайников вид ответа.

1 Ответ

0 голосов
/ 17 апреля 2019

Мне удалось заставить его работать, используя следующую настройку:

Структура: 

├── public
|  ├── locales
|  ├── ar
|  |  ├── errors.json
|  |  ├── general.json
|  |  └── warnings.json
|  ├── en
|  |  ├── errors.json
|  |  ├── general.json
|  |  └── warnings.json
├── src
|  ├── App.js
|  ├── i18n.js

i18n.js 

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  // load translation using xhr -> see /public/locales
  .use(Backend)
  // detect user language
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    debug: false,
    defaultNS: 'general',
    ns: ['general', 'errors', 'warnings'],
    backend: {
      loadPath: `${window.location.pathname}locales/{{lng}}/{{ns}}.json`
    },
    load: 'unspecific',
    // special options for react-i18next
    // learn more: https://react.i18next.com/components/i18next-instance
    react: {
      wait: true
    }
  });

export default i18n;

Компонент

Пространства имен включены для каждого компонента по желанию (что угодно, кроме конфигурации 'defaultNS') 

class MyComponent extends React.Component{...}
export default withNamespaces('general', 'errors')(MyComponent)
...