自动化构建react_自动化React内部化

自动化构建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之间的字母数。

使用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)

1. 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)

1. Message Declaration
   讯息宣告
2. Message Extraction
   信息提取
3. Make Catalog
   制作目录
4. Compiling Messages
   编译消息
5. Message Distribution
   讯息分配

📔留言声明 (📔 Message Declaration)

There are three ways to declare messages:

有三种声明消息的方法：

1. Using imperative API intl.formatMessage

   使用命令式API intl.formatMessage

2. Using React API <FormattedMessage/>

2.使用React API <FormattedMessage/>

3. Pre-declaring using defineMessage for later consumption (less recommended)

3.使用defineMessage进行预声明以供以后使用(不建议使用)

🧲消息提取 (🧲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:

为了提取消息，有两个选项：

1. Formatjs.

   Formatjs 。

Installation

安装

npm install formatjs

npm install formatjs

Usage

用法

Add the below script to package.json

将以下脚本添加到package.json

--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:

输出示例：

2. babel-plugin-react-intl

2. babel-plugin-react-intl

Installation

安装

npm install babel-plugin-react-intl

npm install babel-plugin-react-intl

Usage

用法

Create a .babelrc file with the below content:

创建一个.babelrc文件，其内容如下：

Add the below script to package.json

将以下脚本添加到 package.json

Example output:

输出示例：

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 示例

💥编译消息 (💥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

The below command compiles a single file:

下面的命令编译一个文件：

The gulpfile.js compiles all the files from lang folder to compiled-lang folder.

gulpfile.js将lang文件夹中的所有文件编译到gulpfile.js compiled-lang文件夹中。

Compiled fr.json

编译fr.json

📫消息分发 (📫Message Distribution)

Below is the projected structure followed:

以下是预计的结构：

The current local is decided based on the browser locale:

当前的本地语言是根据浏览器的语言环境决定的：

Dynamic import is used to load the specific compiled-lang file based on the language:

动态导入用于根据以下语言加载特定的编译语言文件：

🛡参考 (🛡References)

1. Localizing your react app

   本地化您的应用

2. React app with react-intl + Example

   使用react-intl的React应用+示例

3. How to Internationalize (i18n) React 16+ App with react-intl Package

   如何使用react-intl软件包国际化(i18n)React 16+ App

4. Help wanted Using react-intl

   需要帮助使用react-intl

5. How To Use React-Intl: internationalize your React app

   如何使用React-Intl：国际化您的React应用

翻译自: https://medium.com/@palakash/complete-guide-on-react-internalization-92fdd9e87a9c

自动化构建react