如何使用 Google 翻译 API
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
简单易懂的教程
前提条件：本教程需要具备React.js的相关知识。
我们将使用google-translate库来帮助您的应用连接到 Google Translate API，该库还提供了启动翻译的方法。我们还会使用react-cookies库在浏览器中存储用户选择的语言，方便用户使用。此外，我们会将一些翻译后的文本存储在 cookie 中，这样每次用户加载应用时就不需要重新翻译同一句话（翻译是要付费的，请尽量避免重复翻译）。
1）让我们在终端中开始：
create-react-app google-translate-demo
cd google-translate-demo
npm i google-translate
npm i react-cookies
2) 准备创建您的 API 密钥，并将其隐藏，以免泄露到互联网上。在终端中：
touch .env
open .env
3) 使用您的 Gmail 帐户登录Google API 控制台，然后创建您的 API 密钥：
4) 创建密钥后，切勿与任何人分享，也绝对不要将密钥上传到 GitHub 或任何其他在线平台。使用该密钥产生的任何费用都将计入您的账户。我认识一个人，他认识的人因为不知情地将密钥上传到 GitHub 仅三天，就被他人盗用，导致欠亚马逊 5 万美元以上。接下来，我将向您展示如何安全地使用和保护您的密钥。
5）在终端中：
open .gitignore
6）.env在第 25 行添加，这将告诉 GitHub 忽略将您的.env文件推送到线上。
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |
| # dependencies | |
| /node_modules | |
| /.pnp | |
| .pnp.js | |
| # testing | |
| /coverage | |
| # production | |
| /build | |
| # misc | |
| .DS_Store | |
| .env.local | |
| .env.development.local | |
| .env.test.local | |
| .env.production.local | |
| npm-debug.log* | |
| yarn-debug.log* | |
| yarn-error.log* | |
| .env |
.env7)在应用的顶层创建，从 Google 控制台复制您的密钥，并替换字符串“在此处粘贴您的密钥”：
8）在终端中：
mkdir src/utils
touch src/utils/googleTranslate.js
open src/utils/googleTranslate.js
9 ) 我们使用您创建的变量来存储您的 API 密钥，.env这样您的实际密钥就不会被公开。googleTranslate.js
- 如果服务器已经运行，请重新启动它，以便
process.env.BLAH_BLAH_BLAH获取最新更改。
10）准备工作已完成，现在我们可以构建应用程序了。在终端中：
open App.js
App.js11 ) 我们将创建一个简单的下拉选择框，并使用已连接到您的 Google Translate API 密钥的 google-translate 库翻译一些文本。
12) 运行应用程序。在终端中：
npm start
- 更改语言，刷新页面，并确认页面加载的语言与您上次选择的语言一致。
恭喜！既然您已经了解如何设置 Google Translate API 并使用google-translate + react-cookies库，接下来我们来清理一下。返回 Google 控制台并删除您的 API 密钥，这样可以确保未经您允许，任何人均无法使用您的密钥。
带上你的朋友，来体验前所未有的趣味 JavaScript 学习方式吧！waddlegame.com
文章来源：https://dev.to/robghchen/how-to-use-google-translate-api-27l9