Merge descriptors of messages from babel-plugin-react-intl into single file.
Also creates lang files, prepared for usage as messages in IntlProvider.
This Babel plugin works with Babel Plugin React Intl v3.x
This plugin works with Babel 7
$ npm install --save-dev babel-plugin-react-intl-extractor
or
$ yarn add --dev babel-plugin-react-intl-extractor
This Babel plugin only visits ES6 modules which import
React Intl.
The default message descriptors for the app's default language will
be extracted from: defineMessages()
, <FormattedMessage>
, and <FormattedHTMLMessage>
; all of which are named exports of the React Intl package.
If a message descriptor has a description
, it'll be removed
from the source after it's extracted to save bytes since it isn't used at runtime.
config-overrides.js
const {addBabelPlugin, override} = require('customize-cra')
module.exports = override(
...
addBabelPlugin(['react-intl', {enforceDescriptions: false}]),
addBabelPlugin(['react-intl-extractor', {extractedFile: './src/translations/aggregated.json'}]),
...
)
.babelrc
{
"plugins": [
[
"react-intl", {
"messagesDir": ""
}
],
[
"react-intl-extractor",
{
"extractedFile": "./src/translations/aggregated.json",
"langFiles": [{
"path": "./src/translations/ru.json",
"cleanUpNewMessages": false
}, {
"path": "./src/translations/en.json",
"cleanUpNewMessages": true
}]
}
]
]
}
You can provide any parameter to react-intl plugin, except moduleSourceName
,
because this plugin expects only "react-intl" value for param moduleSourceName
-
extractedFile
: The target location where the plugin will output a descriptors for each component from which React Intl messages were extracted. Default: "./src/translations/aggregated.json" -
langFiles
: The target location where the plugin will output a messages (Object.<id, string>) for each component from which React Intl messages were extracted. Default: [{ path: "./src/translations/en.json", cleanUpNewMessages: true }, { path: "./src/translations/ru.json", cleanUpNewMessages: false }]
If you use babel-plugin-react-intl-auto
You must use plugins in that order:
- babel-plugin-react-intl-auto
- babel-plugin-react-intl
- babel-plugin-react-intl-extractor