diwork工作台实现多语(国际化)(一)

@XYooo 2018-06-26 09:44:43发表于 iuap-design/blog

diwork工作台实现多语(国际化)(一)

背景
前端技术日新月异,技术栈繁多。对前端框架来说有React, Vue, Angular等等,再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中,不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时,由于技术栈的差异,这时你需要去寻找和当前项目使用的技术栈相匹配的国际化的插件工具。比如:

  • vue + vue-i18n
  • angular + angular-translate
  • react + react-intl
  • jquery + jquery.i18n.property

全文技术实现是基于react + webpack + 自定义node,技术上的实现跟上面文字没有任何关系。


原理在这里先说一下,方便大家做决定。
原理:不需要修改任何代码,不需要添加任何方法,只需要基于工程源码(如src文件夹)执行node命令,然后自动提取源码中的所有中文,自动替换里面的中文。

疑问1:引入的第三方组件怎么破?
回答:如果第三方组件的展示内容是由你自己传过去的,那么在源码中都可以取到,自然可以是翻译的。如果是第三方组件本身有的,木有办法,只能看第三方组件提供多语吗

疑问2: 多语下的样式怎么破?
回答:手动去添加,并且一次添加,以后在执行node命令也不会覆盖,写一次就可以。


实现多语过程本质:

1.使用时首先运行 node i18n_tool.addTags.js dir

dir为要扫描的资源根目录,要求为绝对路径,
win系统格式为c:\Users\liutom\frontwalker\walker\test,
linux系统格式为/Users/liutom/frontwalker/walker/test
i18n_addTags 为新生成目录

运行后会在dir上级目录新建i18n_addTags目录,存放生成的标签文件,

2.node i18n_tool_1.js i18n_addTags_dir

i18n_addTags_dir是新建i18n_addTags目录绝对路径
i18n为新生成目录

新建i18n目录存放多语言文件,其中以.cn.i18n结尾的文件为所要翻译的中文文件。 文件内容为{"key":"second.js0","value":"我的第一段"}其中value为所需要翻译的语言
翻译人员需要在相同目录下新建多余文件,如英文,以.en.i18n结尾,内容只改变value值 将"我的第一段"翻译为"my first
paragraph" {"key":"second.js0","value":"my first paragraph"}

3.运行 node i18n_tool.2.js i18n_dir

i18n_dir为新建i18n目录绝对路径,
然后会在i18n_dir同级目录新建不同语种目录

  • i18n_tool_addTags.js : 为所有文件中要标记的文本添加$i18n{...}$i18n_end这两个标签
  • i18n_tool_1.js : 在相应的目录下生成 dirname.js.cn.i18n文件,需要手动添加dirname.js.en.i18n文件等
  • i18n_tool_2.js : 得到最后翻译文件夹目录如en/、jp/

下面就以这三个执行脚本开始,介绍整个方案实现过程

(1) i18n_tool_addTags.js

为所有文件中要标记的文本添加$i18n、$i18n_end这两个标签

addTags流程图

1.node i18n_tool_addTags.js dir (具体内容看上面)
2.判断是否为图片等格式,是的话不需要逐行解析代码,只需要复制文件就可以。

fs.writeFileSyn(存放路径,fs.readFileSyn(file));

3.逐行分析放资源根目录的代码时候,遇见需要翻译的中文有两种情况,一个是注释,一个是需要翻译的。这里注释不需要翻译,于是需要判定

注意,在这里多用到正则表达式

  • /[\u4E00-\u9FA5]+([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[0-9]|[\?\,\。\.\、\'\:\s\\])+/g;
    这里是匹配中文、数字和中文标点如,。?等。但是由于代码不规范,会在这种使用到英文的标点符号,因此正则表达式添加上了一些英文标点。
    同时,代码中的中文表达式有:boolean?'是':'不是' 和 创建团队 / 企业这种形式

  • /(^.*\/\/|^\s*\/\*.*\*\/$)/g:注释的正则表达式。存在的问题:

    情况1
    需要翻译的中文文本 //这里是注释
    情况2
    {renderName()} //这里是展示名字
    情况3
    //这里是展示名字
    {renderName()}

存在的问题:上面的情况1会被当成注释,不会添加标签。同时/**/只能识别注释只有一行的情况


(2) i18n_tool_1.js

生成i18n目录存放多语言文件

i18n_tool_1.js

1.node i18n_tool_1.js i18n_addTags_dir (具体内容看上面)
2.判断是否为图片等格式,是的话不需要逐行解析代码,只需要复制文件就可以。

fs.writeFileSyn(存放路径,fs.readFileSyn(file));

3.逐行分析放资源根目录的代码时候,判断每行代码是否有$18n $i18n_end
然后解析生成key value,将key value不断的存入 .cn.i18n文件中

(3) i18n_tool_2.js ^LaTeX

生成最终目录,根据上一步的.cn.i18n、.en.i18n来生成cn、en目录

i18n_tool_2.js


需要改进的地方
1.addTags
这里本想做:注释不需要被抽取出来翻译,虽然工程做了eslint规范,但是注释这边由于位置多样性,单行注释多行注释的存在,存在注释也需要翻译的情况
2.需要手动执行node三个命令

作者 [yyxx]
2018 年 06月 05日