在前端开发中，有时需要在网站中集成翻译功能，这时候就需要用到翻译 API。Google Translate API 是比较流行的一个翻译 API，但是它的使用需要申请开发者账号并付费，对于小型项目或者个人开发者而言，可能会有些难以承受。但是现在有一个免费的 npm 包 limitless-google-translate，它提供了免费的谷歌翻译服务，可以帮助我们轻松实现网站的翻译功能。本文将详细介绍如何使用并配置该 npm 包。
安装
首先打开命令行工具并切换到项目目录，执行以下命令安装 limitless-google-translate：
npm install limitless-google-translate --save
安装完成后，我们需要进行一些配置。
配置 API Key
在使用 limitless-google-translate 包之前，我们需要注册一个免费的 API Key，这样才能使用谷歌的免费翻译服务。步骤如下：
- 访问 https://console.cloud.google.com ，登陆或注册账号。
- 在控制台左上角找到"Select a project"，单击选择项目或单击"+"新建项目。
- 在“Google Cloud Platform”页面，找到“API和服务”，单击进入。
- 找到“启用API和服务”，单击进入。
- 找到“Google Translate API”，单击启用。
- 找到“凭据”，单击“+创建凭据”。
- 选择“API密钥”，单击“下一步”。
- 在“应用程序限制”下，单击“HTTP引用”，复制“您的API密钥”并保存。
现在我们已经获取了 API Key，下一步就是在我们的项目中配置 API Key。
配置 API Key 到 limitless-google-translate
在你的项目中创建一个新的 JS 文件（例如 translate.js），然后在其中编写以下代码：
const Translate = require('limitless-google-translate');
const translate = new Translate({
apiKey: 'YOUR_API_KEY_HERE'
});将 YOUR_API_KEY_HERE 替换为你的 API Key。
这里我们使用了「构造器模式」来创建一个 Translate 实例并传递了配置对象。我们的项目现在已经准备好使用 limitless-google-translate 包了。
使用 limitless-google-translate 包翻译文本
下面我们来演示如何使用 limitless-google-translate 包翻译文本。让我们假设我们有一个 HTML 页面，里面有一些文本需要翻译：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------------- ----------
-------
------
--- ----------------- -----------
-- --------------------------------
-------
------- ----------------------------
--------
----- ------- - ---------------------------------
----- ------ - ---------------------------------------
----------------------------- -------- --------------------
------------------- -- -
------------------- - ---------------------------
--
------------ -- -
-------------------
---
----------------------------- -------- -------------------
------------------- -- -
------------------ - ---------------------------
--
------------ -- -
-------------------
---
---------
-------我们首先从 DOM 中获取需要翻译的元素，然后分别调用 translateText 方法并传递需要翻译的字符串及源和目标语言。在 resolve 回调中，我们将翻译结果更新到 DOM 中。
这里我们翻译了「title」元素和「description」元素的文本内容，它们的语言源都是英文，目标语言都是简体中文。
总结
limitless-google-translate 是一个闪亮的 npm 包，可以帮助我们轻松集成免费的谷歌翻译服务。在本文中，我们详细介绍了如何安装、配置和使用该 npm 包，并提供了一个简单的示例。
如果你需要在网站中实现国际化或多语言支持，那么 limitless-google-translate 可能会成为你的首选。让我们愉快地构建多语言站点吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe881e8991b448dd8e5