前端国际化

前言

随着公司业务的飞速发展，我们的市场覆盖范围已扩大至港澳台和欧洲地区。为了满足多语言需求和提升用户体验，我们需要对web运行平台进行国际化支持和改造。下面分享一下我们在国际化的过程中，遇到的问题以及解决方案。其过程主要分为四个部分：

• 词条抽取

• 词条管理

• 词条引入

• 词条调整

词条抽取

我们遇到的第一个问题就是应该提取哪些内容作为词条，以及如何提取。

目前待改造的页面有2000+，纯靠人工的话，耗时长效率低还比较容易遗漏。所以我们想尽可能靠工具解决80%的问题，人工解决剩下的20%。基于这个目标，我们的思路是：对各个前端工程进行扫描，寻找vue文件以及js文件并进行扫描，把里面包含中文的部分提取成词条，并最终输出到excel文件。

对于js文件的处理：

首先通过@babel/parser对文本内容进行ast转换，然后判定是否包含中文，是的话就纳入词条，同时替换成多语言方式。

比如：let message = "提醒"，转换后变为

let message = this.$t("XXXXXX","提醒")，XXXXXX代表词条标识，如果词条没匹配到，就用第二个参数（默认值）

其各个处理步骤代码如下：

1，对ast的node内容进行判定，看看是否包含中文

exports.containZH = function(content){
    if(!content)return false
    return /.*[\u4e00-\u9fa5]+.*$/.test(content)
}

2，将内容"提醒"转换成：this.$t("XXXXXX","提醒")

function createCallExpression(thizz,term,content){
    let _objetct = null
    if( thizz == 'this'){
        _objetct = t.thisExpression()
    }else{
        _objetct = t.identifier(thizz)
    }
    let property = t.identifier('$t')
    let callee = t.memberExpression(_objetct,property)
    let argument = t.stringLiteral(config.appCode +'.'+ term)
    let defaultArgument = t.stringLiteral(content)
    let callExpression = t.callExpression(callee,[argument,defaultArgument])
    return callExpression
}

3,替换节点

下面有几种场景需要考虑：

• 作为表达式：

  let message = "提醒"
  

• 作为判定条件：

  if(test === "提醒"){}
  

• 作为方法入参：

  let result = getData("提醒")
  

• es5的this变换：

  var that = this
  getData().then(function(){
       var message = "提醒"
      //此时应替换成that.$t("xxxxxx","提醒")  
  }) 
  

当然除了上述场景外，还要结合需要转换的代码的新旧程度以及实际情况进行一些兼容，同时我们也会把一些判断不准的，输出到日志进行人工处理，节点替换代码如下：

let callExpression = createCallExpression(thizz,term,path.node.value)//t.callExpression(callee,[argument])
            
let rPath = path.parentPath
if(t.isCallExpression(rPath)){
    rPath.node.arguments = [callExpression]
    if(thizz == 'this' || thizz == 'that'){
        let checklog = "行:"+path.node.loc.start.line+"列:"+path.node.loc.start.column
        console.log("请人工确认this是否正确:",_path,checklog)
        writeCheckLog(_path,checklog)
    }
}else if(t.isObjectProperty(rPath)){
    rPath.node.value = callExpression
} else if(t.isBinaryExpression(rPath)){
    if(t.isBinaryExpression(rPath.parentPath) && t.isBinaryExpression(rPath.parentPath.parentPath)){
        let plusPath = path.findParent(path => path.isCallExpression())
        if(plusPath)plusPath.node.arguments = [callExpression]
    }else{
        if(rPath.node.left.hasOwnProperty('value') && rPath.node.left.value == path.node.value){
            rPath.node.left = callExpression
        }
        if(rPath.node.right.hasOwnProperty('value') && rPath.node.right.value == path.node.value){
            rPath.node.right = callExpression
        }
    }
    
}else if(t.isConditionalExpression(rPath)){
    if(rPath.node.consequent.hasOwnProperty('value') && rPath.node.consequent.value == path.node.value){
        rPath.node.consequent = callExpression
    }
    if(rPath.node.alternate.hasOwnProperty('value') && rPath.node.alternate.value == path.node.value){
        rPath.node.alternate = callExpression
                }             
}

除了上述场景，还有一个情况是比较难处理的：

let message = "第" + i + "行"

类似上面这种在循环里的拼接字符串，会被分割成两个词条。由于我们在代码中全局搜索后发现，这种情况并不多所以也是采用人工处理的方式。当然ast能做但不太好做，所以对我们来说得不偿失。

对于vue文件的处理

主要是通过vue-template-compiler提取出vue文档的template部分，script部分。script部分的处理和上面类似不再累述，我们重点描述一下template部分：

提取template的html字符串后，首先利用parse5进行ast转换：

exports.vueParse = function vueParse(_path){
    globalThis.termIndex = 0
    var fileContent = fs.readFileSync(_path).toString()
    var result = compiler.parseComponent(fileContent)
    let scriptAst = parser.parse(result.script.content,{sourceType: "module"})

    let templateAst = parse5.parse(result.template.content,{sourceCodeLocationInfo:true});

    globalThis.hasTerm = false
    try{
        let templateRoot = templateAst.childNodes[0].childNodes[1].childNodes[0]
        makeTerms(templateRoot,_path)
    }catch(e){
        console.warn(_path+",template内容空白,程序忽略,请人工确认！")
    }

    let html = parse5.serialize(templateAst);
    html = html.replace(/<(html|\/*head|body)>/g,'')
    html = html.replace(/<\/(body|html)>/g,'')

    let scriptData = JsContentParse(_path,result.script.content)
    if(!globalThis.hasTerm && !scriptData.hasZH){
        globalThis.hasTerm = false
        return
    }
    makeNewFile(_path,html,scriptData.data,result.source)
    return {
        filePath:_path,
        template:templateAst,
        script:scriptAst,
        result:result,
    }
}

转换后，同样对html的节点进行替换，需要考虑的场景有下面几个：

• 忽略注释中的中文，而非作为词条的一部分

  // author is 张三
  

• 替换标签文本部分的内容

  <i title="张三"></i>
  //替换成，注意属性前要加冒号
  <i :title="$t('xxxxx','张三')"></i>
  

• 替换属性部分的内容

  <i>张三</i>
  //替换成
  <i>$t('xxxxx','张三')</i>
  

其整体代码实现如下：

function makeTerms(templateRoot,_path){  

    if(templateRoot.nodeName == ' #comment'){
        return false;
    }

    if(templateRoot.nodeName == '#text'){
        if(containZH(templateRoot.value)){
            globalThis.hasTerm = true
            let term = record(_path,templateRoot.sourceCodeLocation,templateRoot.value)
            templateRoot.value =  '{{$t(\''+config.appCode +'.'+ term+'\')}}'
        }
        return
    }

    if(templateRoot['attrs']){
        templateRoot.attrs.forEach(attr => {
            if(containZH(attr.value)){
                globalThis.hasTerm = true
                let term = record(_path,templateRoot.sourceCodeLocation,attr.value)
                attr.value =  '$t(\''+config.appCode +'.'+ term+'\')'
                attr.name = (':'+ attr.name)
                return true
            }
        });

    }

    if(templateRoot['childNodes']){
        templateRoot.childNodes.forEach(_node=>{
            makeTerms(_node,_path)
        })
    }

}

我们通过上述工具，基本能自动转换80%的代码，其余的就需要人工介入修改检查。词条抽取后，下一步我们要对抽取的内容进行管理。

词条管理

这部分涉及的内容不多。在应用层面，我们对前端词条进行了区分以减少重复词条的数量，主要有三类：

• 公共词条：跨工程页面都会重复使用的词汇，比如：查询

• 业务公共词条：某一块业务经常出现的词汇，比如：促销

• 词条：具体页面个性化的词汇

另外我们也需要保证词条在维护的时候，不会重复不会影响他人。同时由于词条的数量比较多，都决定了我们无法用文件的形式进行词条管理，必须依赖数据库。

基于上述原因，我们构建了一个管理页面，来对相应的表进行数据录入和处理。在词条提取部分我们提到过，提取的词条最终会生成excel，所以在词条管理页面，也支持该excel的直接导入，减少词条录入时间，提高录入效率。有了这些词条，我就可以使用了：

词条引入

一说起vue的国际化，我们首先就会想到vue-i18n。如果只有几个页面十几个页面，甚至几十个页面，直接使用vue-i18n都没太大的问题。

但我们有2000+的页面需要国际化，词条也会超过10万+，所以我们会变通的方式使用vue-i18n从而满足以下几点要求：

• 词条变更不需要重新编译发布

• 可以充分利用浏览器缓存

• 语言切换的时候页面内容不会晃动

最终我们的方案如下：

1，通过监控程序，从词条管理接口获取数据，分别生成公共词条，关键应用维度的业务词条的静态js文件

2，web框架根据当前关键应用信息，加载公共词条以及关键应用下的静态js文件，并将内容放入全局变量localeMessage，i18n根据全局变量初始化：

let messages = {}

//部分代码省略

messages[window.locale] = Object.assign(window.localeMessage,_locale)

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: window.locale,
  messages
})

这样当我们在词条管理页面维护词条信息后，线上也能一定时间内同步最新的词条信息。

词条调整

到目前为止，不管是词条抽取，管理，引入都是偏开发视角。考虑下面一个场景：如果一个非开发人员要纠正词条信息，比如产品经理或翻译人员，他不知道一段文字到底对应哪个词条key，需要找开发人员去问，然后再去词条管理维护修改，这样一圈下来效率太低。

所以我们想给非开发人员提供一种在线编辑词条的能力，如图：

image.png

其特性主要有以下两点：

• 可以通过定位可以快速找到词条位置

• 可以修改词条内容并保存

这样的话，非开发人员都可以在线上快速进行词条的编辑修正，特别是在非中文的场景下，从而大大提高了词条的纠正效率。

其实现主要分为两部分：

1，如何收集页面到底使用了哪些词条？

我们可以用mixin的方式劫持$t方法，然后收集页面依赖的词条。

2，如何标记词条位置？

要建立dom和词条的关联，需要在dom上生成一个包含词条信息的属性。

比如一个词条"xxxx-yyyy"，然后增加属性 data-term-xxxx-yyyy="xxxx-yyyy"。当点击定位的时候，就可以根据属性去查找节点。当然在标记的时候要注意：内容和属性的词条都加到节点上。

我们通过webpack，loader插件的方式实现，插件内容大致如下：

function makeTerms(templateRoot){  
    if(templateRoot.nodeName == ' #comment'){
        return false;
    }

    if(templateRoot.nodeName == '#text'){

        if(containZH(templateRoot.value)){
            let terms = getTermCode(templateRoot.value)
            terms.forEach(term=>{
                if(!term.startsWith('T_S_'))return true
                let tName = term.replace(/_|-|\./g,'')
                templateRoot.parentNode.attrs.push({
                    value:term,
                    name:'data-term-'+tName.toLowerCase()
                })
            })
        }
        return
    }

    if(templateRoot['attrs']){
        templateRoot.attrs.forEach(attr => {
            if(attr.name.startsWith(':') || attr.name.startsWith('v-bind:')){
                if(attr.value && attr.value.startsWith('{'))return true
                let terms = getTermCode(attr.value)
                terms.forEach(term=>{
                    if(!term.startsWith('T_S_'))return true
                    let tName = term.replace(/_|-|\./g,'')
                    templateRoot.attrs.push({
                        value:term,
                        name:'data-term-'+tName.toLowerCase()
                    })
                })
                return true
            }
        });

    }

    if(templateRoot['childNodes']){
        templateRoot.childNodes.forEach(_node=>{
            makeTerms(_node)
        })
    }

}

webpack配置部分如下：

{
    test: /.vue$/,
    loader: path.resolve(__dirname, '../webpack-plugin/teld-term-loader.js')
}

另外在实现的过程中我们发现，html转ast的库很多，但从ast转html的比较少，最后就找到了parser5，转换的时候有点小问题，就是会把标签转成小写造成部分转换后的代码不能正确执行，也算一个小插曲。

结语

以上就是我们在国际化项目中遇到的一些问题和解决方案，只是描述了其中大概的部分，而在实际的过程中还有很多和历史代码相关的零星问题。所以对于一些项目，特别是老项目，国际化并非一件容易的事情，我们会继续积累经验，把国际化做的更完善，从而更好的服务我们的业务。