Babel.js 使用Webpack 1构建时从react-intl消息呈现反斜杠

xyhw6mcr 于 2023-09-28 发布在 Babel

关注(0)|答案(2)|浏览(145)

摘要

当我使用Webpack Dev Server加载我的应用时，我的消息显示正常：\。但是，当我将应用程序捆绑到磁盘并通过nginx服务器捆绑时，我看到了反斜杠的重复：\\。

详情

我使用的是react-intl@2.2.3（目前最新版本）和babel-plugin-react-intl@2.3.1（目前最新版本）。我的目标是用\字符定义默认消息，并以任何方式呈现（FormattedMessage，formatMessage等）
我正在使用Webpack / Babel捆绑我的应用程序。在我的webpack.config.js文件中没有Babel / react-intl特定的配置，但是我使用DefinePlugin将process.env设置为'development'或'production'
当我使用Webpack Dev Server加载我的应用时，我的消息显示正常：\。然而，当我将应用程序捆绑到磁盘并通过nginx提供捆绑包时，我看到了反斜杠的重复：\\。我这里有以下指示：https://github.com/yahoo/babel-plugin-react-intl/issues/13#issuecomment-151944191关于使用4个\字符来显示最后一个\字符。
我已经尝试过使用JSX字符串、JS字符串，使用1、2和4个\字符，以及我能想到的任何其他愚蠢的组合。
任何提示或建议都非常感谢。谢谢

代码示例

我如何定义消息的一个例子

import { defineMessages } from 'react-intl'

export default defineMessages({
  message: {
    id: 'anyId',
    defaultMessage: '\\\\',
  },
})

我如何呈现我的消息的示例

<FormattedMessage { ...messages.anyID } /></span>

另一个例子，也不起作用

<FormattedMessage id='anyId' defaultMessage='\\' />

还有一个失败的例子：

<FormattedMessage id='anyId' defaultMessage={ '\\\\' } />

babeljs

来源：https://stackoverflow.com/questions/42843637/rendering-a-backslash-from-react-intl-message-when-building-with-webpack-1

2条答案

按热度按时间

14ifxucb1#

使用unicode字符而不是实际的反斜杠。反斜杠Unicode是\u005C。因此，呈现一个反斜杠时看起来像这样：

export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '\u005C',
        },
    })

或者如果你想在一行中呈现两个反斜杠：

export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '\u005C\u005C',
        },
    })

或者这个，如果你刚用完）

export default defineMessages({
        message: {
            id: 'anyId',
            defaultMessage: '¯\u005C_(ツ)_/¯',
        },
    })

最后一段代码将呈现：¯\_(ツ)_/¯

赞(0）回复(0）举报 2023-09-28

yh2wf1be2#

4年后才发现这个，但可能对某人有帮助
https://formatjs.io/docs/core-concepts/icu-syntax/#quoting--escaping
因此，对于您的问题，它将是defaultMessage: "'\'"
希望对别人有帮助：）

赞(0）回复(0）举报 2023-09-28

我来回答

Babel.js 使用Webpack 1构建时从react-intl消息呈现反斜杠

2条答案

相关问题

热门标签

最新问答