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 plugin，但是，这会破坏 jsx。

在 webpack 文件中

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

然后在反应代码中。

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

Answer 1

您可以尝试使用 multiple

添加所有替换项

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

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

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

webpack 将代码中的值替换为 json 文件中的值

webpack replace values in code with values from json file

javascript

reactjs

webpack

react-intl