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: '', // 百度翻譯 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 文件