自动化构建react
The ability to use a system across different locals based on the region.
能够根据区域在不同的本地使用系统。
✅According to W3C:
W根据W3C :
Internalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region or language.
内部化是产品,应用程序或文档内容的设计和开发,可以使文化,地区或语言不同的目标受众轻松实现本地化 。
Internalization is often written in English as i18n, where 18 is the number of letters between i and n in the English word.
内部化通常用英文写为i18n,其中18是英文单词中i和n之间的字母数。
Localization is sometimes written in English as l10n, where 10 is the number of letters in the English word between l and n.
本地化有时用英语写成l10n,其中10是英语单词中介于l和n之间的字母数。
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/a9bffdbb502b2a3abdb73091d4f781a6.png)
使用React-intl进行翻译 (Translation using React-intl)
Translations work with plain text only not code. So the translations with variables need to be formatted and split into String template and runtime data.
翻译只能使用纯文本,不能使用代码。 因此,需要对带有变量的转换进行格式化,并将其拆分为String模板和运行时数据。
<span>Hello {name}</span>
<span>Hello {name}</span>
The String template goes to translator and runtime data remains in code. This is achieved by the Standard ICU (International Components For Unicode) Message Format.
字符串模板转到转换器,并且运行时数据保留在代码中。 这是通过标准ICU(Unicode的国际组件)消息格式实现的。
格式类型 (Types of formatting)
- Variables: 变量:
Hello {name}
Hello John
2. Date/Number formatting:
2.日期/数字格式:
Today is {now, date}
Today is 9th August 2020
3. Formatting Options:
3.格式选项:
Interest rate is {rate, number, percent}
Interest rate is 5%
4. Pluralization:
4.多元化:
{count, plural, one {# book} other {# books}}
1 book, 2 books
翻译步骤 (Steps in translation)
- Message Declaration 讯息宣告
- Message Extraction 信息提取
- Make Catalog 制作目录
- Compiling Messages 编译消息
- Message Distribution 讯息分配
📔留言声明 (📔 Message Declaration)
There are three ways to declare messages:
有三种声明消息的方法:
Using imperative API
intl.formatMessage
使用命令式API
intl.formatMessage
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/d63cad428612cc1b8e3bd4b59f867da7.png)
2. Using React API <FormattedMessage/>
2.使用React API <FormattedMessage/>
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/8c28b0cf8fa55cc1cfd311d731a304da.png)
3. Pre-declaring using defineMessage
for later consumption (less recommended)
3.使用defineMessage
进行预声明以供以后使用(不建议使用)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/460bb965b803c96fd1eb109ec0bfcdad.png)
🧲消息提取 (🧲Message Extraction)
It is the process of extracting all messages that have been declared into a single JSON file.
这是提取已声明为单个JSON文件的所有消息的过程。
For the purpose of extracting the messages there are two options:
为了提取消息,有两个选项:
Installation
安装
npm install formatjs
npm install formatjs
Usage
用法
Add the below script to package.json
将以下脚本添加到package.json
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/f3de0689b047cb856ce5a7e85e80ea89.png)
--out-file [path]
The target file path where the plugin will output an aggregated .json file of all the translations from the files supplied. This flag will ignore --messages-dir
--out-file [path]
插件将在其中输出来自所提供文件的所有翻译的汇总--out-file [path]
的目标文件路径。 该标志将忽略--messages-dir
It extracts the messages to lang
folder inside the src
folder.
它将消息提取到src
文件夹内的lang
文件夹。
--id-interpolation-pattern [pattern]
If certain message descriptors don't have id, this pattern will be used to automatically generate IDs for them. Default to [contenthash:5].
--id-interpolation-pattern [pattern]
如果某些消息描述符没有ID,则将使用此模式自动为其生成ID。 默认为[contenthash:5]。
Example output:
输出示例:
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/8106ab36ae801170899b9744417f6d5c.png)
Installation
安装
npm install babel-plugin-react-intl
npm install babel-plugin-react-intl
Usage
用法
Create a .babelrc
file with the below content:
创建一个.babelrc
文件,其内容如下:
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/37985c4562891385459c91777ff6edbe.png)
Add the below script to package.json
将以下脚本添加到 package.json
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/aa0ef271966e424d810c7dcf6daf1eef.png)
Example output:
输出示例:
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/faf263a39da7e8e5a5fe96041c1a7adc.png)
Catalog制作目录 (📚Make Catalog)
The extracted message from the previous step is sent to a TMS (Translation Management System) to generate different translated locals.
从上一步中提取的消息被发送到TMS(翻译管理系统)以生成不同的翻译后的本地语言。
This can be achieved with any of the Translation Vendors.
可以使用任何翻译供应商来实现。
For integration with Google Translate API: react-intl-auto-translate
与Google Translate API集成: react-intl-auto-translate
Example of fr.json
fr.json
示例
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/02681e3a72097ef7eeb483c154a769cf.png)
💥编译消息 (💥Compiling Messages)
The translated messages are then processed to react intl format.
然后处理翻译后的消息以响应intl格式。
Installation
安装
npm install formatjs
npm install formatjs
Usage
用法
Add the below script to package.json
将以下脚本添加到package.json
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/3b520347a25f57dd99ed13db8a768c48.png)
The below command compiles a single file:
下面的命令编译一个文件:
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/bf115584c31359878c473f0660ec99ce.png)
The gulpfile.js
compiles all the files from lang
folder to compiled-lang
folder.
gulpfile.js
将lang
文件夹中的所有文件编译到gulpfile.js
compiled-lang
文件夹中。
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/327920341a587b8e214f5b207290a629.png)
Compiled fr.json
编译fr.json
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/cf34bcc5824edf8d347cf17db13e72a2.png)
翻译自: https://medium.com/@palakash/complete-guide-on-react-internalization-92fdd9e87a9c
自动化构建react