Окончательное руководство по локализации JavaScript

JavaScript — самый популярный язык программирования в мире, согласно опросу, проведенному Stackoverflow, с ошеломляющим показателем популярности 69,7% по сравнению с другими языками программирования.

Его полезность как в качестве языка браузера, так и в качестве бэкенда в Node.js делает его идеальным стеком разработчика.

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

В этой статье мы рассмотрим локализацию JavaScript и способы двустороннего подхода. Во-первых, с помощью файлового перевода, который использует Transifex для получения переводов и их локального использования в наших приложениях, а во-вторых, с помощью Transifex Native, который представляет собой облачный стек локализации, SDK которого может быть установлен или использован через CDN без необходимости использования файлов.

Что такое локализация?

Локализация — это процесс преобразования контента для использования в конкретных местах, т.е. на нескольких языках в ходе интернационализации вашего проекта. Это просто означает разработку программного обеспечения таким образом, чтобы оно могло работать в нескольких местах, языках и регионах.

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

Существует множество возможностей, как достичь локализации с помощью JavaScript, но большинство разработчиков не знают, как это сделать, будь то выбор правильных инструментов, фреймворков или библиотек; необходимо провести множество исследований и мозговых штурмов, чтобы сделать процесс более гладким.

Это пошаговое руководство призвано научить вас всему, что необходимо знать для локализации сайта, приложения или программного обеспечения на JavaScript с помощью Transifex — платформы, которая идеально подходит для решения задач локализации и интернационализации для разработчиков любого уровня.

Способы локализации проекта JavaScript

Существует два способа локализации проекта javaScript:

  1. Файловый: Это означает, что ваш контент должен быть извлечен в виде файла и загружен в систему управления переводами (TMS), затем вы обычно переводите контент, загружаете его обратно из TMS, загружаете его обратно в ваше приложение/веб-сайт и развертываете изменения.

  2. Бесфайловый: Этот процесс предполагает установку плагина непосредственно в код и синхронизацию переводов с TMS без необходимости проходить вышеупомянутый процесс.

Файловый подход к локализации JavaScript

Интернационализация, как было определено ранее, — это процесс проектирования и создания программного обеспечения таким образом, чтобы оно могло быть адаптировано для различных пользователей из разных культур, регионов и языков. Это также подразумевает адаптацию программного обеспечения для принятия различных форм данных и настроек в соответствии с местными обычаями для правильной обработки.

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

Итак, допустим, у нас есть страница, которую мы хотим локализовать, как показано ниже:

<!-- ./index.HTML -->

<html lang="en">
    <head>
        <title>JavaScript Transifex Demo</title>
    </head>
    <body>
        <div class="container">
            <nav class="navbar">
                <div class="container">
                    <div class="logo">
                        <h1>Local JS</h1>
                    </div>
                    <div class="navbar-right">
                        <select id="localization-switcher" class="locale-switcher">
                            <option value="en">English</option>
                            <option value="fr">French</option>
                            <option value="ar">Arabic (العربية)</option>
                        </select>
                    </div>
                </div>
            </nav>
            <div class="content-section">
                <h1 localization-key="title">
                    Welcome to this localization demo site
                </h1>
                <p localization-key="description">
                    Software localization is the process of adapting software to the culture and language of an end user, from standards of measurement to video and graphic design. It involves translation, design, and UX changes to make software look and feel natural to the target user.
                </p>
            </div>
        </div>
        <script src="./js/script.js"></script>
    </body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

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


<!-- ./lang/en.json -->

{

    "title": "Welcome to this localization demo site",

    "description": "Software localization is the process of adapting software to the culture and language of an end user, from standards of measurement to video and graphic design. It involves not only translation but also design and UX changes to make software look and feel natural to the target user."

}

Вход в полноэкранный режим Выйти из полноэкранного режима

Затем можно использовать запрос на выборку, чтобы заменить статическое содержимое HTML-файла содержимым из JSON:


<!-- ./js/script.js -->

let translations = {};

const fetchContent = () => {

    return fetch(`lang/en.json`)

        .then((response) => {

            return response.json();

        })

        .then((data) => {

            translations = data;

            translatePage();

        });

};

fetchContent();

const translatePage = () => {

    document.querySelectorAll('[localization-key]').forEach((element) => {

        let key = element.getAttribute('localization-key');

        let translation = translations[key];

        element.innerText = translation;

    });

};

Войти в полноэкранный режим Выход из полноэкранного режима

В приведенном выше фрагменте кода мы успешно извлекли все содержимое из файла JSON. Здесь метод querySelectorAll() был использован для поиска всех элементов со свойством «localization-key», которое мы назначили в нашем HTML-файле, перебора атрибутов, соответствующих ключу нашего объекта, и, наконец, вставки данных.

Пока все хорошо, мы видели, как читать данные из файла с помощью ванильного JavaScript, однако для локализации на основе файлов Transifex позволяет загрузить исходный файл, который является английской версией нашего контента для этого демо (en.json). После этого начального этапа можно использовать платформу для перевода контента, после чего его можно загрузить и получить локализованный контент.

Мы рассмотрим, как создать файловый проект на Transifex, а затем загрузить исходный контент для перевода. Transifex позаботится о переводе, а мы сможем загрузить переведенный контент.

Как создать проект на основе файлов на Transifex

Первой точкой входа во вселенную Transifex является создание учетной записи. Вы можете зарегистрироваться с помощью учетной записи GitHub, Google или LinkedIn, которая бесплатна в течение 15 дней, а для проектов с открытым исходным кодом бесплатна навсегда.

После создания учетной записи вам нужно создать проект. Необходимо дать проекту имя, а в качестве типа проекта выбрать «File-based».

Наконец, вы должны указать основной язык вашего приложения и язык (языки), на который мы будем его переводить. Мы будем использовать английский язык в качестве основного языка для данного руководства, а французский и арабский — в качестве целевых языков.

Примечание: Снимите флажок, спрашивающий, хотите ли вы автоматически добавить демо-файл, если вы не хотите использовать его для тестирования платформы Transifex.

Когда вы закончите, нажмите на кнопку «Создать проект».
После этого мы направим вас на следующую страницу, где вы сможете загрузить исходный файл в любом поддерживаемом формате. но мы будем использовать формат JSON.

После создания проекта выберите кнопку «Загрузить файл», чтобы загрузить ваш извлеченный JSON-файл:

Когда это будет сделано, вы сможете приступить к переводу вашего контента в редакторе!

Загрузка переведенного содержимого из Transifex

После завершения вышеописанного процесса мы можем приступить к загрузке переведенного файла после успешного перевода в содержимое нашего приложения.

Чтобы загрузить переведенный файл, перейдите на языковую вкладку проекта, нажмите на файл, а затем выберите «Загрузить только проверенные переводы». Transifex позволит нам загрузить JSON-файл вашего переведенного языка:

Примечание: Пожалуйста, убедитесь, что вы сохранили файл с именем локали в папке lang, которую мы создали ранее, например, ./lang/ar.json.

Асинхронная загрузка переводов из локальных файлов

Мы хорошо начали, переведя наш исходный файл (en.json) на арабский (ar.json), и сохранили оба в папке languages (lang). Ранее мы также смогли загрузить данные из исходного файла. Теперь давайте реализуем асинхронную загрузку наших переводов:


const locale = 'ar';

let translations = {};

document.addEventListener('DOMContentLoaded', () => {

    setLocale(locale);

});

const setLocale = async (newLocale) => {

    translations = await fetchTranslations(newLocale);

    translatePage();

};

const fetchTranslations = async (newLocale) => {

    const response = await fetch(`lang/${newLocale}.json`);

    return await response.json();

};

const translatePage = () => {

    document.querySelectorAll('[localization-key]').forEach((element) => {

        let key = element.getAttribute('localization-key');

        let translation = translations[key];

        element.innerText = translation;

    });

};

Войти в полноэкранный режим Выход из полноэкранного режима

Приведенный выше код очень похож на код, который мы использовали для получения данных из исходного файла. Мы делаем это асинхронно, поэтому он загружает содержимое на основе параметра **locale**. Давайте еще раз пройдемся по коду.

Во-первых, мы объявили две переменные, чтобы указать локаль, которую мы хотим получить на основе доступных локалей. Как мы видим, мы установили значение **ar**, что является кодом языка для арабского:

const locale = 'ar';
let translations = {};
Вход в полноэкранный режим Выйти из полноэкранного режима

Затем мы создали **addEventListener()**, который срабатывает, когда содержимое страницы готово к просмотру, используя событие **DOMContentLoaded**. В этом **addEventListener()** мы вызвали функцию **setLocale()** и передали переменную **locale**.

document.addEventListener('DOMContentLoaded', () => {
    setLocale(locale);
});
Вход в полноэкранный режим Выход из полноэкранного режима

Основной функцией является setLocale(), и она выполняет две основные задачи:

  1. Загрузка переводов для заданной локали

  2. Перевод страницы для отображения локализованного на заданном языке содержимого:

const setLocale = async (newLocale) => {
    translations = await fetchTranslations(newLocale);
    translatePage();
};
Вход в полноэкранный режим Выход из полноэкранного режима

Как видно из функции **setLocale()**, сначала мы получили наши переводы, и, как мы видим, мы использовали async/await для получения переводов перед запуском функции, которая загрузит нашу страницу с полученным содержимым. Мы передали локаль в функцию **fetchTranslations()** и использовали ее для получения содержимого из файла локали:

const fetchTranslations = async (newLocale) => {
    const response = await fetch(`lang/${newLocale}.json`);
    return await response.json();
};
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, когда мы получили содержимое, мы передаем его нашей странице, чтобы оно появилось с помощью второй функции в функции setLocale, а именно **translatePage()**:

const translatePage = () => {
    document.querySelectorAll('[localization-key]').forEach((element) => {
        let key = element.getAttribute('localization-key');
        let translation = translations[key];
        element.innerText = translation;
    });
};
Вход в полноэкранный режим Выход из полноэкранного режима

Бесфайловый подход к локализации JavaScript

Бесфайловый подход к локализации JavaScript — это то, что мы можем описать как «Transifex Native».

Этот подход позволяет вам позволить платформе локализации напрямую взаимодействовать с вашей кодовой базой и автоматически подтягивать/отталкивать содержимое. Этот подход является лучшей альтернативой традиционному подходу к локализации на основе файлов. Вот как начать работу с бесфайловым подходом:

  1. Создайте учетную запись Transifex, если у вас ее еще нет.

  2. Создайте проект Transifex Native.

  3. Укажите основной язык вашего приложения и язык (языки), на который мы будем его переводить.

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

Внизу страницы нажмите на кнопку «Generate Native Credentials Now». Токен API и _secret_key будут отображены во всплывающем окне. Скопируйте оба ключа и сохраните их, потому что они очень пригодятся в дальнейшем. Нажатие на кнопку также покажет нам конфигурации, которые мы будем использовать в нашем JavaScript-файле.

Как только все это будет улажено, мы можем приступить к передаче содержимого в Transifex и его последующей локализации.

Как настроить Transifex Native в нашем проекте JavaScript

Первым шагом в использовании Transifex native является его настройка. Это можно сделать различными способами, как показано в документации Transifex JavaScript. Однако в данном руководстве мы будем использовать CDN, а затем воспользуемся Transifex CLI, когда захотим расшарить наш контент.

Итак, давайте добавим CDN в наш HTML-файл, и тогда мы сможем использовать Transifex непосредственно в нашем JavaScript-файле.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JavaScript Transifex Demo</title>
    </head>
    <body>
   // ...
       <script
            type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@transifex/native/dist/browser.native.min.js"
        ></script>
        <script src="./index.js"></script>
    </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

После этого мы можем перейти к нашему JavaScript-файлу и настроить Transifex, используя токен, который мы получили ранее при создании нашего проекта.

const tx = Transifex.tx;
const t = Transifex.t;
tx.init({
    token: 'ADD TOKEN KEY HERE.'
});
Войти в полноэкранный режим Выход из полноэкранного режима

Как отправить содержимое в Transifex с помощью JavaScript

Мы успешно настроили Transifex локально в нашем JavaScript-файле после выполнения описанных выше шагов. Теперь мы хотим отправить содержимое непосредственно с помощью Transifex CLI без использования внешних файлов, как в случае с файловым подходом.

Для этого нам нужно сначала создать файл package.json, а затем установить зависимость Transifex CLI, выполнив следующие команды:


$ npm init -y

$ npm install @transifex/cli --save

Войти в полноэкранный режим Выйти из полноэкранного режима

После этого мы увидим, что Transifex CLI был установлен в объект зависимости нашего файла package.json:

"dependencies": {
    "@transifex/cli": "^4.2.2"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы можем перейти к проталкиванию нашего содержимого с помощью функции t. Как мы видим ниже, мы также использовали параметр _key для присвоения каждому содержимому ключа, чтобы потом легко получить это содержимое:

const tx = Transifex.tx;
const t = Transifex.t;
    tx.init({
        token: 'ADD TOKEN KEY HERE',
    });
    t('Welcome to this localization demo site', {
        _key: 'title',
    });
    t(
        'Software localization is the process of adapting software to both the culture and language of an end user, from standards of measurement to video and graphic design. It involves not only translation, but also design and UX changes to make software look and feel natural to the target user.',
        {
            _key: 'description',
        }
    );
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, мы инициализировали содержимое, которое хотим передать в Transifex для локализации. Теперь давайте подтолкнем содержимое с помощью библиотеки @transifex/cli, которая соберет все переводимые строки и подтолкнет их к Transifex с помощью следующей команды:

$ ./node_modules/.bin/txjs-cli push src/ --token=<PROJECT TOKEN> --secret=<PROJECT SECRET>
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание: В приведенной выше команде убедитесь, что вы добавили свой токен и секретный ключ. Вы также заметите, что мы используем src/, что означает, что эта команда будет искать файл index.js в папке src.

Файл index.js — это файл, содержащий содержимое, которое мы хотим вытолкнуть. Убедитесь, что вы поместили ваши HTML, CSS и JavaScript файлы в папку src, как показано в этом репозитории GitHub.

Как извлечь локализованное содержимое из Transifex

Получение содержимого из Transifex похоже на то, как мы впервые извлекали данные из JSON-файлов. Единственное существенное отличие заключается в том, что здесь нет необходимости использовать API fetch для получения данных.

const locale = 'ar';
document.addEventListener('DOMContentLoaded', () => {
    setLocale(locale);
});
const setLocale = (newLocale) => {
    tx.setCurrentLocale(newLocale)
        .then(() => {
            translatePage();
        })
        .catch((err) => console.log(err));
};
const translatePage = () => {
    document.querySelectorAll('[localization-key]').forEach((element) => {
        let key = element.getAttribute('localization-key');
        let translation = t(key);
        element.innerText = translation;
    });
};
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше коде мы указали локаль, из которой мы хотим получить ее локализованное содержимое. Мы создали функцию для получения данных, которая является методом **setLocale()**, и, наконец, мы использовали метод **translatePage()**, чтобы помочь получить каждое содержимое на основе key и передать его в пользовательский интерфейс.

Заключение

В этом пошаговом руководстве мы изучили два основных метода реализации локализации JavaScript, а именно: File-based и Fileless.

Оба метода работают эффективно. Но для больших проектов подход, основанный на файлах, становится чрезвычайно сложным в управлении.

Этот недостаток масштабируемости выявляет эффективность Transifex native в локализации, поскольку переводы не включаются в вашу кодовую базу, как показано в этом руководстве.

Нужна дополнительная информация о том, как работает бесфайловая локализация JavaScript? Не стесняйтесь, ознакомьтесь с документацией Transifex Native.

Оцените статью
devanswers.ru
Добавить комментарий