javascript - webpack 用 json 文件中的值替换代码中的值

Question

我正在使用react-intl本地化我的应用程序。我有一个看起来像这样的 json 文件：

{
  "en": {
    "greeting": "Hello"
  },
  "es": {
    "greeting": "Hola"
  }
}

显示消息的代码如下所示。这一切都有效并显示了应有的翻译。

<FormattedMessage
    id={ 'greeting' }
    defaultMessage={ '__greeting__' }
    values={{
        greeting: messages.greeting
    }}
/>

现在是我无法弄清楚的棘手部分。我正在使用string-replace-loader来尝试defaultMessage在我的代码中找到它。然后我想用 json 文件中的相应英文值填充这些。显然我可以手动输入所有的，defaultMessages但是以后这会更麻烦，所以我希望我可以使用 webpack 来为我做这件事。

{
   test: /\.(js|jsx)$/,
   loader: require.resolve('string-replace-loader'),
   query: {
     search: '__',
     replace: \\ want to replace with the relevant key from the json file \\
    }
},

我也看过使用html webpack 插件，但是，这会破坏 jsx。

在 webpack 文件中

new HtmlWebpackPlugin({
  inject: true,
  meta: config,
  template: paths.appHtml,
}),

然后在反应代码中。

defaultMessage={ <%= htmlWebpackPlugin.options.meta.en.greeting %>}

Answer 1

您可以尝试使用多个添加所有替换

const defaultMessages = require('./path/to/messages.json').en

query: {
      multiple: Object.keys(defaultMessages).map(key => ({
       search: `__${key}__`,
       replace: defaultMessages[key]
      }))
}

但我不确定这是否是最佳选择。