auto-i18n-translation-plugins: Automatic Internationalization for Frontend Projects

Internationalization (i18n) is often a painful retrofit task when a project was not designed for multiple languages; developers must manually replace every literal with placeholders like ${t.xxx} , which is error‑prone and time‑consuming.

The auto-i18n-translation-plugins provides a universal solution that requires only three configuration lines. Example configuration:

const i18nPlugin = vitePluginsAutoI18n({
  targetLangList: ['en', 'ko', 'ja'],
  translator: new YoudaoTranslator({
    appId: '4xxxx9xxxx66fef',
    appKey: 'ONIxxxxGRxxxxw7UM730xxxxmB3j'
  })
});

After defining the plugin, add it to the Vite plugins array:

import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {},
  plugins: [i18nPlugin]
})

When the plugin runs, it parses the source code with Babel, generating an Abstract Syntax Tree (AST). It scans StringLiteral , TemplateLiteral , and JSXText nodes, filters out import paths, object keys, and comments, then creates a unique hash for each Chinese string and replaces it with a call such as $t('hash', '原始文本') . The modified AST is then generated back into JavaScript.

During the same traversal the plugin collects the hash‑to‑text mapping into a global object. Two collection strategies are supported: a single‑pass synchronous collection (fast) or a two‑pass approach that first inserts $t calls and later gathers all hashes.

Translation is performed by built‑in translator classes. The Youdao and Google translators inherit from a base Translator class that handles API throttling and error handling. After collecting the new texts, the plugin merges them into a long string separated by a special delimiter (e.g., \n┋┋┋\n ), sends the batch to the translator, and splits the result back into individual translations.

When new target languages are added (e.g., Korean), the plugin automatically detects missing language entries in the existing index.json file, extracts the source language texts, translates them in bulk, and appends the new language fields without manual editing.

For incremental code changes, the plugin rescans the source on each build, generates hashes for newly added literals, and updates the mapping only for texts that lack translations, leaving existing entries untouched.

At runtime the generated language JSON is imported and a global $t function is defined: // import generated language pack import langJSON from './index.json' (function () { let $t = function (key, val, nameSpace) { const langPackage = $t[nameSpace] return (langPackage || {})[key] || val } $t.locale = function (locale, nameSpace) { $t[nameSpace] = locale || {} } window.$t = window.$t || $t const langMap = { 'en': window?.lang?.en || window._getJSONKey('en', langJSON), 'ko': window?.lang?.ko || window._getJSONKey('ko', langJSON), 'zhcn': window?.lang?.zhcn || window._getJSONKey('zhcn', langJSON) } const lang = window.localStorage.getItem('lang') || 'zhcn' window.$t.locale(langMap[lang], 'lang') })(); This setup allows developers to keep their original source code unchanged while the plugin handles all i18n concerns during the build phase, making it compatible with any front‑end framework (Vue, React, Svelte, etc.) that ultimately compiles to plain JavaScript. Key advantages include a reduction of manual translation work by over 90%, framework‑agnostic operation, automatic handling of new languages and incremental texts, and no runtime side effects on existing code. Repository and package links: GitHub wenps/auto-i18n-translation-plugins , NPM packages for Vite and Webpack, and example projects are provided.