[重构倒数第20天] - i18n什麽的交给前端来处理吧(一) 把GoogleSheet文件转成JSON文件

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

以前在处理多国语系的专案，都会在後端的framework之中定义语系的档案，或把翻译档案用成 excel 档案去管理，再透过後端语言去转换成後端所需要的多国语言格式。

不过最近几年非常流行的把翻译档案放上 google sheet ，然後串接 google sheet API 把翻译档给抓下来处理，这样会比较好去管理还有分享翻译的档案，所以当我们开始重构专案的时候，假设网站有多国语系的功能，我们其实最先开始就要处理 i18n 的部分了，在现在有了nodejs，串接 google sheet API 转换档案小菜一碟。

首先我们去 Google Cloud Platfrom 的页面，然後来开一个新的专案

https://console.cloud.google.com/

1. 点击 『选取专案』
   

2. 选择『新增专案』
   

3. 新增专案名称 ，名称这边我就先随便打
   

4. 浏览及启用 API
   

5. 启用 API 和服务
   

6. 找到 google sheet API ，点它
   

7. 启用它
   

8. 点选凭证
   

9. 点选建立凭证然後选择服务帐户
   

10. 这边就随便填一下，不过名称不要填中文
    

11. 角色就给它选拥有者
    

12. 把你自己的帐号给加上去
    

13. 好了之後会进到这个页面，点选下面的连结
    

14. 选择金钥 -> 建立新的金钥
    

15. 然後输出 JSON 格式，存到你的专案资料夹内
    

16. 就会有一个这样的档案，这个档案非常的重要，千万要保留好
    

接下来我们开始来新增一个 google sheet 文件，请记得这个文件不能设定为私人的。

这份文件你会发现第一行我定义了 key，这个 key 是我们到时候要在专案里面所使用的 Object 的 key，所以我们现在定义的这个 google sheet 格式我们要转换成下面的这个 JSON。

{
  "cancel": "取消",
  "email": "Email信箱",
  "date": "日期",
  "subject": "标题",
  "message": "讯息内容",
  "upload": "上传"
}

如何把 google sheet 文件转成 JSON文件 ?

我们要使用 spreadsheet-to-json的这个套件来帮助我们转换，先帮我安奘以下的套件

npm i spreadsheet-to-json fs-extra flat -D

spreadsheet-to-json : https://www.npmjs.com/package/spreadsheet-to-json
fs-extra : https://www.npmjs.com/package/fs-extra
flat : https://www.npmjs.com/package/flat

然後把刚刚那个私密金钥给放到我们的专案资料夹内，开一个新的 js 档案，我取名为 GoogleSheetToJson.js

// GoogleSheetToJson.js
const fs = require("fs-extra");
const unflatten = require("flat").unflatten;
const { extractSheets } = require("spreadsheet-to-json");
const path = require("path");
extractSheets(
  {
    spreadsheetKey: "",
    credentials: null,
    sheetsToExtract: [],
  },
  (err, data) => {
    
  }
);

在 extractSheets 里面塞的设定物件有三个 spreadsheetKey、credentials、sheetsToExtract这三个

• spreadsheetKey：指的是我们 google sheet 文件的 key

• credentials：我们下载来的私密金钥
• sheetsToExtract：我们的 google sheet 的分页名称，不要用中文

// GoogleSheetToJson.js
const fs = require("fs-extra");
const unflatten = require("flat").unflatten;
const { extractSheets } = require("spreadsheet-to-json");
const path = require("path");

extractSheets(
  {
    spreadsheetKey: "1ufASw15wiECn8N6MTsKv-VFywb8sN8uycgHdqLkm5_Q",
    credentials: require("./arctic-badge-***102-********1201.json"),
    sheetsToExtract: ['index', 'about'],
  },
  (err, data) => {
     // 抓到内容之後要做的动作
  }
);

接下来我们就要来处理抓下来的 Google Sheet 的格式

// GoogleSheetToJson.js
const fs = require("fs-extra");
const unflatten = require("flat").unflatten;
const { extractSheets } = require("spreadsheet-to-json");
const path = require("path");

extractSheets(
  {
    spreadsheetKey: "1ufASw15wiECn8N6MTsKv-VFywb8sN8uycgHdqLkm5_Q",
    credentials: require("./arctic-badge-***102-********1201.json"),
    sheetsToExtract: ['index', 'about'],
  },
  (err, data) => {
    if (err) throw err;
    const read = [...data['index'], ...data['about']];
    const result = {};
    const files = [];
    
    for (const key in read[0]) {
      if (key !== "key") {
        files.push(key);
        result[key] = {};
      }
    }
    read.forEach((el) => {
      for (const file of files) {
        result[file][el["key"]] = el[file] ? el[file] : "";
      }
    });
    for (const fileName of files) {
      fs.ensureDirSync(
        path.dirname(
          path.resolve(__dirname, "./language", `${fileName}.json`)
        )
      );
      fs.writeJSONSync(
        path.resolve(__dirname, "./language", `${fileName}.json`),
        unflatten(result[fileName], { object: true }),
        { spaces: 2 }
      );
    }
  }
);

接下来我们就执行 node GoogleSheetToJson.js 这样就会把 Google Sheet 的文件转换成我们自己要的 JSON 格式，就像下面这样。

sheetsToExtract: ['index', 'about'] 这边我把两个分页放进来，这样他就会把两个分页的资料都给抓进来，放到 language 这个资料夹内。

// zh-TW.json
{
  "cancel": "取消",
  "email": "Email信箱",
  "date": "日期",
  "subject": "标题",
  "message": "讯息内容",
  "upload": "上传"
}

// ja-JP.json
{
  "cancel": "取り消し",
  "email": "Emailアドレス",
  "date": "日付",
  "subject": "タイトル",
  "message": "メッセージ内容",
  "upload": "アップロード"
}

// en-US.json
{
  "cancel": "cancel",
  "email": "email",
  "date": "date",
  "subject": "subject",
  "message": "message",
  "upload": "upload"
}

这样就很简单的把 google sheet 的内容给专换成 JSON 了，我们也就可以放心地让其他人来一起管理这份文件，每次上线的时候都先执行 node GoogleSheetToJson.js，就可以确保翻译档 JSON 是最新的。

好啦！今天就先到这边了，明天我们再来谈怎麽在 Vue 里面使用这些翻译之後的 JSON 吧！

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员，然後再使用下面连结进入网站点击「立即购课」，这样才可以让我获得更多的课程分润，还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程，如果你觉得不错的话，可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友，我也有开设JS的入门课程，可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng