NPM-пакет для интернационализации i18n используется на фронтэнде для создания мультиязычных вебсайтов очень часто. Перевод текста в нем содержится обычно в json или в js файлах, и требует дальнейшей обработки, чтобы с ним с комфортом могли работать контент-редакторы. В статье описывается как максимально упростить и сделать удобным хранение и внесение изменений в перевод.
Работа с переводом
Есть (наверно) специальные программы для этого, но наиболее удобным мне показалось хранение перевода в Google spreadsheet
![](https://webcf.waybackmachine.org/web/20230316101924/https://habrastorage.org/getpro/habr/upload_files/235/82f/7b7/23582f7b78c7584d7c849bd57c41f8d2.png)
В первой колонке идет 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) билдится с фронтэндом, остальные подгружаются с бэка по запросу, поэтому должны быть отправлены туда
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 данные по джейсонам и раскладывает их куда надо:
parseTsv.js
"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 секунд.