Оптимізація структури вихідного файлу з допомогою інструмента i18next-scanner

4 Березня 2024 в 12:06 105

При використанні інструмента

i18next-scanner

1	i18next-scanner

для генерації файлів перекладів зазвичай виникає потреба в оптимізації структури вихідного файлу. У багатьох випадках за замовчуванням формат вихідного файлу може не відповідати потребам конкретного проекту. У цій статті розглянемо способи оптимізації структури вихідного файлу з допомогою конфігурації інструмента

i18next-scanner

1	i18next-scanner

Для багатьох проектів, особливо для веб-додатків, інтернаціоналізація є важливою складовою. Вона дозволяє розширити аудиторію користувачів за рахунок підтримки різних мов. Однак, налаштування процесу локалізації може бути важливим завданням, особливо коли мова йде про структуру вихідного файлу.

Коли ви працюєте з інструментом

i18next-scanner

1	i18next-scanner

, ви використовуєте його конфігураційний файл для налаштування процесу сканування та генерації файлів перекладів. Один із основних компонентів цього файлу – це параметр виводу (

output

output

), який визначає місце збереження створених файлів перекладів та їхній формат.

Стандартним форматом вихідного файлу для

i18next-scanner

1	i18next-scanner

є об’єкт JSON з рядками ключ-значення. Однак у багатьох випадках, особливо коли проект має складну структуру, цей формат може бути не найбільш зручним.

Розглянемо конкретний випадок. Спочатку ми маємо конфігураційний файл

i18next-scanner

1	i18next-scanner

, що виглядає наступним чином:

module.exports = {
  input: [
    'src/**/*.{ts,tsx}',
    // Використовуйте ! для фільтрації файлів або каталогів
    '!src/**/*.test.{ts,tsx}'
  ],
  output: './src',
  options: {
    debug: true,
    func: {
      list: ['t'],
      extensions: ['.ts', '.tsx']
    },
    trans: false,
    lngs: ['en', 'vi'],
    defaultLng: 'en',
    defaultNs: 'common',
    defaultValue: function (lng, ns, key) {
      return key;
    },
    removeUnusedKeys: false,
    resource: {
      loadPath: 'locales/{{lng}}/{{ns}}.json',
      savePath: 'locales/{{lng}}/{{ns}}.json',
      jsonIndent: 2,
      lineEnding: '\n'
    },
    nsSeparator: false, // Роздільник простору імен
    keySeparator: false, // Роздільник ключа
    interpolation: {
      prefix: '{{',
      suffix: '}}'
    }
  }
};

module.exports = {

input: [

'src/**/*.{ts,tsx}',

// Використовуйте ! для фільтрації файлів або каталогів

'!src/**/*.test.{ts,tsx}'

output: './src',

options: {

debug: true,

func: {

list: ['t'],

extensions: ['.ts', '.tsx']

trans: false,

lngs: ['en', 'vi'],

defaultLng: 'en',

defaultNs: 'common',

defaultValue: function (lng, ns, key) {

return key;

removeUnusedKeys: false,

resource: {

loadPath: 'locales/{{lng}}/{{ns}}.json',

savePath: 'locales/{{lng}}/{{ns}}.json',

jsonIndent: 2,

lineEnding: '\n'

nsSeparator: false, // Роздільник простору імен

keySeparator: false, // Роздільник ключа

interpolation: {

prefix: '{{',

suffix: '}}'

}

};

Цей конфігураційний файл генерує файли перекладів у форматі JSON з рядками ключ-значення. Проте ми хочемо, щоб вихідний файл мав іншу структуру.

Наприклад, ми хочемо, щоб кожен переклад був згрупований за іменем файлу, а потім за назвою ключа. Тобто, замість вихідного файлу у вигляді:

{
  "title": "title",
  "content": "content"
}

{

"title": "title",

"content": "content"

}

Ми хочемо отримати таку структуру:

{
  "Index": {
    "title": "title",
    "content": "content"
  }
}

{

"Index": {

"title": "title",

"content": "content"

}

Як ми можемо досягти цієї структури? Для цього ми можемо змінити налаштування конфігураційного файлу

i18next-scanner

1	i18next-scanner

та додати додатковий обробник результатів сканування.

Для початку, ми можемо скористатися опцією

resource.createPath

1	resource.createPath

, щоб динамічно створювати шляхи до вихідних файлів з урахуванням структури нашого проекту. Наприклад:

resource: {
  loadPath: 'locales/{{lng}}/{{ns}}.json',
  savePath: function (lng, ns) {
    return `locales/${ns}/${lng}.json`;
  },
  jsonIndent: 2,
  lineEnding: '\n'
}

resource: {

loadPath: 'locales/{{lng}}/{{ns}}.json',

savePath: function (lng, ns) {

return `locales/${ns}/${lng}.json`;

jsonIndent: 2,

lineEnding: '\n'

}

Цей код дозволяє зберігати файли перекладів у відповідних каталогах, зазвичай згрупованих за назвою простору імен (

ns

) та мовою (

lng

lng

Далі, нам потрібно додатково обробити результати сканування, щоб створити бажану структуру вихідного файлу. Для цього ми можемо скористатися функцією обробки результатів (

transform

transform

transform: function (file, enc, done) {
  const transformedContent = {}; // Об'єкт для збереження трансформованого вмісту
  file.parser.on('data', function (key) {
    // Тут ми можемо обробити кожен ключ
    // За нашим прикладом, ми можемо створити відповідну структуру вихідного файлу
    transformedContent[file.namespace] = transformedContent[file.namespace] || {};
    transformedContent[file.namespace][key.key] = key.key;
  });
  file.parser.on('end', function () {
    // Записуємо трансформований вміст у вихідний файл
    const content = JSON.stringify(transformedContent, null, 2);
    file.contents = Buffer.from(content);
    done();
  });
}

transform: function (file, enc, done) {

const transformedContent = {}; // Об'єкт для збереження трансформованого вмісту

file.parser.on('data', function (key) {

// Тут ми можемо обробити кожен ключ

// За нашим прикладом, ми можемо створити відповідну структуру вихідного файлу

transformedContent[file.namespace] = transformedContent[file.namespace] || {};

transformedContent[file.namespace][key.key] = key.key;

});

file.parser.on('end', function () {

// Записуємо трансформований вміст у вихідний файл

const content = JSON.stringify(transformedContent, null, 2);

file.contents = Buffer.from(content);

done();

});

}

Цей код додає обробку результатів сканування, яка формує бажану структуру вихідного файлу. В нашому прикладі, він групує переклади за просторами імен та ключами.

Загалом, налаштування структури вихідного файлу з допомогою інструмента

i18next-scanner

1	i18next-scanner

може бути важливим завданням для забезпечення ефективної локалізації великих проектів. Використовуючи правильні налаштування конфігураційного файлу, можна досягти не лише зручності роботи з файлами перекладів, але й покращити організацію проекту в цілому.