VUE 项目基于 i18n 的国际化处理工具

项目 git 地址：i18n-collect-cli
npm 依赖包地址：i18n-collect-cli
issue 地址：issue

可用于已有 vue 项目的中文提取与替换，将语言文件如 zh.js 转成 excel，同时也能够将 excel 转成对应的翻译文件如 en.js

目前工具的限制

1. 目前脚本 仅支持 .vue 文件和 .js 文件 中的中文提取与写入，若是涉及其余文件夹下的内容，可根据脚本内容进行修改对应须要处理的文件内容
2. 目前支持 vue 项目
3. 写入的脚本需 本地 node 环境版本不能低于 10.12.0

工具依赖包的安装

1. 安装工具依赖包

$ npm i -g i18n-collect-cli
复制代码

目前该工具属于全局指令操做，因此须要全局安装

项目中文的提取

1. 执行 getLang 进行提取中文操做，filename 默认为 zh_cn.json

$ i18n-cli getlang [src] -f <filename> -d <dir> -i <ignoredir>
复制代码

• src 为入口目录
• filename 为生成的语言文件的文件名，必须为json格式， 默认为zh_cn.json
• dir 为要收集的文件目录, 默认为 [pages, components]
• ignoredir 为 dir 目录下被忽略的文件目录

执行完成后会在同级目录下生成一个 zh_cn.json 文件，经过json格式化后（必需要格式化，不然后续经过 $t 写入项目会报错），内容格式形同以下：

{
  'cs_common': {
    'cs_1': '用户ID',
    'cs_2': '搜索',
  },
  'cs_error': {
    'cs_3': '请输入小于200字符！',
    'cs_4': '请正确填写年龄([0~120])！'
  }
}
复制代码

3. 将 zh_cn.json 文件中的中文对应的 key 用语义化字符串代替，修改后获得的 zh_cn.json 文件以下

{
  'cs_common': {
    'userId': '用户ID',
    'search': '搜索',
  },
  'cs_error': {
    'maxInput': '请输入小于200字符！',
    'ageTip': '请正确填写年龄([0~120])！'
  }
}
复制代码

项目中文的替换

1. 执行 writeLang 将中文以 i18n 的模式写入文件（仅支持 components 与 pages 里的 .vue 文件和 .js 文件）

$ i18n-cli writelang [srcDist] -f <filename> -d <dir> -i <ignoredir>
复制代码

• srcDist 为复制 src 出来的文件夹名
• filename 为生成的语言文件的文件名，必须为json格式， 默认为zh_cn.json
• dir 为要替换成 $t 的文件目录, 默认为 [pages, components]
• ignoredir 为 dir 目录下被忽略的文件目录

注： 一、非 .vue 文件须要引用 i18n 才能使用 二、dir 能够是src下的任意文件目录

执行以上脚本后会在 src 同级目录生成 srcDist 文件夹，文件夹内仅包含 components 与 pages 文件夹下的 .vue 文件和 .js 文件

2. 将 srcDist 文件夹内容替换到 src 文件夹中，覆盖重复的文件

3. 将 zh_cn.json 内数据放入项目中的多语言模块如 zh.js 文件中，运行项目，全局遍历一下是否有遗漏

注： 以上基于项目中已加入 i18n ，而且已作好配置。

该脚本还不够完善，目前仅支持部分经常使用模版的文案提取，有其余使用场景的，能够帮忙补充。

国际化语言提取与写入

专业的事情找专业的人作，毕竟不是全部的开发人员都能作翻译。因此会有找相关翻译人员处理国际化语言的需求，估有了此工具，用于提取js文件里的关键数据，转成excel表格交给专业的人进行翻译

国际化语言的提取

一、将语言文件 zh.js 转成 excel 表格，好提供给专业的人进行翻译

$ i18n-cli toexcel [url] [translateUrl] [filename] 
复制代码

url 必填，为js文件的路径 translateUrl 选填，为已经翻译的语言的js，用于提取语言增量 filename 默认为zh.xlsx, 默认保存路径为当前执行命令的路径，且保存路径不可修改

注：js中对象的 key 必须带引号，以下

export default {
  'common': {
    'workOrder': '工单类型',
    'operateSucc': '操做成功',
    'testDrive': '试驾',
    'detail': '详情',
    'selectEquity': '选择权益',
    'selectEvent': '选择事件',
    'sorry': '抱歉'
    ...
  }
  ...
}
复制代码

若是没有选择已经翻译的语言的js时，最后生成的excel表格以下

若是选择了已经翻译的语言的js，如

export default {
  'cs_common': {
    'detail': 'detail',
    'selectEquity': 'selectEquity',
    'selectEvent': 'selectEvent',
    'sorry': 'sorry'
  }
}

复制代码

则生成的 excel 表格以下

此时，将key列隐藏后（防止key值被修改）便可将此 excel 表格提供给专业的人员，作专业的翻译了

多语言的写入

翻译完成后还需将 excel 表格的翻译内容用该脚本处理成js文件，引入到项目中作多语言的展现

一、将翻译好的文件整理成 js 文件

$ i18n-cli tojs [url] [filename]
复制代码

• [filename] 多语言js文件，默认 translate.js, 默认当前位置，不能修改存储地址，如xx.js
• [url] excel文件路径，格式能够为".xls", ".xml",".xlsx",".xlsm"

如 excel 文件内容以下

执行结束后会在根目录生成一个 transform.js 文件，文件内容以下

欢迎issue