Работа с i18n — автоматизация Google Translate и другие полезные советы

NPM-пакет для интернационализации i18n используется на фронтэнде для создания мультиязычных вебсайтов очень часто. Перевод текста в нем содержится обычно в json или в js файлах, и требует дальнейшей обработки, чтобы с ним с комфортом могли работать контент-редакторы. В статье описывается как максимально упростить и сделать удобным хранение и внесение изменений в перевод.

Работа с переводом

Есть (наверно) специальные программы для этого, но наиболее удобным мне показалось хранение перевода в Google spreadsheet

В первой колонке идет i18n ключ. Во второй — текст на основном языке. В ячейке С4 находится следующее:

=GOOGLETRANSLATE(B4, "en", "es")

Автоматический перевод с английского на испанский соответствующего текста. Формульное значение данной ячейки копируется на весь столбец. Аналогично поступаем с другими колонками/языками.

При редактировании какой либо ячейки вручную, измененный текст уже не будет перезаписываться Google Translate-ом.

Преобразование для i18n

Для начала загрузим наш Google spreadsheet локально: File -> Download -> Tab Separated Values (.tsv)

В i18n у меня разные переводы хранятся в разных json файлах — en.json, es.json etc. Основной (en.json) билдится с фронтэндом, остальные подгружаются с бэка по запросу, поэтому должны быть отправлены туда

{   "account": {     "2fa": "Two Factor Authorisation (2FA)",     "2fa_optional": "Two Factor Authorisation (2FA)",     "2fa_placeholder": "Insert here your Two Factor Authorisation",     "2fa_add": "Add 2FA",     "2fa_add_details": "Copy this code <b>{code}</b> and add to a compatible Google Authenticator app or scan the QRCode bellow with Google Authenticator.",     "2fa_enabled": "2FA is successfully enabled",     "2fa_is_enabled": "2FA is currently enabled on your account", ...

Следующий node.js код распарсивает экспортированные из Google spreadsheet данные по джейсонам и раскладывает их куда надо:

"use strict";  const fs = require("fs");  const rawdata = fs.readFileSync("./src/resources/lang/translation.tsv"); let content = rawdata.toString(); let lines = content.split("\r\n"); let columns = lines[1].split("\t"); lines = lines.splice(3); for (let i = 1; i < columns.length; i++) {   const lang = columns[i];   const data = {};    lines.forEach(line => {     const trs = line.split("\t");     const val = trs[0].split(".");     if (val.length > 1) {       if (!data[val[0]]) {         data[val[0]] = {};       }       data[val[0]][val[1]] = trs[i];     } else {       data[trs[0]] = trs[i];     }   });   fs.writeFileSync(     "../backend/public/assets/lang/" + lang + ".json",     JSON.stringify(data, null, 2)   ); } fs.copyFile(   "../backend/public/assets/lang/en.json",   "./src/resources/lang/en.json",   err => {     if (err) throw err;   } );

Всё.

Google API

У Google есть API, которое позволяет программно скачать Google spreadsheet (включая авторизацию). Если есть желание и время его интегрировать, то можно еще более автоматизировать данный процесс и даже сделать его частью CI/CD. Но и в описанном выше варианте внедрение сделанных редактором изменений в перевод занимает 20 секунд.