CLI‑Based Multilingual Refactor for React Components Using translate‑cli and react‑intl‑universal

Many business components need multilingual support, but developers currently have to manually wrap each text string with intl.get(key) , maintain separate JSON files for each language, and rely on Google Translate, which increases development cost and error risk. To address this, the team adopted the company's translate-cli , an international translation platform, and the open‑source react-intl-universal library.

Existing components (over 30) would be costly to refactor one by one, so a CLI command was created to perform the migration in a single step, dramatically reducing developer effort.

The article reviews popular React i18n libraries such as react‑i18next , react‑intl , and react‑intl‑universal , explaining that they all require language JSON files and an init call followed by intl.get(key) for translation.

Drawbacks of current solutions include manual insertion of translation calls, manual maintenance of multiple JSON files, key‑value mismatches, and the need for product or operations teams to modify code‑embedded translations.

Key terminology is introduced: the internal international translation platform, translate-cli (a CLI that scans code, generates keys, performs machine translation, uploads to the platform, and replaces code), document scanning, uploading, replacement, and downloading.

For the CLI implementation, commander is used to build the command‑line interface, and jscodeshift is chosen to modify source files because it supports both JavaScript and TypeScript, offers a simple API, and provides a visual AST explorer.

The migration steps include:

Adding an i18n script to package.json that runs a series of translate commands.

Installing translate-cli and generating a translate.config.js file via Node's child_process.exec .

Replacing internal intl imports with react-intl-universal using a jscodeshift transformation that swaps string literals like '../i18n' for 'react-intl-universal' .

Example code snippets are provided for initializing react-intl-universal , using intl.get('INPUT_MOBILE') in a component, and the jscodeshift transformation script.

After the CLI tool is built, developers can run npm run i18n to automatically scan, upload, replace, and download translation resources, eliminating manual intl.get calls and JSON maintenance. Product and operations teams can edit translations directly on the platform, and developers can pull the latest changes with the same command.

The article concludes that combining translate-cli , the international translation platform, and react-intl-universal provides a low‑cost, end‑to‑end solution for multilingual support, and that the CLI built with commander and jscodeshift can help batch‑refactor codebases.

Finally, a brief recruitment notice is included, inviting readers to apply to ByteDance's commercial monetization department.