react-intl-webpack-plugin
This plugin helps when using react-intl for internationalization of react apps.
Workflow
- Use
<FormattedMessage id="newItem" defaultMessage="Add item" />for adding text in your react components. - Use the babel plugin
babel-plugin-react-intlto extract them from your source code. - Use
react-intl-webpack-pluginto combine them into one message file calledreactIntlMessages.jsonand put this file into the webpack output path. - Use CAT (Computer Aided Translation) tools (like the cloud based memsource.com or okapi) to translate this file into the translated file. These tools use a concept called Translation Memory (TM) . This is a separate file where all translations are stored and with this file all translations can be reapplied to a newly generated
reactIntlMessages.jsonfile. - Save the TM file and the translated json file in a separate directory of your source code.
- Use
reactIntlJson-loaderto load the translated files and convert them to messages.
Installation
npm install react-intl-webpack-plugin --save-dev
webpack.config.js:
- add the plugin
var ReactIntlPlugin=require('react-intl-webpack-plugin');
...
plugins: [
...
new ReactIntlPlugin()
],
- modify your babel-loader to contain the
metadataSubscribersoption
module: {
loaders: [
...
{
test: /\.js?$/, loader: 'babel-loader',
query: {
"cacheDirectory": true,
"metadataSubscribers":[ReactIntlPlugin.metadataContextFunctionName],
"plugins": ["transform-runtime",
["react-intl", {
"enforceDescriptions": false
}]],
"presets": ['react', "es2015", "stage-1"]
}
},
- the generated file is called
reactIntlMessages.json
Options
You can pass a hash of configuration options to react-intl-webpack-plugin. Allowed values are as follows:, Name, Type, Default, Description, :--:, :--:, :-----:, :----------, filename, {String}, ./reactIntlMessages.json, The output filename, ## Notes
-
Keep in mind that as long as you use webpack-dev-server all assets are generated in memory. To access those assets use either:
- the browser an check http://localhost:devServerPort/reactIntlMessages.json
- or, add a script to package.json like
"trans:refreshJsonDEV": "curl localhost:3100/reactIntlMessages.json >./dist/reactIntlMessages.json" - or start your webpack build to generate the assets into the build directory.
-
If no messages are generated it could be helpful to cleanup the
cacheDirectoryof the babel-loader, or set"cacheDirectory": falsetemporarily