nangongmoyan-i18n-toolkit

nangongmoyan-i18n-toolkit是一个fork i18n-toolkit 项目而生成的多语言工具包

prefix - operation

在正式使用之前，我们需要进行 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值

usage

Installation

Npm

npm install nangongmoyan-i18n-toolkit

Yarn

yarn add 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就可以看到效果