Cocos从零开发一个翻译插件

编辑器里扩展—开发一个实时翻译插件

背景

在 Cocos Creator 开发过程中，对我这种英文水平一般的人来说，在对变量起名或者适配多语言的时候可能经常需要打开网页或者翻译软件进行翻译，所以萌生了开发一个翻译插件的想法。

这是我针对公司项目开发的翻译软件，但并不通用，所以重写了一个。

实现

翻译插件开发主要以下几步：

• 插件基础框架

• 导入npm

• 开发插件面板

• 实现翻译

插件基础框架

这个就不细说了，详细可查看官方文档或者我之前发布的文章

文档：https://docs.cocos.com/creator/2.4/manual/zh/extension/your-first-extension.html

文章：CocosCreator插件-初探编辑器扩展

CocosCreator插件-Vue和Node.js-npm的使用

导入npm

插件的翻译部分用的是npm的bing-translate-api包，npm中其他翻译包选择还有google-translate-api（谷歌翻译）、baidu-translate-api（百度翻译）、translate（混合包，可手动选择），但是在开发时候发现谷歌的api返回不到翻译结果，经查有可能是谷歌需要科学上网才可使用，这样不太方便，遂放弃；百度的api在频繁访问的时候会报错，可能百度侦测了到了咱们想白嫖的行为，所以做了应对~ 所以最后选择了bing（必应）的api。

导入方法：

 npm install bing-translate-api 

使用方法：

const { translate } = require('bing-translate-api');
translate('你好', null, 'en', true).then(res => {
  
    console.log(res.translation);}).catch(err => {
  
    console.error(err);});

translate方法需要传入四个参数：

• 需要翻译的文本

• 文本的语言

• 需要翻译到什么语言

• 是否纠正输入文本

这里我们只需要填入第一个和第三个参数即可，第二个null代表自动识别文本语言类型。“en”代表英文，其他的语言代号可在bing-tranlate-api的包中看到。