Multi-language i18n Tool
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:
- Time-consuming translation workload: Small changes have minimal impact, but when there are many requirement texts, manual translation becomes extremely time-consuming
- AI processing limitations: When adding new languages, AI applications may not process completely due to excessive content
- Multi-developer conflicts: During team collaboration, locales keys are prone to conflicts
- 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:
- Read English baseline file
- Parse target language files
- Compare key differences
- 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
- High automation: Reduces manual translation workload
- Multi-AI service support: Flexible choice of translation providers
- Incremental updates: Only processes new content, improving efficiency
- Conflict detection: Automatically discovers key conflict issues
- CLI tooling: Easy integration into development workflows
- 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.