如何使用来自 Node.js/Express/EJS 网站的一些 JS 脚本的 i18n JSON 翻译，这些脚本只能在客户端运行？

Question

Here is my problem,

I am using i18n to manage the translations of all the content of a website made on Node.js, Express and EJS. i18n uses json files server-side. I've updated all pages I needed to, except for one.

My client is used to have a js file called from the footer on every pages. This file is pretty dense, and is ran only client-side.

Because of time constraints, we would prefer not to refactor this code.

How could I use my json translation files server-side from a script that is to be run only client side ?

I though about making a dedicated api service to call from client side and get all the translations but it seems pretty heavy.

Or I though about using Node.js to write manually, at the end of my js file ran client side, the translations JSON files when they'd get updated. But that would mean thousands of lines, it's true I have to forget writing perfect clean code for this case, but, well...

Before going further I'd really appreciate your help on this. I would have love just to refactor, but for some tricky reasons, it may not be the greatest for now.

Thanks and have a great day you all. :)

Answer 1

What I did finally:

I've created a directory in /assets to store all translation json files.

If on test or dev environment, at every request I check if those files have been updated before or after /locales json files.

/server.js

const { watchAssetsTrads } = require("./middleware/clientSideTrads");
const notInProd = env === "test" || env === "dev";
if (notInProd) app.use((req, res, next) => watchAssetsTrads(next));

I need to improve this next file as I've learned here how I managed poorly my promises, though it works great.

/middlewares/clientSideTrads.js

const debug = require("debug")("trads");
const fs = require('fs');
const lodash = require('lodash');
const path = require('path');

const locales = path.join(__dirname, '../locales/');
const assetsTrads = path.join(__dirname, '../assets/trads');

const getFilesNamesFrom = path => {
  return new Promise((resolve, reject) => {
    fs.readdir(path, (err, files) => {
      if (err) return reject(err);
      return resolve(files.filter(e => e !== ".DS_Store"));
    });
  });
};

const read = jsonPath => {
  return new Promise((resolve, reject) => {
    fs.readFile(jsonPath, (err, data) => {
      if (err) return reject(err);
      return resolve(JSON.parse(data));
    });
  });
};

const update = (jsonPath, newJson) => {
  return new Promise((resolve, reject) => {
    fs.writeFile(jsonPath, JSON.stringify(newJson), err => {
      if (err) return reject(err);
      return resolve();
    });
  });
};

const getLastUpdateTime = filePath => {
  return new Promise((resolve, reject) => {
    fs.stat(filePath, (err, stats) => {
      if (err) return reject(err);
      return resolve(stats.mtime);
    });
  });
};

const updateAssetsTrads = async (localesTradPath, assetsTradPath) => {
  const localesTrad = await read(localesTradPath);
  const selectedKeys = lodash.pickBy(localesTrad, function(value, key) {
    if ((/^clientside/u).test(key)) return true;
    return false;
  });
  await update(assetsTradPath, selectedKeys);
  return null;
};

const watchAssetsTrads = async next => {
  debug('Checking asset trads');
  const files = await getFilesNamesFrom(locales);
  files.forEach(async file => {
    try {
      const localesTradPath = path.join(locales, file);
      const assetsTradPath = path.join(assetsTrads, file);
      const lastUpdate = await getLastUpdateTime(localesTradPath);
      const lastMerge = await getLastUpdateTime(assetsTradPath);
      if (lastUpdate > lastMerge) {
        updateAssetsTrads(localesTradPath, assetsTradPath);
        debug('File updated');
      }
    }
    catch (err) {
      return debug(err);
    }
    return null;
  });
  return next();
};

module.exports = {
  watchAssetsTrads
};

With i18n I manage translations via a cookie. As I mentioned, I needed to use a script file included in all pages on footer. There, I've imported this:

getCurrentLanguage.js

const getCookie = () => {
  const cookies = document.cookie.split('; ');
  const myCookie = cookies.filter(c => (/^my-cookie/u).test(c));
  if (typeof myCookie[0] == 'undefined') return 'fr';
  const cookieSplitted = myCookie[0].split('=');
  const currentLanguage = cookieSplitted[1];
  return currentLanguage;
};

const getCurrentLanguage = () => {
  const currentLanguage = getCookie();
  return currentLanguage;
};

export { getCurrentLanguage };

And then, I get all translations and return the one available for current language client side (I realize I only need to get one translation file, improve in coming).

getTrads.js

const createTradsObjFrom = async (languages, tradsPaths) => {
  try {
    const obj = {};
    for (const [index, lang] of languages.entries()) {
      const path = tradsPaths[index];
      obj[lang] = {
        json: await $.getJSON(path)
      };
    }
    return obj;
  }
  catch (err) {
    throw new Error("some error");
  }
};

const getTrads = currentLanguage => {
  return new Promise((resolve, reject) => {
    const tradsDir = "/assets/trads/";
    const languages = [
      "de",
      "en",
      "es",
      "fr",
      "it",
      "nl",
      "ru"
    ];
    const tradsPaths = languages.map(e => tradsDir + e + '.json');
    createTradsObjFrom(languages, tradsPaths)
    .then(trads => resolve(trads[currentLanguage].json))
    .catch(err => reject(err));
  });
};

export { getTrads };