文章前言

永远把别人对你的批评记在心里，别人的表扬，就把它忘了。Hello 大家好～！我是南宫墨言QAQ

本文主要是记录自己关于 nangongmoyan-i18n-toolkit 多语言工具包的使用过程，特地记录下与诸位分享，文中如有记录不正确的地方，欢迎大家在评论区指出，谢谢

观看到文章最后的话，如果觉得不错，可以点个关注或者点个赞哦！感谢～❤️

i18n-toolkit Github链接

文章主体

感谢各位观者的耐心观看，nangongmoyan-i18n-toolkit 使用正片即将开始，且听南宫墨言QAQ娓娓道来

在正式使用之前，我们需要进行 Google Sheets 授权一些相关配置

Google Sheets 授权

1. Create Google Cloud Project（新建 Google Cloud 项目）

链接：https://console.cloud.google.com/projectcreate

create

success created

2. Enable Google Sheets API And Apps Script API（启用Google Sheets API And Apps Script API）

Enable Google Sheets API

Enable Apps Script API

3. OAuth consent screen（OAuth 同意屏幕）

链接：https://console.cloud.google.com/apis/credentials/consent

3.1. Select User Type（选择用户类型）

这边我选择External（任何拥有 Google 帐户的测试用户均可使用）

3.2. Edit app registration（填写相关信息）

3.3. Add Scopes（添加授权范围）

Checked All Google Sheets API (所有都勾选上)

Checked All Apps Script API (所有都勾选上)

3.4. Summary（概括）

4. Create Credential（创建凭证）

链接：https://console.cloud.google.com/apis/credentials

5. Create Google Sheets (创建 Google Sheets)

链接：https://docs.google.com/spreadsheets/u/0/

5.1. Blank spreadsheets（创建空白电子表格）

5.2. Add Apps Script （添加脚本）

将下面脚本添加进去

function onEdit(e) {
  AutoGenerateKey(e.range.getRowIndex(), e.value);
}

// 自动生成hash key
function AutoGenerateKey(rowIndex, value) {
  if (value == undefined) return;
  var targetColumn = "A";
  var sheet = SpreadsheetApp.getActive();
  var keyRange = sheet.getRange(targetColumn + rowIndex);
  var keyValue = keyRange.getValue();
  if (!!keyValue) return;
  var dateStr = new Date().toISOString();
  var rawHash = Utilities.computeDigest(
    Utilities.DigestAlgorithm.MD5,
    value + dateStr
  );
  var txtHash = "";
  for (i = 0; i < rawHash.length; i++) {
    var hashVal = rawHash[i];
    if (hashVal < 0) {
      hashVal += 256;
    }
    if (hashVal.toString(16).length == 1) {
      txtHash += "0";
    }
    txtHash += hashVal.toString(16);
  }
  sheet.getRange(targetColumn + rowIndex).setValue(txtHash);
}

6. 添加配置文件`i18n.config.json`到项目根目录

{
  "apiKey": "上面第四步生成的key",
  "outputDir": "i18n", // 输出目录
  "spreadsheetId": "<google表格url中很长的那一段>",
  "tableIndex": 0, // 谷歌表格第一个子表
  "langues": ["zh-CN", "en-US"] // 支持的语言
}

7. 表格填写

当在对应语言下面填入相关内容，第一列会根据脚本自动生成一个hash值

实际使用

接下来这边起一个react项目进行演示：

npx create-react-app i18n-toolkit-demo

安装工具包

npm install nangongmoyan-i18n-toolkit

添加`i18n.config.json`配置文件

{
  "apiKey": "上面第四步生成的key",
  "outputDir": "i18n", // 输出目录
  "spreadsheetId": "<google表格url中很长的那一段>",
  "tableIndex": 0, // 谷歌表格第一个子表
  "langues": ["zh-CN", "en-US"] // 支持的语言
}

在package.json中的scripts中添加

"intl": "nangongmoyan-i18n-toolkit"

命令行执行npm run intl

npm run intl

就会将对应语言的json文件下载下来：

在VS Code中可以显示语言对应的具体文案

安装VS Code 插件： i18n ally

显示英文

Tips:点击右下角红框可以选择在编辑器中显示对应语言的文本

显示中文

页面显示

点击 changeLanguage 会切换成另外一个语言

上面demo链接, 本地执行npm start就可以看到效果

结尾营业

看官都看到这了，如果觉得不错，可不可以不吝啬你的小手手帮忙点个关注或者点个赞

关于 i18n-toolkit 的使用