web前端-国际化-自动翻译（免费）

web前端-国际化-自动翻译

ant-desing-pro项目，上次完成了自动识别组件，根据组件属性生成Zh_cn国际化对照文件之后，又遇到一个问题，怎么从中文自动翻译成其他语种？

最终实现：

package.json脚本配置，执行 npm run translate-us 即可自动翻译，并输出到指定目录

"local": "node ./build_locales/index.js",
"translate-us": "node ./build_locales/translate.js us",
"translate-br": "node ./build_locales/translate.js br",
"translate-tw": "node ./build_locales/translate.js tw",

读取zh-CN文件夹所有配置，生成的其他语种文件。

自定义配置

const config = {readFolder: './src/locales/zh-CN',                   suffix: 'ts',                            outPutFolder: {'us':'../src/locales/en-US/build.ts','br':'../src/locales/pt-BR/build.ts','tw':'../src/locales/zh-TW/build.ts'},  languageKeyMap: {'us':'en','br':'pt','tw':'zh-tw'},
};

配置说明：

readFolder:读取该目录下的所有配置；
suffix：读取文件的后缀
outPutFolder：对应语种的输出目录
languageKeyMap：package.json 中脚本配置对应的 google-translate-api 语种

实现原理：
- 读取 readFolder配置文件夹下面所有指定后缀的文件，如下格式：
  
  正则匹配到对应的key,value。
- 将对应的中文，使用 “|” 拼接在一起，调用 google-translate-api 进行翻译
  
  用 “|” 拼接翻译是为了防止调用次数过多被google封IP
- 将所有翻译结果输出，写入到文件中，写入结果如下。
- 将build.ts 导入对应的语种文件。
如何使用：
- https://github.com/jewool/build_locales 下载文件夹，放到ant-design-pro根目录(其他框架可自行改造)
- 修改配置
- package.json 配置脚本
- 执行脚本，生成文件
  
  npm run translate-us
  
  npm run translate-br
  
  npm run translate-tw
  
  npm run translate-xxx
  // 其他语种请根据该文件，自行添加配置
链接：

脚本地址https://github.com/jewool/build_locales

根据组件生成中文对照：https://juejin.im/post/6891187663173337102

翻译工具：https://github.com/matheuss/google-translate-api

web前端-国际化-自动翻译（免费）相关推荐

没想到啊！3980元的Web前端视频今日免费送
2018年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰.会跨平台混合应用开发.微信小程序.Web应用.pc以及手机炫酷网页的HTML5全栈开发工程师应 ...
没想到啊！3980元的Web前端视频今日免费送。
2017年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰.会跨平台混合应用开发.微信小程序.Web应用.pc以及手机炫酷网页的HTML5全栈开发工程师应 ...
Web前端开发需要掌握的技能有哪些？
作为一名合格Web前端开发工程师,不仅需要掌握丰富的开发知识,同时还需要掌握良好的开发技能,那么Web前端开发工程师需要掌握哪些技能? Web前端开发需要掌握的技能有哪些? 编程语言: 编程语言是程序 ...
Web前端开发需要掌握的技术有哪些？
一般来说从事Web前端开发需要掌握的技术包括:编程语言.前端框架.开发工具以及调试工具等方面的技术. 如何学习才能成为优秀的Web前端开发工程师? 编程语言: HTML.CSS.JavaScript. ...
web前端开发免费教程
随着近五年web前端的快速发展,有越来越多的小伙伴加入到了前端开发行业之中,但是也有好多小伙伴在犹豫到底要不要加入这个行业,要是想加入这个行业,需要怎么学习web前端的知识呢?Web前端需要怎样入门呢 ...
十款免费的Web前端开发工具
每一年,新的工具都会出现,同时也意味着许多旧的工具倒在了开发新技术的路上.前端开发占据了Web的很大一部分,它也成为一条职业道路.若您将前端开发视为另一项新技术或可发展的事业,你需要为这个工作准备合适 ...
介绍几个常用的免费的Web前端开发工具
几个常用的免费的Web前端开发工具一.Grid Guide 特点:快速生成栅格二.Foundation 特点:一款类似Bootstrap的框架,有为栅格.排版.按钮和其它动态元素的预定义CSS类. ...
使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...
学习web前端的免费12个学习网站,等你来撩
我相信很多人刚喜欢web前端或者刚刚接触web前端的时候,都不愿意去花钱去培训或者买资料去学习,因为不知道自己会不会学好,或者只是一时脑热,所以就选择免费的去学习基础. 编程学习很多人包括一些企业家 ...

web前端-国际化-自动翻译（免费）

web前端-国际化-自动翻译

web前端-国际化-自动翻译（免费）相关推荐

最新文章

热门文章