2

UI Util ライブラリの国際化に React-intl を使用しています。ライブラリには i18n というフォルダがあり、ここにさまざまなロケールの json ファイルを配置します。このライブラリのユーザーが追加のロケールのサポートを追加したい場合は、それぞれのロケールのキーと値のペアを含む追加の json ファイルを配置できます。

ただし、React-intl では、事前にそれぞれのロケールの LocaleData をインポートして追加する必要があります。たとえば、

import fr from 'react-intl/locale-data/fr';
addLocaleData([...fr]);

React-intl で、LocaleData を追加して、それぞれのロケールのロケール ライブラリを動的にインポートする方法はありますか?

4

2 に答える 2

9

Webpackを使用している場合。アプリから異なるロケール データをコード分割し、動的に読み込むことができます。Webpack 1 は require.ensure() のみをサポートし、webpack 2 は System.import() もサポートします。System.import は promise を返しますが、require.ensure はコールバックを使用します。https://webpack.github.io/docs/code-splitting.html

System.import() を使用 

import { addLocaleData } from 'react-intl';

const reactIntlLocaleData = {
  fr: () => System.import('react-intl/locale-data/fr'),
  en: () => System.import('react-intl/locale-data/en')
};

function loadLocaleData(locale){
  reactIntlLocaleData[locale]()
  .then((intlData) => {
    addLocaleData(intlData)
  }
}

require.ensure() を使用

import { addLocaleData } from 'react-intl';

const reactIntlLocaleData = {
  fr: () => require.ensure([], (require) => {
    const frData = require('react-intl/locale-data/fr');
    addLocaleData(frData);
  }),
  en: () => require.ensure([], (require) => {
    const enData = require('react-intl/locale-data/en');
    addLocaleData(enData);
  })
};

function loadLocaleData(locale){
  reactIntlLocaleData[locale]();
}

開発環境によっては、上記のコードが機能する場合と機能しない場合があります。Webpack2 を Babel と共に使用してコードをトランスパイルしていることを前提としています。

于 2016-12-22T16:03:43.487 に答える