使用Webpack 1构建时，使用react-intl消息呈现反斜杠

Question

摘要

当我使用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={ '\\\\' } />

Answer 1

使用unicode字符而不是实际的反斜杠。 反斜杠unicode是\\ 。 所以它看起来像这样渲染一个反斜杠：

    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_(ツ)_/¯',
        },
    })

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