在前端国际化中，往往会涉及到多语言的支持，而多语言的配置需要一个翻译工具，以支撑我们的业务适应不同的语言环境。这时候，Google Sheets 便成了我们的选择之一。而 google-spreadsheet-i18n 就是用来连接 Google Sheets 并帮助我们获取本地化信息的 npm 包。
安装
如果你想使用 npm 作为包管理器，在终端执行下面的命令：
npm i google-spreadsheet-i18n --save
如何使用
下面以一个前端项目使用 google-spreadsheet-i18n 举例，展示如何使用这个工具包。
创建 Google Sheets
首先我们需要创建一个 Google Sheet 文档，作为我们的翻译文本库，可以通过打开一个新的 Google Sheets 文档，并设置第一列为英文字段名，接着填写我们的翻译内容。一个示例的文档如下图所示:
其中：
- 第一列为原文字段，表示需要翻译的英文内容
- 第二列为中文翻译
- 第三列为法语翻译
获取机密凭据
要与 Google Sheets 进行连接，我们需要在 Google Cloud 中创建一个新的项目并获取机密凭据来访问这个项目。接下来，我们需要创建一个项目并获取机密凭据，这一过程分成四个步骤：
1. 获取我们要访问的 SpreadSheet ID
我们需要获取要访问的 SpreadSheet ID，注意替换 <sheets_id> 为你的实际 ID。我们可以从 Sheets 文档的地址栏中找到它。
# curl curl -H "Authorization: Bearer <YOUR ACCESS TOKEN>" \ https://sheets.googleapis.com/v4/spreadsheets/<sheets_id>?fields=sheets%2Fproperties%2FgridProperties%2FrowCount%2Csheets%2Fproperties%2FgridProperties%2FcolumnCount%2CspreadsheetId%2CspreadsheetUrl%2Csheets%2Fproperties%2FsheetId%2Csheets%2Fproperties%2Ftitle%2Csheets%2Fdata%2FrowMetadata%2FsuggestionState%2Csheets%2Fdata%2FrowData%2Fvalues%2CnamedRanges%2CspreadsheetTheme%2Cproperties%2FautoRecalc%2Cproperties%2Flocale%2Cproperties%2FtimeZone
2. 设置项目中的 Google Sheets API
要使用 google-spreadsheet-i18n，我们需要将 Google Sheets API 启动并连接到我们的项目。我们可以通过转到 https://console.developers.google.com/ 并选择我们的新项目，然后在左侧菜单中选择 API和服务 > 概览 来完成此操作。接着，我们可以单击 启用API和服务 按钮，并搜索 Sheets API，最后单击 启用。
3. 创建凭据
现在我们需要创建一个凭据 (Credentials) 并将它附加到我们的项目上。我们可以在 https://console.cloud.google.com/apis/credentials 中的 创建凭据 按钮创建新的 OAuth 2.0 client ID 型凭据，需要提供 OAuth 同意屏幕，应用名称和扫描的网站 URL。我们还需要将我们的项目添加到有效 JavaScript 来源的列表中。
4. 下载凭据
最后，我们可以根据上述步骤创建的凭据 clien_id.json，下载凭据文件并将其放入我们的项目中。
连接到 Google Sheets API
完成上述步骤后，我们就可以连接到 Google Sheets API 并使用 google-spreadsheet-i18n 包。删除 clientId.json 中的所有内容和注释。
示例的连接和使用代码如下：
-- -------------------- ---- ------- ----- - --------------------- - - ----------------------------------- -- -- --------------------- -- ----- --------------- - --- ----------------------- --------- ----------------------------- -- ------ -------- ---------------------------- -- ------ ------ -- -- ------- -------- -- ------ --- -- --- --------------------- -- ----- ----------------------- -- -- --- --------------------- ----- --- - ----------------------------- ------------------ -- -------- ----- -- --- --------
通过以上示例代码，我们可以看到 google-spreadsheet-i18n 这个 npm 包的使用方式，同时帮助我们连接到 Google Sheet 中的文本库，并根据当前或指定区域的设置获取翻译内容。当我们配置了多语言方案时，其可以按需获取不同的翻译版本。
结论
本文以 google-spreadsheet-i18n 为例，较为详细介绍了通过 npm 包进行前端国际化的流程和实现方式。在实际应用中，我们可以将其作为翻译的自动化工具，并将其与其他前端方案的多语言实现相结合，来提供一个面向国际市场的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737c890c4f7277584172