问题标签 [babel-plugin-react-intl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
903 浏览

reactjs - 在 React Intl 中使用静态生成消息

我有一个包含页面内容的对象,我导入它并尝试像使用任何对象变量一样使用它:

但是,我得到React Intl] Messages must be statically evaluate-able for extraction.. 我用谷歌搜索了很多,但没有找到解决方案。我babel-plugin-react-intl用来生成语言环境文件,一个贡献者说Babel 只能解析简单的静态消息

很难相信没有办法能够从另一个文件导入内容并进行翻译。必须有一种方法,我无法提出解决方案,我们将不胜感激。

0 投票
1 回答
793 浏览

reactjs - babel-plugin-react-intl - 插件似乎没有做任何事情

我已经安装了 babel-plugin-react-intl 插件,并将其添加到我的 .babelrc 文件中。我正在尝试从我的 jsx 文件中获取提取消息。我的组件源在 ./src

但什么也没有发生!有没有人知道如何让这个插件工作?

0 投票
1 回答
518 浏览

javascript - how to dynamically import languages files data into my APP.js using react_intl

i need to import the data of my selected language in index.js to app.js

My index.js

and my app.js

And my en.js

iam not getting the data from the langauges files in App.js button. can you please help me on this/ correct my code if possible

0 投票
1 回答
1925 浏览

reactjs - “babel-plugin-react-intl”没有按预期工作

我已经使用create-react-app命令创建了我的反应应用程序。现在我想以印地语和英语提供我的网站。因此,我正在使用yahoo/react-intl. 我还安装了 babel-plugin-react-intl 插件。还添加了 .babelrc 文件。

我的.babelrc文件看起来像:

但是我没有从我的 js 文件中获取提取的消息到./build/messages/.

我不知道我在哪里犯了错误。

我的 index.js 是:

我所有的 js 文件都在 components 文件夹中。

敌人示例我的Hello.js组件如下所示:

package.json的是:

0 投票
0 回答
213 浏览

reactjs - 无法将 react-intl-webpack-plugin 与 create-react-app 一起使用

我想使用 react-intl-webpack-plugin 将来自 babel-plugin-react-intl 的消息合并到一个消息文件中。我已经配置了 webpack.config.dev.js,但是,当我运行“yarn start”时,出现以下错误:

我根据说明设置了 react-intl-webpack-plugin。webpack.config.dev.js 中的相关配置如下所示:

我的项目是由 create-react-app 创建的,然后弹出。webpack 和 react-intl-webpack-plugin 的版本分别是 3.8.1 和 0.3.0。

谢谢你。

0 投票
0 回答
600 浏览

reactjs - 使用 TypeScript 在 CRA 中提取 i18n 消息

我正在尝试提取 i18n 消息(由react-intl's定义defineMessages)以使用 TypeScript 在 CRA 中正常工作。
我有一个由 CRA 引导的现有反应应用程序,其中包含数百行代码。因此,不使用 TypeScript 重写应用程序不是一种选择。


这是我到目前为止尝试过的:

第一次尝试

遵循本指南以使其正常工作。
当密切遵循指南(尽管react-intl-cra已弃用)时,语言文件将正确生成。
但是,如果您使用创建应用程序create-react-app react-intl-example --typescript并将其更改script

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

第二次尝试

由于react-intl-cra是指react-app-rewired解决方案,我尝试将其添加customize-crababel-plugin-react-intl新生成的 CRA(使用 TS)中。但是那里也没有运气,经过一段时间的研究后,我发现它不受官方支持

第三次尝试:

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

也因错误而失败。


没办法,特意过来问问。据我所见,TypeScript 在过去几年中得到了很好的宣传,我认为我不必证明 React 仍然被大肆宣传。此外,我无法想象,i18n 在应用程序开发中是一个不常见的问题。
但是我在 npmjs.com 上找不到任何最新的指南或任何有用的东西。

TL;博士;

我需要的:

  • defineMessages从中提取消息react-intl到 json 文件中
  • 必须在 CRA 中使用--typescript
  • 不应该使用npm run eject

我试过的:

0 投票
1 回答
633 浏览

reactjs - Webpack 解决 lodash 和其他模块的错误

仅在 Mac OSX 上使用 yarn 生成 webpack 构建会引发多个模块解析错误。使用 npm 可以正常工作。

我相信问题可能出在 webpack 配置中,以正确定位和加载模块。

在 Mac OX 上运行“yarn run build”。

这是 webpack.config.js 完整的仓库在这里https://github.com/digidem/mapeo-desktop/blob/master/webpack.config.js

0 投票
0 回答
4291 浏览

react-intl - react-intl 的大小写与底层文件系统不匹配

当前行为

import { FormattedMessage } from 'react-intl 抛出 eslint 错误

这以前没有发生过,尽管我从 v2 到 v4 做了一次巨大的更新。

你的环境

反应国际 4.1.1。
反应 16.12.0
npm 6.13.4。
节点 12.7.0。
babel-plugin-react-intl。6.0.1

0 投票
1 回答
893 浏览

reactjs - React Intl,如何一次编译多个语言文件?

根据 Format.js docs,我可以使用流动命令从源代码中提取所有消息。

它工作正常,但是当我去编译这个 lang 文件时,我只能使用以下命令一次编译一个文件。 文档链接

如果我有多个语言文件,例如:es.json、fr.json、ga.json、bn.json,那么我必须运行此命令四次,但我只想运行此命令一次,它将编译所有 JSON 文件lang 文件夹。

有什么办法吗?

0 投票
1 回答
629 浏览

react-intl - FormatJS CLI 提取

我正在尝试设置 formatjs 以与使用 react-intl 的应用程序一起使用,并且在使用他们的 CLI 进行提取时遇到了问题。我目前有将组件嵌入其中的自定义组件FormattedMessage,例如:

<AppLabel title="section_title_name"/>

<AppLabel/>它里面有<FormattedMessage id={this.props.title}.../>可以为标签提供翻译的东西。

id如果它们不使用属性来保存要提取的字符串以进行翻译,我是否仍然可以为这些不同的组件名称设置提取?