一行代码启动全球化：translate.js 助你轻松构建多语言体验（支持Google/DeepL/Libre）

原创已于 2025-06-13 16:04:51 修改 · 873 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #translate.js #AI #自动翻译

于 2025-06-13 15:59:40 首次发布

开发工具分享专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

想给你的网页或应用添加多语言支持？不用再调用繁琐的 API 接口，translate.js 帮你一行代码搞定翻译，支持 Google、DeepL、LibreTranslate 等多个主流翻译引擎，Node.js 和浏览器通用！

📌 文章目录

什么是 translate.js？
translate.js 有哪些优势？
安装与环境准备
Node.js 示例详解
浏览器端完整案例
配置多个翻译引擎（Google / DeepL / Libre）
实战技巧 & 性能优化建议
常见问题 FAQ
总结与推荐场景

1️⃣ 什么是 translate.js？

translate.js 是一个轻量级的 JavaScript 翻译库，专为快速开发设计。它封装了多种翻译 API（如 Google、DeepL、LibreTranslate 等），让开发者无需手动拼接请求，只需一行代码即可实现文本翻译，适用于 Web 应用、CLI 工具、聊天机器人、博客系统等多种场景。

项目地址：
📦 GitHub：https://github.com/franciscop/translate

2️⃣ translate.js 有哪些优势？

优势项	说明
✅ 多引擎支持	内置支持 Google、DeepL、Libre、Yandex 等主流翻译服务
✅ Node.js 与浏览器兼容	支持服务端/客户端双端使用
✅ 无需大型依赖	仅 20KB，零依赖，支持 TypeScript
✅ 简单易用	用法像 `translate("hello", "zh")` 一样简单
✅ 可缓存翻译结果	减少 API 调用，提升性能

3️⃣ 安装与环境准备

Node.js 中使用

npm install translate

import translate from 'translate';

translate.engine = 'deepl'; // 可选："google", "libre", "deepl", "yandex"
translate.key = 'YOUR_API_KEY';

浏览器中使用（ESM）

<script type="module">
  import translate from 'https://cdn.jsdelivr.net/npm/translate/index.min.js';
</script>

4️⃣ Node.js 示例详解

🔤 英文 -> 中文

import translate from 'translate';

translate.engine = 'google';  // 设置翻译引擎

(async () => {
  const result = await translate('Hello world', 'zh');
  console.log(result); // 输出：你好，世界
})();

🌍 多级翻译（链式翻译）

const step1 = await translate('I want tacos please.', 'es'); // 英文 -> 西班牙语
const step2 = await translate(step1, { from: 'es', to: 'ja' }); // 西语 -> 日语
const final = await translate(step2, { from: 'ja', to: 'en' }); // 回译英文

console.log(final);

5️⃣ 浏览器端完整案例（带 UI）

<textarea id="input">请输入要翻译的文本</textarea><br/>
<select id="langTo">
  <option value="en">英文</option>
  <option value="zh">中文</option>
  <option value="ja">日语</option>
  <option value="es">西班牙语</option>
</select>
<button id="translateBtn">翻译</button>
<p>翻译结果：</p>
<pre id="output"></pre>

<script type="module">
  import translate from "https://cdn.jsdelivr.net/npm/translate/index.min.js";

  document.getElementById('translateBtn').onclick = async () => {
    const text = document.getElementById('input').value;
    const to = document.getElementById('langTo').value;

    const result = await translate(text, { to });
    document.getElementById('output').innerText = result;
  };
</script>

6️⃣ 配置不同的翻译引擎

🔹 使用 Google 翻译

translate.engine = 'google';
translate.key = 'GOOGLE_API_KEY';

🔹 使用 DeepL 翻译（更适合英文<->德语等）

translate.engine = 'deepl';
translate.key = 'DEEPL_API_KEY';

🔹 使用 LibreTranslate（开源 + 免费）

translate.engine = 'libre';
translate.url = 'https://libretranslate.com/translate'; // 可自建服务

7️⃣ 实战技巧 & 性能优化建议

✅ 开启缓存，避免重复请求

translate.cache = 1000 * 60 * 60; // 缓存 1 小时

✅ 批量翻译用 Promise.all 提升效率

const texts = ['Apple', 'Banana', 'Carrot'];
const translated = await Promise.all(texts.map(t => translate(t, 'zh')));
console.log(translated);

✅ 前端调用建议走代理，避免暴露 API Key

8️⃣ 常见问题 FAQ

❓ 需要注册翻译 API 吗？

使用 Google / DeepL / Yandex 需要注册 API Key。
使用 LibreTranslate 可直接使用其公共实例或部署自建服务器。

❓ 是否支持 HTML 翻译？

translate.js 本质是文本翻译工具，不建议直接翻译 HTML，可以通过 DOM 节点提取文本后翻译。

❓ 可用于 React / Vue 吗？

当然！translate() 是异步函数，完全可在组件逻辑中调用并设置响应式数据。

✅ 总结：推荐使用场景

使用场景	是否推荐
多语言博客或网站	⭐⭐⭐⭐⭐
AI 聊天机器人自动翻译	⭐⭐⭐⭐⭐
移动 App 动态翻译	⭐⭐⭐
后台批量文档翻译	⭐⭐⭐⭐
SSR / Next.js 国际化	⭐⭐⭐⭐