vite-plugin-auto-i18n v0.0.9

vite-plugin-auto-i18n

Introduction

vite auto-translation plugin based on Google api, not intrusive to the source code.

Support

Vue2、Vue3、React

support language：langFile

demo project address：demo

Specificities

• Not intrusive to the source code（No more need to replace i18n in the source code）.
• Fully automatic translation.
• Support js, ts, jsx, tsx and other types of files

Usage

Install

npm i vite-plugin-auto-i18n -D # yarn add vite-plugin-auto-i18n -D

Option

why need buildToDist?

After executing the plugin in the vite environment, the translation configuration file is just generated. If you directly build it, the project will generate the translation configuration file. However, the translation configuration file will not be packaged into the main package immediately, and you may need to package it a second time. Therefore, the buildToDist option is provided, and when the translation configuration file is created, it will be actively set to the main package, The flaw is that your packaged file may have two sets of translation configuration files.

How to update translations？

After executing the plugin, two files will be generated under globalPath, index.js and index.json , index.js generates the relevant translation functions, while index.json is the json file that stores all the translation sources, if you want to update the translation content, you can directly update this json file.

config

import vitePluginAutoI18n from "../vitePluginAutoI18n/src/index";
import createVuePlugin from '@vitejs/plugin-vue';
const vuePlugin = createVuePlugin({
    include: [/\.vue$/],
    // Note that this configuration must be added to prevent the plugin from creating static nodes when parsing and not getting the text in the nodes
    template: {
        compilerOptions: {
            hoistStatic: false,
            cacheHandlers: false,
        }
    } 
})

export default defineConfig({
    plugins: [
        vuePlugin,
        vitePluginAutoI18n({
            option:{
                globalPath: './lang',
                namespace: 'lang',
                distPath: './dist/assets',
                distKey: 'index'
            }
        }),
      ]
});

main.js

import './lang' // The first line of the entry file introduces the automatic translation configuration file

lang file

Example

import '../../lang/index'
import langJSON from '../../lang/index.json
const langMap = {
    en: window?.lang?.en || _getJSONKey('en', langJSON),
    zhcn: window?.lang?.zhcn || _getJSONKey('zhcn', langJSON)
}
const lang = window.localStorage.getItem('lang') || 'zhcn'
window.$t.locale(langMap[lang], 'lang')

Explanation

import '../../{{ your globalPath }}/index' // Import translation base function
import langJSON from '../../{{ your globalPath }}/index.json' // Import translation target JSON
const langMap = {
    {{ your originLangKey }}: window?.{{ your namespace }}?.{{ your originLangKey } ||  _getJSONKey('zhcn', langJSON)
    {{ your targetLangList[0] }}: window?.{{ your namespace }}?.{{ your targetLangList[0] } ||  _getJSONKey('en', langJSON),
}
// window.localStorage.getItem('lang') Storing the current language type
const lang = window.localStorage.getItem('lang') || {{ your originLangKey }}(defualt lang)
window.{{ your translateKey }}.locale(langMap[lang], {{ your namespace }})