Multi-language i18n Tool

4 minute read

Published:

Multi-language Internationalization Tool Package Design and Implementation Analysis

Project Background and Pain Points

In globalized projects, frontend multi-language management faces the following challenges:

  1. Time-consuming translation workload: Small changes have minimal impact, but when there are many requirement texts, manual translation becomes extremely time-consuming
  2. AI processing limitations: When adding new languages, AI applications may not process completely due to excessive content
  3. Multi-developer conflicts: During team collaboration, locales keys are prone to conflicts
  4. High maintenance costs: Traditional manual translation methods struggle to keep up with rapid iteration demands

Solution Design

Adopting an npm tool package approach combined with AI translation APIs to implement automated multi-language management workflows.

Technical Architecture

Project Structure:
├── package.json          # Package configuration and dependency management
├── config.mjs           # AI API configuration (supports multiple providers)
├── bin/
│   └── entry.mjs       # CLI entry file
├── lib.mjs             # Core utility functions
└── translate.mjs       # Translation core logic

Core Function Implementation

1. Multi-language Translation Function

Implementation Principle:

  • Uses English YAML file as baseline (locales/en.yaml)
  • Supports multiple languages, such as Simplified Chinese and Japanese.
  • More languages can be easily added in the future as needed.
  • Batch translation of new content through AI APIs

Technical Details:

// Translation workflow
1. Read English baseline file
2. Compare with target language files to identify new keys
3. Process in batches (avoid API limitations)
4. Call AI API for translation
5. Update target language files

2. Duplicate Key Detection Function

Implementation Principle:

  • Process YAML files through utility functions
  • Automatically format and check for key conflicts
  • Use prettier to ensure consistent code style

Detection Mechanism:

// Detection workflow
1. Parse existing YAML files
2. Compare new content with existing keys
3. Automatically deduplicate during merge
4. Format output

AI API Integration Design

Multi-AI Provider Support

Configuration Flexibility:

  • Supports multiple AI providers (ChatGpt, DeepSeek, etc.)
  • Flexible provider switching through environment variables
  • Unified API calling interface

Advantages:

  • Avoids single-point dependency risks
  • Can choose the most suitable provider based on requirements
  • Unified calling method reduces maintenance costs

Translation Strategy Optimization

Batch Processing Mechanism:

// Avoid API limitations and excessive content length
const chunks = chunk(toHandle, 1); // Process 1 key at a time
await asyncPool(1, chunks, async (item) => {
  // Translation logic
});

Error Handling:

  • Single translation failure doesn’t affect overall process
  • Detailed error log recording
  • Supports retry mechanism

CLI Tool Design

Command Interface

# Translate multi-language files
test-locale --locale

# Check multi-language files
test-locale --checklocale

# Specify root directory
test-locale -r <root> --locale

Implementation Details

Commander.js Integration:

// bin/entry.mjs
import { program } from "commander";

program
  .option("-r, --root <root>", "Root")
  .option("--locale", "translate locale")
  .option("--checklocale", "check locale")
  .parse(process.argv);

Performance Optimization Strategy

1. Asynchronous Concurrency Control

Why New Processes Are Needed:

  • AI API calls are I/O-intensive operations
  • Avoid blocking the main process
  • Control concurrency to avoid API limitations

Implementation Solution:

// Use tiny-async-pool to control concurrency
await asyncPool(1, chunks, async (item) => {
  // Translation task
});

2. Incremental Update Mechanism

Smart Detection:

// Only translate new keys
const handledKeys = Object.keys(inProgress || {});
const toHandle = keys.filter((item) => !handledKeys.includes(item));

Advantages:

  • Avoids duplicate translations
  • Saves API call costs
  • Improves processing efficiency

File Comparison Mechanism

YAML File Processing

Parsing Strategy:

// Use yaml library for parsing
const parsed = parseYaml(content);
const keys = Object.keys(parsed);

Comparison Logic:

  1. Read English baseline file
  2. Parse target language files
  3. Compare key differences
  4. Only process new content

Translation Workflow

AI Prompt Design:

  • System prompts specify target language
  • User input contains key-value pairs
  • Requires JSON format response
  • Set temperature=0 to ensure translation consistency

Project Advantages Summary

  1. High automation: Reduces manual translation workload
  2. Multi-AI service support: Flexible choice of translation providers
  3. Incremental updates: Only processes new content, improving efficiency
  4. Conflict detection: Automatically discovers key conflict issues
  5. CLI tooling: Easy integration into development workflows
  6. Comprehensive error handling: Single point failure doesn’t affect overall process

Applicable Scenarios

  • Large-scale multi-language projects
  • Frequently updated internationalization requirements
  • Team collaboration development environments
  • Scenarios requiring rapid response to market demands

This tool package solves the pain points in traditional multi-language management through AI technology, providing an efficient solution for globalized projects. Through automated translation, intelligent detection, and CLI tooling, it greatly improves the development efficiency and maintenance quality of multi-language projects.