[React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers-CSDN博客

本文介绍了一种在不支持JavaScript Internationalization API的浏览器中实现国际化的方法。通过使用webpack的require.ensure来有条件地加载Intl polyfill，确保只有需要polyfill的浏览器才会加载额外的内容。此外，还介绍了如何设置应用的语言环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationalization API, which react-intl depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack require.ensure. This ensures only browsers that need the polyfill incur the extra load.

if (!window.Intl) {
  require.ensure([
    'intl',
    'intl/locale-data/jsonp/en.js',
    'intl/locale-data/jsonp/fr.js',
    'intl/locale-data/jsonp/es.js'
  ], (require) => {
    require('intl');
    require('intl/locale-data/jsonp/en.js');
    require('intl/locale-data/jsonp/fr.js');
    require('intl/locale-data/jsonp/es.js');

    runApp();
  })
} else {
  runApp();
}

function runApp() {
  addLocaleData([...en, ...fr, ...es]);

  let locale = (navigator.languages && navigator.languages[0])
    || navigator.language
    || navigator.userLanguage
    || 'en-US';

  ReactDOM.render(
    <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
      <App />
    </IntlProvider>,
    document.getElementById('root')
  );
}