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

Question

我有一个用create-react-app创建的带有类型记录的项目。我一直在努力寻找最好的方式来组织我的信息。这是我的方法：

• 我已经用/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;

我是拥有这个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",