简介

自动提取 react 项目代码文件中的中文硬编码信息，并生成指定的多语言文件。同时支持自动在页面中注入 react-intl 的多语言处理逻辑。http://gitlab.alipay-inc.com/kangming.km/translateman

安装

npm i translateman --save-dev

运行

有以下两种方式指定运行配置信息：

1. 直接在命令行参数中指定。示例如下：

translateman -f tsx,jsx,js -d ./src -l en-US -i images,models

-f 待处理的文件扩展名，多个扩展名以英文逗号分隔
-d 待处理的入口文件目录，多个目录以英文逗号分隔
-i 忽略的文件目录，多个目录以英文逗号分隔
-l 生成的语言文件，多个语言以英文逗号分隔

2. 在项目根目录，新建 .translatemanrc 配置文件。运行 translateman 时，会自动读取该配置文件。示例如下：

{
	"dirs": ["./src"],                  //待处理的入口文件目录
	"ignore": ["images","models"],      //忽略的文件目录
	"files": ["tsx","jsx","js"],        //待处理的文件扩展名
    "langs": ["en-US"]                  //生成的语言文件
}

支持

translateman 目前支持以下代码特性：

约定

• 自动生成的多语言文件，位于项目根目录下的 locales 文件夹。该文件夹会在初次运行时自动创建。
• 工具检测到包含中文硬编码的代码文件时，会自动在该文件中引入 react-intl 的多语言处理包，同时会自动替换相关的硬编码为 react-intl 的处理逻辑。关于 react-intl，可参考官方文档：https://github.com/yahoo/react-intl

示例

比如现有中文硬编码代码文件，内容如下：

import React, { Component } from 'react';

class User extends Component {
    render() {
        return (
            <div>
                <Button type="primary">
                    提交
                </Button>
            </div>
        );
    }
}

export default User;

运行 translateman 后，内容自动转换为：

import React, { Component } from 'react';
+ import { injectIntl } from "react-intl";

+ @injectIntl
class User extends Component {
    render() {
        return (
            <div>
                <Button type="primary">
-                  提交
+                  {this.props.intl.formatMessage({id: "ti_jiao"})}
                </Button>
            </div>
        );
    }
}

export default User;

同时在项目根目录下，会自动生成以下多语言目录及文件：

locales
|--en-US.json
|--zh-Hans-CN.json

文件内容示例：

{
  "ti_jiao": "提交"
}

后续就是相关的翻译工作了。

注意

• translateman 执行的翻译逻辑是增量的。举个粟子：执行过一次 translateman 之后，代码文件中又修改或新增了一些中文硬编码信息，那么再次执行 translateman 时，会在上次生成的多语言文件的基础上，追加新的多语言键值信息。

• 执行 translateman 之后，你仍然需要从项目全局层面处理多语言的注入和切换逻辑。对于 react-intl，你可能需要手动进行以下操作：

1. 项目安装 react-intl 包。

tnpm install react-intl --save

2. 项目入口文件，注入 react-intl 多语言环境。示例如下：

import React, { Component } from 'react';
import { IntlProvider, addLocaleData } from 'react-intl';

// 引入语言资源文件
import en_US from 'locales/en-US';

// import zh_CN from 'locale/zh-Hans-CN'; 
// 英文以外的语言环境，需要先调用 react-intl 内置的 addLocaleData 方法
// import zhLocaleData from 'react-intl/locale-data/zh';
// addLocaleData(zhLocaleData);

class Index extends Component{
    render(){
        return (
            <IntlProvider 
                locale='en-US'
                messages={en_US}>
                <App />
            </IntlProvider>
        )
    }
}

对于 react-intl 的使用，请参考：https://github.com/yahoo/react-intl

• translateman 会自动忽略 react 无状态组件（stateless）。

原理

基于 jscodeshift 的代码文件解析。translateman 对应的核心解析逻辑可参考： http://astexplorer.net/#/gist/c4845129293e301987ba9bb6735f8b27/c8c060236d40fd145c45b077957604b3d736be02