# fe-crowdin v0 接入文档说明 

# 下载fd-crowdin（先阶段是发布到npm上了，如果项目中使用可以发到私有仓库）

```
npm install fd-crowdin --save-dev

```

# 配置crowdin.bd.js 如下

    *在项目的根目录配置 除了id和project字段只有默认值*

    ```
    
    module.exports = {
        id: 613523,
        project: "network-mini-app",
        basePath: require("path").resolve(__dirname, "./"),
        keyReg: /\$t\('([^']+)'\)/g,
        sourcePath: "./langs/key",
        outputPath: "./langs/lib",
        gkeysSuffix: ['.ejs', '.html', '.vue', 'ts'],
        gkeysPathIgnore: ['node_modules', 'plugins', 'dist'],
        defaultLang: { lang: "zh-CN", exclude: [] },
        languageMap: {
        "zh-CN": {
            crowdin: "zh-CN"
        },
        "en-US": { // 英语
            crowdin: "en"
        },
        "ID": {
            crowdin: 'id'
        }
        },
        authToken: '9c7af7b5c3d9d4ca859c8a4ac5a660b13820f5cb6fa7d809b22267be1e5ea2869d964e8b007b52de',
        domain: 'https://api.crowdin.com',
        organization: '' // bd  企业crowin的组织名称 如果是bd  https://{organization-name}.api.crowdin.com
    }

    ```
    **字段说明**
    - id  工程的id，可以在crowdin中看到
    - project 工程名称
    - basePath 需要提取词条的目录
    - keyReg  匹配词条的正则表达式
    - sourcePath 提取的词条存放目录
    - outputPath 从Crowdin上拉去下来的翻译存放位置
    - gkeysSuffix 需要提取的文件格式
    - gkeysPathIgnore 忽略提取提取的文件夹
    - defaultLang 默认语言设置
    - languageMap 需要翻译的语言集合 key对应的就是你系统语言的设置项，value中的crowdin是对应Crowdin网站上规定的语言，具体语言项后面后给一个链接查找
    - authToken Crowdin上的登录token 现在是我个人 后面要做可以换成其他管理员
    - domain 默认个人就是 https://api.crowdin.com  企业版的话会区分
    - organization 只有企业版才需要填写

Crowdin中id和project可以在图示位置拿到
![Alt text](image-1.png)

# 在package.json中的script中加入下列命令

```
"scripts": {
    "crowdin": "node ./node_modules/fe-crowdin/bin/cli"
}
```

# 使用步骤
    **注意：
    a：在本地开发分支目前是有要求：BRANCH_T{数字}
    b：分支必须commit才可以，是需要读取本地.git文件
    **

    1. 开发结束，在本地执行下面命令，会在对应配置的outputPath中生成一个json文件如下：
   ```
    npm run crowdin gkeys
   ```
   生成的json内容格式示例如下：
    ```
    [
        "关于",
        "首页",
        "我的",
        "登录",
        "退出登录",
        "语言",
        "删除语言",
        "新增",
        "我是在js中的文字",
        "测试下"
    ]
    ```
    2. 把需要翻译的词条，push到远程Crowdin上 
   ```
   npm run crowdin push
   ```
    3. 等对应的翻译人员，翻译完成，拉去down下翻译词条，执行下面命令，整个国际化就算是大概完成了 翻译人员需要在https://crowdin.com/ 注册账号
   
   ```
   npm run crowidn pull
   ```
   生成的json内容格式如下：
   ```
   {
        "en-US": {
            "关于": "About",
            "首页": "Home",
            "我的": "My",
            "登录": "Sign in",
            "退出登录": "Sign Out",
            "语言": "Languages",
            "删除语言": "Delete language",
            "新增": "Add",
            "哈哈": "Ha-ha",
            "我是在js中的文字": "My text in js",
            "测试下": "Test"
        }
    }
   ```
   ```
   {
        "ID": {
            "关于": "Tentang",
            "首页": "halaman rumah",
            "我的": "Aku",
            "登录": "Masuk",
            "退出登录": "Keluar",
            "语言": "Bahasa",
            "删除语言": "Hapus bahasa",
            "新增": "Baru",
            "哈哈": "Ha-ha",
            "我是在js中的文字": "Saya teks dalam JavaScript",
            "测试下": "Di bawah tes"
        }
    }
   ```

    *默认语言的话，不用翻译，会自动down后不补充完成*
    ```
    {
        "zh-CN": {
            "关于": "关于",
            "首页": "首页",
            "我的": "我的",
            "登录": "登录",
            "退出登录": "退出登录",
            "语言": "语言",
            "删除语言": "删除语言",
            "新增": "新增",
            "哈哈": "哈哈",
            "我是在js中的文字": "我是在js中的文字",
            "测试下": "测试下"
        }
    }
    ```
   

## 在vue项目配置vue-i18n设置国际化，就和普通的设置没有区别了

    ```
    mport VueI18n from 'vue-i18n'
    const enUS = require('./langs/lib/en-US.json')
    const zhCN = require('./langs/lib/zh-CN.json')
    const ID = require('./langs/lib/ID.json')

    const messages = {
        ...enUS,
        ...zhCN,
        ...ID
    }
    console.log("messages", messages)

    let i18nConfig = {
    locale: 'en-US',// 获取已设置的语言
    messages,
    fallbackLocale: 'zh-CN', //如果没有找到要显示的语言，则默认显示 ‘zh-CN’中文
    silentFallbackWarn: true, //控制台上不打印警告
    }

    const i18n = new VueI18n(i18nConfig)
    App.mpType = 'app'
    const app = new Vue({
        i18n,
        store,
        ...App
    })

    ```

## 彩蛋

-push翻译词条后，可以利用钉钉机器人，发送消息，提示翻译人员进行翻译

  如下（具体推送消息的格式，可以配置）
  ![Alt text](image.png)

## 参考资料

-https://open.dingtalk.com/document/robots/custom-robot-access#title-72m-8ag-pqw
-https://crowdin.github.io/crowdin-cli/configuration
-https://developer.crowdin.com/api/v2/
-https://zh.crowdin.com/teams/engineering

## 帮助
 
 如有任何疑问联系：liu_yi_xi@163.com