webpack - Intl Polyfill + Next.js SSR 应用

Question

我如何在 Next.js 应用程序上填充 intl？有的中文浏览器还没有，我们用react-intl，需要Intl。

Answer 1

Next.js 中的 polyfill(一般)

Next.js 有一些通用的 polyfill 示例:
https://github.com/vercel/next.js/tree/canary/examples/with-polyfills

Next.js 建议在 <App> 中导入所需的 polyfill组件，或在使用 polyfill 的单个组件中。

例如:

// /pages/_app.js

import 'polyfill_some_feature';

function MyApp({ Component, pageProps }){
  return <Component { ...pageProps } />
}

export default MyApp

Intl 的 polyfills接口(interface)

formatjs / react-intl提供一些polyfills对于 Intl API。

您需要的功能，例如 Intl.getCanonicalLocales , Intl.Locale , Intl.PluralRules , ..., 必须单独导入。

请注意，polyfill 相互依赖，因此它们的调用顺序很重要。
例如。 Intl.getCanonicalLocales 的 polyfill检查是否 typeof Intl === 'undefined' ，但是 Intl.Locale 的 polyfill依赖于 Intl 的存在已经。

这是他们的示例之一(这个示例用于实现 getCanonicalLocales ):
https://formatjs.io/docs/polyfills/intl-getcanonicallocales/#dynamic-import--capability-detection

npm i @formatjs/intl-getcanonicallocales

import { shouldPolyfill } from '@formatjs/intl-getcanonicallocales/should-polyfill';

async function polyfill() {
  if( shouldPolyfill() ){
    await import('@formatjs/intl-getcanonicallocales/polyfill');
  }
}