|
1 | 1 | # babel-plugin-react-intl
|
2 | 2 |
|
3 |
| -Extracts string messages for translation from modules that use [React Intl][]. |
4 |
| - |
5 |
| -## Dependencies |
6 |
| - |
7 |
| -### React Intl |
8 |
| - |
9 |
| -This Babel plugin works with React Intl v2.x |
10 |
| - |
11 |
| -### Babel |
12 |
| - |
13 |
| -- **3.x** of this plugin works with Babel 7 |
14 |
| -- **2.x** works with Babel 6 |
15 |
| -- **1.x** works with Babel 5 |
16 |
| - |
17 |
| -## Installation |
18 |
| - |
19 |
| -```sh |
20 |
| -$ npm install babel-plugin-react-intl |
21 |
| -``` |
22 |
| - |
23 |
| -## Usage |
24 |
| - |
25 |
| -**This Babel plugin only visits ES6 modules which `import` React Intl.** |
26 |
| - |
27 |
| -The default message descriptors for the app's default language will be extracted from: `defineMessages()`, `defineMessage()`, and `<FormattedMessage>`; all of which are named exports of the React Intl package. |
28 |
| - |
29 |
| -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. |
30 |
| - |
31 |
| -### Via `.babelrc` (Recommended) |
32 |
| - |
33 |
| -**.babelrc** |
34 |
| - |
35 |
| -```json |
36 |
| -{ |
37 |
| - "plugins": [ |
38 |
| - [ |
39 |
| - "react-intl", |
40 |
| - { |
41 |
| - "messagesDir": "./build/messages/" |
42 |
| - } |
43 |
| - ] |
44 |
| - ] |
45 |
| -} |
46 |
| -``` |
47 |
| - |
48 |
| -### Options |
49 |
| - |
50 |
| -- **`messagesDir`**: The target location where the plugin will output a `.json` file corresponding to each component from which React Intl messages were extracted. If not provided, the extracted message descriptors will only be accessible via Babel's API. |
51 |
| - |
52 |
| -- **`extractSourceLocation`**: Whether the metadata about the location of the message in the source file should be extracted. If `true`, then `file`, `start`, and `end` fields will exist for each extracted message descriptors. Defaults to `false`. |
53 |
| - |
54 |
| -- **`moduleSourceName`**: The ES6 module source name of the React Intl package. Defaults to: `"react-intl"`, but can be changed to another name/path to React Intl. |
55 |
| - |
56 |
| -- **`overrideIdFn`**: A function with the signature `(id: string, defaultMessage: string, description: string|object) => string` which allows you to override the ID both in the extracted javascript and messages. |
57 |
| - |
58 |
| -- **`removeDefaultMessage`**: Remove `defaultMessage` field in generated js after extraction. |
59 |
| - |
60 |
| -- **`additionalComponentNames`**: Additional component names to extract messages from, e.g: `['FormattedFooBarMessage']`. **NOTE**: By default we check for the fact that `FormattedMessage` are imported from `moduleSourceName` to make sure variable alias works. This option does not do that so it's less safe. |
61 |
| - |
62 |
| -- **`extractFromFormatMessageCall`**: Opt-in to extract from `intl.formatMessage` call with the same restrictions, e.g: has to be called with object literal such as `intl.formatMessage({ id: 'foo', defaultMessage: 'bar', description: 'baz'})` |
63 |
| - |
64 |
| -- **`outputEmptyJson`**: output file with empty `[]` if src has no messages. For build systems like bazel that relies on specific output mapping, not writing out a file can cause issues. |
65 |
| - |
66 |
| -- **`pragma`**: parse specific additional custom pragma. This allows you to tag certain file with metadata such as `project`. For example with this file: |
67 |
| - |
68 |
| -```tsx |
69 |
| -// @intl-meta project:my-custom-project |
70 |
| -import {FormattedMessage} from 'react-intl'; |
71 |
| - |
72 |
| -<FormattedMessage defaultMessage="foo" id="bar" />; |
73 |
| -``` |
74 |
| - |
75 |
| -and with option `{pragma: "@intl-meta"}`, we'll parse out `// @intl-meta project:my-custom-project` into `{project: 'my-custom-project'}` in the result file. |
76 |
| - |
77 |
| -### Via Node API |
78 |
| - |
79 |
| -The extract message descriptors are available via the `metadata` property on the object returned from Babel's `transform()` API: |
80 |
| - |
81 |
| -```javascript |
82 |
| -require('@babel/core').transform('code', { |
83 |
| - plugins: ['react-intl'], |
84 |
| -}); // => { code, map, ast, metadata['react-intl'].messages, metadata['react-intl'].meta }; |
85 |
| -``` |
86 |
| - |
87 |
| -[react intl]: https://github.com/formatjs/react-intl |
| 3 | +We've migrated the README to [here](../../website/docs/tooling/babel-plugin.md). |
0 commit comments