Skip to content

Bundle react-intl messages into webpack build with hot reload and caching

License

Notifications You must be signed in to change notification settings

pkuczynski/webpack-plugin-react-intl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

webpack-plugin-react-intl

npm FOSSA Status

Webpack plugin, which aggregates messages extracted by babel-plugin-react-intl into single flat json translations file to be committed along the source code.

Committing messages along the source code helps to keep a track how your base messages change over time and use this information to identify which strings needs to be (re)translated.

To avoid webpack falling into infinite reload loop when run in development mode, messages file is being created only when its different than the previous version.

Installation

npm i -D webpack-plugin-react-intl

Configuration

Add babel-plugin-react-intl to your babel configuration directly in webpack:

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            [ 'react-intl', { messagesDir: './build/messages' } ]
          ]
        }
      }
    }
  ]
}

or in babel config:

plugins: [
  [ 'react-intl', { messagesDir: './build/messages' } ]
]

Then add webpack-plugin-react-intl in the webpack.config.js:

const ReactIntlPlugin = require('webpack-plugin-react-intl')

module.exports = {
  ...
  plugins: [
    new ReactIntlPlugin({
      source: './build/messages/src',
      destination: './src/i18n/translations/en.json'
    })
  ]
  ...
}

The messagesDir and source folders must match. Location of destination is up to you.

Then you can use this file to feed IntlProvider

const Intl = ({ locale, children }) => {
  const messages = require(`./translations/${locale}.json`
  return (
    <IntlProvider locale={locale} messages={messages}>
      {children}
    </IntlProvider>
  )
}

<Intl locale="en">
  <div>...</div>
</Intl>

Credits

This plugin was heavily inspired and covers functionality (with an extra spice) of following plugins:

License

This software is MIT Licensed

FOSSA Status

About

Bundle react-intl messages into webpack build with hot reload and caching

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published