package-vue-i18n
i18n auto
基于正则替换和抽取的国际化工具
这个工具的初衷是为了解决已有项目的快速国际化，在衡量了一些开源的国际化批处理工具后，由于没有对vue 的很好支持，决定快速实现一个。
核心的最佳实践是：不再人工抽取命名i18n key，所有可执行编码里的中文，都会被替换为文件路径hash:中文内容 作为key 值。
虽然这会让key 值变长变冗余，但是源码可维护性大大提高，并且能有效降低心智负担。
快速开始
在package.json 里添加私有仓库（内网环境）
{
"scripts": {
"i18n:start": "trans",
"i18n:translate": "trans translate",
"i18n:add": "trans add",
"i18n:check": "trans check"
},
"dependencies": {
"package-vue-i18n": "git+ssh://[email protected]:CUBE/package/package-vue-i18n.git"
}
}
翻译配置
请在项目根目录下创建 i18n.config.js，进行目录和排除项配置
const path = require('path')
module.exports = {
root: path.resolve(process.cwd(), 'src'),
src: path.resolve(process.cwd(), 'src'),
i18n: path.resolve(process.cwd(), 'src/lang'),
output: '',
ext: ['.vue', '.js'],
exclude: [
'/src/lang',
'/src/assets',
'/src/icons',
'/src/mock',
'/src/styles'
],
baidu: {
appid: '20200205000380671',
key: 'bk_YljU2i6Q7V3nYkJFG'
},
statement: {
imp: `import { $t } from '@/lang/static'`,
disabled: 'vue-i18n-translator:disabled'
}
}
参数及其说明
- root 根目录，默认为
src，用于参与文件路径hash 的计算 - src 需要做国际化处理的文件夹
- i18n 存储国际化key-value 的文件夹
- output 经过处理的源码文件输出到哪里，默认是空，即覆盖原文件
- ext 需要处理的源码文件后缀名，目前也仅支持
vuejs - exclude 需要排除的文件夹路径
- baidu 百度翻译配置
- appid
- key
- statement 语句标识
- imp 翻译函数
$t的引入，参见后续的关于翻译函数 $t章节 - disabled 忽略当前文件的标记
- imp 翻译函数
执行操作
接下来就可以让工具快速完成自动翻译了
# 1. 执行源码国际化替换
trans
# 2. 开始执行全量翻译，可选参数目标语言-t 或者--to
trans translate -t en
# 3. 执行对比中英文，对英文包进行增量追加，可选参数目标语言-t 或者--to
trans add -t en
# 4. 执行英文包的追加部分翻译，可选参数目标语言-t 或者--to
trans check -t en
目标语言支持情况，参考百度翻译文档：http://api.fanyi.baidu.com/doc/21
使用场景说明
- 首次使用，按顺序执行1、2 即可；
- 新增一种语言（比如日语），只需要执行2 即可；
- 项目迭代后使用，按顺序执行1、3、4 即可；
效果
翻译过程中，主要会涉及到的替换：
- vue template attr 内中文，会替换为bind-attr 形式
- 标签内部的中文替换为
{{ $t('xx') }} - 模板字符串内的中文内容
- 普通js 语句内的中文内容
原始内容
<h1>待分配任务-文本质检</h1>
<el-input
v-model.trim="query"
clearable
:placeholder="'搜索' + text + '关键词'"
:str="`复合文本输出`"
:text="`复合文本输出${pickerOptions} 结尾也有`"
prefix-icon="el-icon-search"
@keydown.enter.native.stop="handleQuery"
/>
<h3 v-if="result">搜索结果："{{ query }}"</h3>
<p v-else class="empty">没有{{ text }}数据</p>
替换后
<h1>{{ $t('@62592:待分配任务-文本质检') }}</h1>
<el-input
v-model.trim="query"
clearable
:placeholder="$t('@62592:搜索') + text + $t('@62592:关键词')"
:str="`${$t('@62592:复合文本输出')}`"
:text="`${$t('@62592:复合文本输出')}${pickerOptions}${$t('@62592: 结尾也有')}`"
prefix-icon="el-icon-search"
@keydown.enter.native.stop="handleQuery"
/>
<h3 v-if="result">{{ $t('@62592:搜索结果："') }}{{ query }}"</h3>
<p v-else class="empty">{{ $t('@62592:没有') }}{{ text }}{{ $t('@62592:数据') }}</p>
关于翻译函数 $t
样例里我们使用的是vue-i18n ，在项目的main.js 入口文件里install vue-i18n ，从而让Vue 实例具备了this.$t 的能力，进而能够在vue template 里直接使用$t。
但在script 标签内是没有这个翻译函数的，所以需要在有中文翻译的script 内引入$t 函数
如下所示：
import { $t } from '@/lang/static'
export const callTypeMap = {
'-1': '',
[CALLTYPE.UNKNOWN]: $t('@D34A7:未知类型')
}
引入文件的内容也很简单，只要能够正确输出翻译后的结果即可
// ...
const i18n = new VueI18n({
// set locale
// options: en | zh | es
locale: getLanguage(),
// set locale messages
messages
})
// 提供给国际化自动转的代码使用，在vue 里能够不再区分template 和script 里的$t
export const $t = function(key) {
return i18n.t(key)
}
常见问题
Q 完成国际化之后，项目仍然在迭代怎么办？
A 迭代或者修改bug，都可以正常进行，只需要在版本发布前按顺序执行示例里的1、3、4 命令即可。
Q 是否可以串行执行命令？
A 目前还不可以，百度翻译API 做了最大并发数限制，目前用异步请求池完成的