用i18n实现CRA中的TypeScript消息提取

Question

我正在尝试提取i18n消息(由react-intl的defineMessages定义)，以便在使用TypeScript的CRA中正常工作。

我有一个现有的react应用程序，由CRA引导，有几百行代码。因此，重写应用程序w/o TypeScript不是一个选项。

到目前为止，我尝试过的是：

首次尝试

遵循这个指南，以便使它工作。

当严格遵循指南时(尽管不推荐使用react-intl-cra )，语言文件将正确生成。

但是，如果使用create-react-app react-intl-example --typescript创建应用程序并将script更改为

"extract:messages": "react-intl-cra 'src/**/*.{js,jsx,ts,tsx}' -o 'src/i18n/messages/messages.json'"

它将因编译器错误而中断。

第二次尝试

由于react-intl-cra引用的是react-app-rewired解决方案，我尝试将其与customize-cra和babel-plugin-react-intl一起添加到新生成的CRA中(使用TS)。然而，那里也没有运气，经过一小段时间的研究，我发现它是官方不支持。

第三次尝试：

将extract-react-intl-messages添加到我的项目并运行：

$ npx extract-messages -l=en,ja -o app/translations -d en --flat false 'src/**/!(*.test).tsx'

失败，也有错误。

我的想法用完了，所以我来这里问。据我所见，TypeScript在过去几年里做了很好的广告宣传，我不认为我必须证明我的反应还很夸张。此外，我无法想象，在应用程序开发中，i18n是一个不同寻常的关注点。

然而，我未能在npmjs.com上找到任何最新的指南或任何有用的东西。

TL;DR；

我需要的是：

• 将defineMessages中的消息从react-intl中提取为json文件
• 必须使用--typescript在CRA中工作。
• 不应该使用npm run eject

我试过的是：

• react-intl-cra
• react-app-rewired + customize-cra + babel-plugin-react-intl
• extract-react-intl-messages

Answer 1

在这里解释：https://github.com/akameco/extract-react-intl-messages#typescript

基本上你需要

npm install --save-dev @babel/core @babel/preset-typescript @babel/preset-react

再加上

@babel/preset-typescript

给你的.babelrc

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
}

然后你就可以跑了

npm run extract-messages 'src/**/*.[jt]sx'