github 項目地址

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

它具有以下功能：

根據你提供的默認映射數據（{ 中文：變量 }），i18n-replace 會把中文替換成對應的變量。

如果沒有提供映射數據，則使用默認規則替換中文并生成變量。

將替換出來的中文自動翻譯成目標語言（默認為 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: '', // 百度翻譯 appidkey: '', // 百度翻譯密鑰output: 'i18n.data.js', // i18n 輸出文件indent: 4, // i18n 輸出文件縮進entry: '', // 要翻譯的入口目錄或文件，默認為命令行當前的 src 目錄prefix: '', // i18n 變量前綴 i18n 變量生成規則 prefix + id + suffixsuffix: '', // i18n 變量后綴id: 0, // i18n 自增變量 idtranslation: false, // 是否需要自動翻譯中文to: 'en', // 中文翻譯的目標語言mode: 1, // 0 翻譯所有 i18n 數據，1 只翻譯新數據loader: 'loader.js',pluginPrefix: '$t', // i18n 插件前綴 例如 vue-i18n: $t， react-i18next: tinclude: [], // 需要翻譯的目錄或文件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><inputtype="二"placeholder="一"value="s 四 f"/><MyComponent>非常好 <header slot="header">測試</header> 非常好非常好 <footer slot="footer">再一次測試</footer> 非常好</MyComponent> </div>

翻譯后

<div><inputtype={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: '', // 百度翻譯 appidkey: '', // 百度翻譯密鑰output: 'i18n.data.js', // i18n 輸出文件indent: 4, // i18n 輸出文件縮進entry: 'src', // 要翻譯的入口目錄或文件，默認為命令行當前的 src 目錄prefix: '', // i18n 變量前綴 i18n 變量生成規則 prefix + id + suffixsuffix: '', // i18n 變量后綴id: 0, // i18n 自增變量 idtranslation: true, // 是否需要自動翻譯中文to: 'en', // 中文翻譯的目標語言mode: 1, // 0 翻譯所有 i18n 數據，1 只翻譯新數據loader: 'loader.js',pluginPrefix: '$t', // i18n 插件前綴 例如 vue-i18n: $t， react-i18next: tinclude: [], // 需要翻譯的目錄或文件，如果為空，將不進行任何操作。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 文件

總結

以上是生活随笔為你收集整理的前端国际化辅助工具——自动替换中文并翻译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。