Kid Ant Financial · Data Experience Technology team
background
The React project, which requires internationalization, has been iterating for over a year and has numerous files, including JSX and regular JS object files. There are roughly a few thousand Entries in Chinese. This article first introduces the adopted internationalization scheme, and then gives the internationalization process and a self-developed script I18N-Pick, according to the tutorial, can help the front-end JSX project 5 minutes fast internationalization.
Scheme selection
Let me give you an overview of my internationalization options. There are many internationalization schemes. Here are the main ones:
- Compile-time conversions: such as wepack’s i18n-webpack-plugin, which escapes _(‘key’) at package time
- Run-time conversion: react-intl, etc., write Chinese entries as intl.get(), and obtain Chinese text at runtime
- GetText for wordpress: getText is a filter hook that replaces and localizes translated text, replacing text contained in __(), _e(), _x(), _ex(), and _n() functions
Since I chose ANTD as the visual component library in the project. So I want to keep consistent with the official internationalization method provided by ANTD. Antd recommends react-Intl, but a similar version of React-Intl-Universal is also recommended. Both are mature. So I compared the two:
| react-intl | react-intl-universal | |
|---|---|---|
| Toggle does not refresh the page | optimal | bad |
| Js file support (important) | bad | optimal |
| Noun odd and even numbers, default, HTML | optimal | optimal |
| No destructive | Bad (decorator code implementation changes ref) | optimal |
Odd and even nouns, default values, HTML it’s both. I won’t go into details here, but if you are interested in the specific functions, you can go to the API. More attention is actually js file support that piece. React-intl is only supported in the contents of JSX files, but due to project configuration programming, a lot of Chinese is written in JS objects. React-intl is not supported in normal JS objects, which is inconvenient. And his decorator implementation changes the component’s REF. The only good thing about it is that it doesn’t require a page refresh, but that’s fine.
For the above reasons, react-Intl-Universal was finally chosen as the internationalization scheme. However, when it came to practical use, it was found that the way to support JS objects was not very good, so I directly adopted the idea of react-Inl-universal. Intl-messageformat: intl-messageformat: intl-messageFormat: intl-messageFormat
Once the internationalization solution is selected, the implementation phase begins. No matter which scheme is chosen above, coding basically requires a special form. Either intl.get() or a copy preceded by _#. For projects that have been iterated for a long time, this involves a lot of hard work. Extract and replace the Chinese copy. The i18N-pick script is shared directly here to describe the entire internationalization process.
Using the tutorial
It is mainly divided into 3 steps, installation, scanning and extraction, and then use translation tools to translate the entry, the specific steps are as follows:
The installation
CNPM I i18n-pick CNPM use taobao mirror, will be faster.
scanning
/node_modules/i18n-pick/bin/i18n-pick.js Scan [path] last path select your code directory, after the completion of the project will generate i18n-messages folder in the root directory, including jsx.text, Text. Text and zh-ch. json files. Babel’s transformFileSync method is used to parse the following types of Babel:
- JSXAttribute
- JSXText
- AssignmentExpression
- ObjectProperty
- ArrayExpression
The basic information here covers all the situations. If you miss anything, please feel free to contact me. Compare the parsed values with /[\u4e00-\u9fa5]/. Record the file name, line number and content of the Chinese copy. The Chinese text in JSX is stored in jsx.text, and the Chinese text in JS is stored in text.text.
The reason for this is that text in JSX needs to be enclosed in curly braces when it is replaced.
At the same time, I will save the extracted copywriting content in zh-ch.json. In order to cooperate with the translation tool Tool-i10n, the storage format in JSON is also provided according to his requirements. Here’s a little tip, see appendix.
extract
/node_modules/i18n-pick/bin/i18n-pick.js pick The pick operation is performed to analyze the contents of jsx.text and text.text files by line and replace the contents of the files. So I started off with the key as a self-increasing number. In order to ensure a certain readability of the source code, I also put the original version in the form of /**/ comments at the end of the text. Later, I absorbed the suggestion of Lany9527 in the comment section. I will use Chinese as the key value ~~ and then I will import dependencies in the header of the file. The effect is as follows:
Base /reactIntlUnicersal is a file that needs to be placed in its own project. See the link for the code.
translation
Then it is recommended to install the translation tool Atool – L18N to translate the text directly into English. Then it’s ready to compile and run. Of course, there’s still some CSS tweaking to do. cnpm i atool-l10n
node_modules/.bin/atool-l10n
conclusion
This article mainly shares a copy extraction script to quickly internationalize a front-end JSX project. If you have any usage questions, please feel free to ask in the comments section
tip
Thanks to comments from Lany9527, the script has been updated. No longer use self-increasing numbers as keys. The Chinese name is used as the key for extraction. The script has been updated ~
Appendix:
1. Currently, the script does not support line breaks in Chinese, so the contents of the three files after scan have to be corrected. And this part has to be replaced manually. It’s rare, though, that out of 2,000 entries in my project, only two had this problem.
2. The second is that a compilation error may occur after the pick operation is executed. That is because your project may have a copy of \n written by hand, and you have to handle this situation manually.
3. The third option is not to support the case with \” in Chinese, which I have to handle myself, because I use Chinese as the key, in order to extract the value past ESlint, I have to raise it in single quotes. I have to escape double quotes single quotes. Unable to handle content that has already been escaped. After the document transformation is completed, you can use the scan command to scan again to see what is not processed properly, and then manually process ~
If you are interested, you can follow the column or send your resume to ‘yifei.pyf####alibaba-inc.com’. Replace (‘####’, ‘@’)
Original address: github.com/ProtoTeam/b…