extract-react-intl-messages


This package will generate json or yaml files from a glob. It will generate one file per locale, with the ids of each message defined by the defineMessages function of react-intl. The value of each of these keys will be an empty string, except for your defaultLocale which will be populated with the defaultMessage.

Dependencies

$3

- 0.x works with Babel 6

Install

``
$ npm install --save-dev extract-react-intl-messages
`

Usage

app/components/App/messages.js

`js
import { defineMessages, useIntl } from 'react-intl'

export default defineMessages({
hello: {
id: 'a.hello',
defaultMessage: 'hello'
},
world: {
id: 'a.world',
defaultMessage: 'world'
}
})

export const SubmitButton = () => {
const intl = useIntl()
const label = intl.formatMessage({
id: 'a.submit',
defaultMessage: 'Submit Button'
})
return {label}
}
`

$3

`
$ extract-messages -l=en,ja -o app/translations -d en --flat false './app/*/!(.test).js'
`

$3

app/translations/en.json

`json
{
"a": {
"hello": "hello",
"world": "world",
"submit": "Submit Button"
}
}
`

app/translations/ja.json

`json
{
"a": {
"hello": "",
"world": "",
"submit": ""
}
}
`

Recommend

Use with babel-plugin-react-intl-auto: i18n for the component age. Auto management react-intl ID.

CLI

`console
$ extract-messages --help

Extract react-intl messages

Usage
$ extract-react-intl-messages
$ extract-messages

Options
-o, --output Output directory [require: true]
-l, --locales locales [require: true]
-f, --format json | yaml [default: json]
-d, --defaultLocale default locale
--overwriteDefault default: true
--flat json [default: true] | yaml [default: false]
--indent default: 2

Example
$ extract-messages --locales=ja,en --output app/translations 'app/*/.js'
$ extract-messages -l=ja,en -o i18n 'src/*/.js'
$ extract-messages -l=ja,en -o app/translations -f yaml 'app/**/messages.js'
`

$3

create .babelrc like this.

`json
{
"presets": ["react-app"]
}
`

Run with NODE_ENV=development.

`
$ NODE_ENV=development extract-messages ...
`

$3

babel required.

See example/with-typescript

`
npm install --save-dev @babel/core @babel/preset-typescript @babel/preset-react
`

babel.config.js

`js
module.exports = function (api) {
api.cache(true)

return {
presets: ['@babel/preset-react', '@babel/preset-typescript']
}
}
`

API

$3

#### locales

Type: Array

Example: ['en', 'ja']

#### input

Type: Array

Target files.
glob.

#### buildDir

Type: string

Export directory.

#### options

##### defaultLocale

Type: string

Default: en

##### format

Type: json | yaml

Default: json

Set extension to output.

##### overwriteDefault

Type: boolean

Default: true

If overwriteDefault is false, it will not overwrite messages in the default locale.

##### indent

Type: number

Default: 2

##### flat

Type: boolean

Default: true

If format is yaml, set to false.

Be careful if false`.
See this issue.

##### babel-plugin-react-intl's Options

See https://github.com/formatjs/formatjs/tree/master/packages/babel-plugin-react-intl#options

Contributors

Thanks goes to these wonderful people (emoji key):

akameco 💻 ⚠️ 📖 🚇	Hoan Tran 💻 ⚠️	giantpinkwalrus 💻	enrique-ramirez 📖	Stefan Gojan 🐛 💻 ⚠️	Solomon English 💻	Filip "Filson" Pasternak 💻
nodaguti 💻 ⚠️	fix-fix 💻	bradbarrow 🐛 💻 ⚠️	Gregor MacLennan 💻	Dmitry Zarva 💻	Michael Pan 💡	Tom Erik Støwer 💻
Bart Lens 💻	Truong Hoang Dung 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © akameco