前端國際化輔助工具——自動替換中文並翻譯

github 項目地址

i18n-replace 是一個可以自動替換中文並支持自動翻譯的前端國際化輔助工具。

它具備如下功能：

1. 根據你提供的默認映射數據（{ 中文：變量 }），i18n-replace 會把中文替換成對應的變量。
2. 若是沒有提供映射數據，則使用默認規則替換中文並生成變量。
3. 將替換出來的中文自動翻譯成目標語言（默認爲 en，即英語）。

自動翻譯功能使用的是百度免費翻譯 API，每秒只能調用一次，而且須要你註冊百度翻譯平臺的帳號。

而後將 appid 和密鑰填入 i18n-replace 的配置文件 i18n.config.js，這個配置文件須要放置在你項目根目錄下。

使用

安裝

npm i -g i18n-replace

全局安裝後，打開你的項目，創建一個 i18n.config.js 文件，配置項以下：

module.exports = {
    delay: 1500, // 自動翻譯延時，必須大於 1000 ms，不然調用百度翻譯 API 會失敗
    mapFile: '', // 須要生成默認 map 的文件
    appid: '', // 百度翻譯 appid
    key: '', // 百度翻譯密鑰
    output: 'i18n.data.js', // i18n 輸出文件
    indent: 4, // i18n 輸出文件縮進
    entry: '', // 要翻譯的入口目錄或文件，默認爲命令行當前的 src 目錄
    prefix: '', // i18n 變量前綴  i18n 變量生成規則 prefix + id + suffix
    suffix: '', // i18n 變量後綴
    id: 0, // i18n 自增變量 id
    translation: false, // 是否須要自動翻譯中文
    to: 'en', // 中文翻譯的目標語言
    mode: 1, // 0 翻譯全部 i18n 數據，1 只翻譯新數據
    loader: 'loader.js',
    pluginPrefix: '$t', // i18n 插件前綴 例如 vue-i18n: $t， react-i18next: t
    include: [], // 須要翻譯的目錄或文件
    exclude: [], // 不須要翻譯的目錄或文件 若是 exclude include 同時存在一樣的目錄或文件 則 exclude 優先級高
    extra: /(\.a)|(\.b)$/, // 默認支持 .vue 和 .js 文件 若是須要支持其餘類型的文件，請用正則描述 例如這個示例額外支持 .a .b 文件
}

上面是 i18n-replace 工具的配置項，具體說明請看文檔。

這些配置項都不是必要的，若是你須要翻譯功能，通常只須要填入 appid、key 而且將 translation 設爲 true。

設置完配置項後，執行 rep（這是一個全局命令），i18n-replace 就會對你的入口目錄進行遞歸替換、翻譯。

i18n-replace 能識別如下中文：

不能包含有空格，能夠包含中文、中文符號，數字，-
測試123
測試-12-測試
幾點了？12點。

DEMO

更多測試用例，請查看項目下的 test 目錄。

jsx

翻譯前

<div>
    <input
        type="二"
        placeholder="一"
        value="s 四 f"
    />

    <MyComponent>
        很是好 <header slot="header">測試</header> 很是好
        很是好 <footer slot="footer">再一次測試</footer> 很是好
    </MyComponent>
</div>

翻譯後

<div>
    <input
        type={this.$t('0')}
        placeholder={this.$t('1')}
        value={`s ${this.$t('2')} f`}
    />

    <MyComponent>
        {`${this.$t('3')} `}<header slot="header">{this.$t('4')}</header>{` ${this.$t('3')}`}
        {`${this.$t('3')} `}<footer slot="footer">{this.$t('5')}</footer>{` ${this.$t('3')}`}
    </MyComponent>
</div>

sfc

翻譯前

<template>
    <div>
        有人<div value="二" :val="abc + '三 afb'">一</div>在國
    </div>
</template>

<script>
export default {
    created() {
        const test = '測試'
    }
}
</script>

翻譯後

<template>
    <div>
        {{ $t('0') }}<div :value="$t('1')" :val="abc + $t('2') + ' afb'">{{ $t('3') }}</div>{{ $t('4') }}
    </div>
</template>

<script>
export default {
    created() {
        const test = this.$t('5')
    }
}
</script>

文檔

在你的項目根目錄下創建一個 i18n.config.js 文件，i18n-replace 將會根據配置項來執行不一樣的操做。

注意，全部配置項均爲選填。

module.exports = {
    delay: 1500, // 自動翻譯延時，必須大於 1000 ms，不然調用百度翻譯 API 會失敗
    mapFile: '國際化資源管理.xlsx', // 須要生成默認 map 的文件
    appid: '', // 百度翻譯 appid
    key: '', // 百度翻譯密鑰
    output: 'i18n.data.js', // i18n 輸出文件
    indent: 4, // i18n 輸出文件縮進
    entry: 'src', // 要翻譯的入口目錄或文件，默認爲命令行當前的 src 目錄
    prefix: '', // i18n 變量前綴  i18n 變量生成規則 prefix + id + suffix
    suffix: '', // i18n 變量後綴
    id: 0, // i18n 自增變量 id
    translation: true, // 是否須要自動翻譯中文
    to: 'en', // 中文翻譯的目標語言
    mode: 1, // 0 翻譯全部 i18n 數據，1 只翻譯新數據
    loader: 'loader.js',
    pluginPrefix: '$t', // i18n 插件前綴 例如 vue-i18n: $t， react-i18next: t
    include: [],  // 須要翻譯的目錄或文件，若是爲空，將不進行任何操做。
    exclude: [], // 不須要翻譯的目錄或文件 若是 exclude include 同時存在一樣的目錄或文件 則 exclude 優先級高
}

appid 和 key

appid: '', // 百度翻譯 appid
key: '', // 百度翻譯密鑰

這是百度免費翻譯 API 的 appid 和密鑰。

若是你須要自動翻譯，這兩個是必填項。

具體註冊流程請看官網。

entry

entry: 'src'

入口目錄或入口文件，默認爲項目根目錄下的 src 目錄。

替換或翻譯將從這裏開始。

delay

delay: 1500

單位毫秒，默認 1500。

百度翻譯 API 調用延時，因爲免費的翻譯 API 1 秒只能調用一次，因此該選項必須大於 1000。通過本人測試，該項設爲 1500 比較穩定。

mapFile

mapFile: 'data.js'

若是你提供一個默認的映射文件（中文和變量之間的映射），本工具將根據映射文件將中文替換爲對應的變量。

例若有這樣的映射關係：

module.exports = {
    zh: {
        10000: '測試',
    },
    en: {},
}

和一個源碼文件：

const test = '一'

啓用工具後，源碼文件中的 const test = '一' 將會被替換爲 const test = this.$t('10000')。

因此若是你有默認的映射文件，請提供它的地址。

loader

loader: 'src/loader.js'

i18n-replace 提供了一個內置的 loader，以便將下面的數據：

module.exports = {
    zh: {
        10000: '測試',
    },
    en: {},
}

轉換成 i18n-replace 要求的映射數據格式：

{
    "測試": "10000",
}

因此爲了能將其餘文件翻譯成這種格式，本工具提供了一個 loader 選項。

這個 loader 是一個本地文件地址，你提供的文件須要寫一個轉換函數，將其餘格式的文件轉換成 i18n-replace 要求的數據格式，就像下面這個函數同樣：

const excelToJson = require('convert-excel-to-json')

function translateExcelData(file, done) {
    const data = excelToJson({ sourceFile: file })
    const result = {}
    data.Sheet1.forEach(item => {
        if (item.C == '中文') {
            result[item.B] = item.A
        }
    })

    done(result)
}

module.exports = translateExcelData

它接收兩個參數，分別是文件地址 file 和 完成函數 done()。

支持異步操做，只要在轉換完成時調用 done(result) 便可。

prefix、suffix、id

若是你沒有提供一個默認映射文件，i18n-replace 在將中文替換成變量時，將遵循下面的公式來生成變量：

prefix + id + suffix

• id 默認爲 0，自動遞增。
• 變量前綴，默認爲空。
• 變量後綴，默認爲空。

pluginPrefix

pluginPrefix: '$t'

翻譯前綴，默認爲 $t。請根據應用場景配置。

例如 vue-i18n 國際化工具使用的是 $t，而 react-i18next 使用的是 t。

translation

是否須要自動翻譯，默認爲 false。

若是設爲 true，將會調用百度免費翻譯 API 進行翻譯。

to

翻譯的目標語言，默認爲 en，即英語。

具體的配置項請查看百度翻譯 API 文檔。

mode

翻譯模式，默認爲 1。

翻譯模式有兩種：0 和 1。

若是你提供了一個默認的映射文件：

{
    "一": "10000",
    "二": "10001",
}

同時在替換過程當中產生了兩個新的變量，最後映射數據變成這樣：

{
    "一": "10000",
    "二": "10001",
    "三": "10002",
    "四": "10003"
}

這時，翻譯模式爲 0 將會對全部數據進行翻譯。而翻譯模式爲 1 只對新產生的數據進行翻譯。

output

翻譯後的文件輸出名稱，默認爲 i18n.data.js。

include

工具默認翻譯入口目錄下全部的文件，若是你提供了 include 選項，將只會翻譯 include 指定的目錄或指定的文件。

若是這個選項是一個空數組，將不會進行任何操做。

exclude

exclude 優先級比 include 高，若是有文件包含在 exclude 裏面，它將不會被翻譯。

indent

生成文件的縮進，默認爲 4。

extra

因爲 i18n-replace 默認只支持 .vue 和 .js 文件。
因此提供了一個 extra 選項，以支持其餘的文件格式，它的值爲正則表達式。

extra: /(\.a)|(\.b)$/

例如使用上述的正則表達式，i18n-replace 將額外支持 .a .b 文件