react-intl 在编译消息后使用 defaultRichTextElements 时显示警告

Question

我有一个项目是用 create-react-app 和 typescript 创建的。我一直在努力寻找组织信息的最佳方式。这是我的方法：

我已经在/messages/en.json中编译了消息。

{
  "a.hello": "<bold>hello</bold>",
  "a.world": "world",
  "another.another": "another <bold>message</bold>"
}

使用 defineMessages:

messages.ts

import { defineMessages } from "react-intl";

export default defineMessages({
  hello: {
    id: "a.hello",
    defaultMessage: "<bold>hello</bold>",
  },
  world: {
    id: "a.world",
    defaultMessage: "world",
  },
});

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { IntlProvider } from "react-intl";
import enMessages from "./messages/en.json";

interface Props {
  children?: React.ReactNode;
}

const Bold = (props: Props) => {
  return (
    <div>
      <strong>{props.children}</strong>
    </div>
  );
};

ReactDOM.render(
  <IntlProvider
    locale="en"
    defaultLocale="en"
    messages={enMessages}
    defaultRichTextElements={{
      bold: (chunks) => <Bold>{chunks}</Bold>,
    }}
  >
    <App />
  </IntlProvider>,
  document.getElementById("root")
);

我使用带有 FormattedMessage 组件的消息。

App.tsx

import "./App.css";
import messages from "./messages";
import { FormattedMessage } from "react-intl";

function App() {
  return (
    <div className="App">
      <FormattedMessage {...messages.hello} />{" "}
      <FormattedMessage {...messages.world} />
    </div>
  );
}

export default App;

我 extracting and compiling messages 使用这个 npm 脚本：

"extract-compile": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'temp.json' --out-file src/messages/en.json && rm temp.json"

问题是我仍然在控制台中收到此警告：

message.js:50 [@formatjs/intl] "defaultRichTextElements" was specified but "message" was not pre-compiled. 
Please consider using "@formatjs/cli" to pre-compile your messages for performance.
For more details see https://formatjs.io/docs/getting-started/message-distribution

我的做法有什么问题吗？我认为警告应该消失，但显然我遗漏了一些东西。

Answer 1

在深入研究文档后，标志 --ast（文档示例中不存在，但在 CLI 文档中有描述）似乎是关键。

"extract-compile": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'temp.json'  --ast --out-file lang/en.json && rm temp.json",

react-intl 在编译消息后使用 defaultRichTextElements 时显示警告

react-intl shows warning when using defaultRichTextElements after compiling messages

reactjs

internationalization

react-intl