translateman
auto translate tool
Last updated 2 years ago by fuckusername .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install translateman 
SYNC missed versions from official npm registry.

简介

自动提取 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 生成的语言文件,多个语言以英文逗号分隔
  1. 在项目根目录,新建 .translatemanrc 配置文件。运行 translateman 时,会自动读取该配置文件。示例如下:
{
	"dirs": ["./src"],                  //待处理的入口文件目录
	"ignore": ["images","models"],      //忽略的文件目录
	"files": ["tsx","jsx","js"],        //待处理的文件扩展名
    "langs": ["en-US"]                  //生成的语言文件
}

支持

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

名称
代码示例
jsx 
<a attr="b">{s}</a>
typescript 
var a: string = "";
doExpressions
var a = do { if (true) { 'hi'; } };
objectRestSpread 
var a = { b, ...c };
decorators-legacy 
@dec export class C {}
classProperties 
class A { b = 1; }
exportDefaultFrom 
export v from "mod"
exportNamespaceFrom 
export * as ns from "mod"
asyncGenerators 
async function*() {}, for await (let a of b) {}
functionBind 
a::b, ::console.log
functionSent
function.sent
dynamicImport
import('./guy').then(a)
numericSeparator
1_000_000
optionalChaining
a?.b
throwExpressions
() => throw new Error("")
nullishCoalescingOperator
a ?? b

约定

  • 自动生成的多语言文件,位于项目根目录下的 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
  1. 项目入口文件,注入 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

Current Tags

  • 1.0.7                                ...           latest (2 years ago)

8 Versions

  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (13)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |