国际化中文提取插件 babel-plugin-transform-lang-cli

transform-lang

示例参考

是一款 bable 的插件工具,帮助项目快速提取中文，并生成json文件,已有中文不再生成新的编号。

根据当前的代码，提取代码中的中文，并且把中文替换成指定api，用于国际化在前端的代码处理，开发中，开发者不用关心多语，并且中文相同的值，不会重复生成key、只需要在打包前配置plugin插件即可。

目前仅支持React

使用方法

安装

npm i babel-plugin-transform-lang-cli --save-dev

配置.babelrc

"plugins": [
    "babel-plugin-transform-lang-cli"
]

设置参数

"plugins": [
    ["babel-plugin-transform-lang-cli",{
        groupCode:'YS_FED_FW',
        writeFile:'zh_cn.json',
        readFile:'zh_ch.json',
        replace:"window.lang.template"
    }]
]

实现原理

input string -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> output string

ast分析图解

bable-type.png

ast分析图解对照详解

lexical.png

示例分析图

lexical-2.png

API

参数

参数	说明	类型	默认值
groupCode	指定生成编码的前缀(参见下面的生成基本规范)	String	YS_FED_FW
writeFile	提取代码中，中文的json文件，指定文件(路径)，默认当前目录	String	zh_cn.json
readFile	希望保留那些key,提供标准json	String	zh_cn.json
replace	需要替换的api 是什么。	Function	window.lang.template('xx')

groupCode 规范

groupCode 定义

# 产品线(ys,ncc,diwork...all代表所有)
productline=YS
# 领域(财务云，税务云，营销云，all代表所有)
domain=FED
# 项目标识（一般以代码工程来区分，按构建、打包和部署来做隔离维度）
project=FW
# 使用者组，主要决定打包范围和数据版本范围的参数，不使用项目是因为多个项目可能属于一个组

readFile

如果指定的readFile文件有内容，则会根据当前文件的内容，进行value的匹配，如果有相同的value，则续用以前的key,避免产生重复的key。

{
    "YS_FED_FW_20210114210174_1610631906":"张三"
}

文件转换示例

import React, {Component} from 'react';
import { Button } from 'tinper-bee';
class Temp extends Component {

  constructor(props) {
    super(props);
  }

  click = ()=>{
    console.log(" on click ");
  }


  render() {
    let name1 = '李四',name2 = '张三',ast = 'AST 的世界 ';
    let con = (

       
{`我是一个let 的 element 结构，${name2}/nihoa/你好`}
    
)
    let  cccc = `${name2}/treecard漂亮的`;
    return (
      
 

        
我是babel-plugin-transform-lang-cli 的React的测试类 

        {`href/${ast}/ast/测试`} 


 
        
{`你好,${name1},欢迎进入${ast} !!!`}
 



        {con} 


 
         {`href/${ast}/ast/测试`} 
      
      
    );
  }
}

export default Temp;

转换后json

{
  "YS_FED_FW_20210119150121_1611040899": "李四",
  "YS_FED_FW_20210119150122_1611040899": "<%=aaaa%>/nihoa/你好",
  "YS_FED_FW_20210119150183_1611040944": "我是ddd变量",
  "YS_FED_FW_20210119150104_1611041035": "张三",
  "YS_FED_FW_20210119150180_1611041534": "你好,<%=aaaa%>,欢迎进入<%=cccc%> !!!",
  "YS_FED_FW_20210119150148_1611041593": "AST 的世界 "
}

词条中的<%=aaaa%>表示变量,利用三方解析引擎,可以恢复成值。参考ac-lang-cn

规划

目前仅支持React，后续考虑支持vue