Поддержка старых браузеров

Библиотека Globalize в современных версиях построена поверх стандарта ECMAScript Internationalization API (Intl) и набора данных CLDR (Unicode Common Locale Data Repository). Это означает, что уровень поддержки браузеров напрямую зависит от наличия:

  • ECMAScript 5+ (обязательно)
  • частичной поддержки ES6 (желательно, но не всегда критично при сборке)
  • Intl API (ключевой компонент)
  • JSON и корректной работы Date, Number, String методов

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

Поддержка ECMAScript 5 как базовое требование

Globalize не рассчитан на выполнение в среде без ES5. Основные требования:

  • Array.prototype.forEach, map, filter
  • Object.keys
  • Function.prototype.bind
  • строгий режим "use strict"

Для старых окружений подключается набор полифиллов, обычно через core-js:

import "core-js/es/array";
import "core-js/es/object";
import "core-js/es/function";

При сборке через Webpack или Rollup такие зависимости включаются на уровне entry-point, обеспечивая совместимость с устаревшими движками.

Критическая роль Intl API

Globalize в значительной степени опирается на Intl. В старых браузерах (например, Internet Explorer до версии 11) поддержка либо отсутствует, либо частично реализована.

Проблема проявляется в следующих областях:

  • форматирование чисел
  • форматирование дат и времени
  • работа с локалями
  • правила множественного числа

Для компенсации используется полифилл:

import "intl";
import "intl/locale-data/jsonp/ru";
import "intl/locale-data/jsonp/en";

Важно учитывать, что полифилл Intl может существенно увеличивать размер бандла, особенно при добавлении множества локалей.

CLDR как обязательный слой данных

Globalize не содержит локализационных данных внутри кода. Вместо этого используется CLDR.

Для старых браузеров важна не только загрузка данных, но и корректная работа JSON и XHR/Fetch.

Подключение CLDR обычно выглядит так:

import Globalize from "globalize";
import likelySubtags from "cldr-data/supplemental/likelySubtags.json";
import plurals from "cldr-data/supplemental/plurals.json";
import numberingSystems from "cldr-data/supplemental/numberingSystems.json";

import ruNumbers from "cldr-data/main/ru/numbers.json";
import ruCurrencies from "cldr-data/main/ru/currencies.json";
import ruCaGregorian from "cldr-data/main/ru/ca-gregorian.json";

Для старых браузеров важно учитывать:

  • отсутствие fetch (нужен polyfill или XHR)
  • возможные ограничения CORS при загрузке JSON
  • необходимость транспиляции модулей

Транспиляция кода для устаревших движков

Для браузеров уровня IE11 и ниже требуется транспиляция через Babel:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      },
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}

Это обеспечивает:

  • преобразование стрелочных функций
  • замена const и let на var
  • полифилл Promise (если используется в связке с загрузкой данных)
  • поддержка генераторов (при необходимости)

Ограничения старых браузеров при работе с Globalize

При работе в окружениях без современных стандартов возникают ограничения:

Отсутствие Promise

Некоторые сценарии загрузки CLDR данных используют асинхронность. Без Promise требуется полифилл:

import "core-js/es/promise";

Отсутствие Fetch API

Загрузка JSON может требовать XHR-реализации:

function loadJSON(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatecha nge = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    }
  };
  xhr.send();
}

Ограничения JSON.parse

Очень старые реализации могут требовать дополнительной проверки входных данных.

Особенности работы с локалями в старых окружениях

Globalize требует явного указания локалей. В старых браузерах это особенно важно из-за отсутствия fallback-механизмов Intl.

Пример инициализации:

Globalize.load(
  likelySubtags,
  plurals,
  numberingSystems,
  ruNumbers,
  ruCurrencies,
  ruCaGregorian
);

Globalize.locale("ru");

Без корректной загрузки supplemental-данных возможны ошибки:

  • некорректное множественное число
  • неправильное форматирование валют
  • отсутствие региональных правил дат

Совместимость с Internet Explorer

Internet Explorer 9–11 требует отдельного внимания:

IE11

  • поддержка ES5 частичная
  • требуется Intl polyfill
  • нужен Promise polyfill при асинхронных загрузках

IE10 и ниже

  • отсутствие строгой поддержки JSON-модулей
  • необходимость XHR вместо fetch
  • ограниченная поддержка строгого режима

IE9

  • дополнительные ограничения DOM API
  • необходимость ручной обработки ошибок
  • частые проблемы с загрузкой модулей через bundler

Сборка для legacy-окружений

Для обеспечения работы Globalize в старых браузерах используется отдельная конфигурация сборки.

Webpack пример:

module.exports = {
  entry: ["core-js/stable", "./src/index.js"],
  output: {
    filename: "bundle.legacy.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader"
      }
    ]
  }
};

Дополнительно:

  • отключается code splitting для IE
  • избегается dynamic import
  • уменьшается использование ES module syntax

Проблемы производительности в старых браузерах

Globalize при полной локализации может включать значительный объём CLDR данных. В старых движках это приводит к:

  • долгой инициализации
  • высокой нагрузке на парсинг JSON
  • увеличенному потреблению памяти

Оптимизация включает:

  • загрузку только необходимых локалей
  • разделение CLDR по регионам
  • кеширование уже загруженных данных

Изоляция полифиллов

Чтобы избежать конфликтов между библиотеками, полифиллы подключаются в изолированном слое:

import "core-js/stable";
import "regenerator-runtime/runtime";
import "intl";

Важно избегать повторного подключения одинаковых полифиллов, так как это может приводить к:

  • увеличению размера бандла
  • конфликтам глобальных объектов
  • нестабильной работе Intl

Особенности форматирования чисел и дат

В старых браузерах Globalize может переходить в fallback-режим, где часть логики берётся из полифиллов.

Пример форматирования числа:

const numberFormatter = Globalize.numberFormatter({ maximumFractionDigits: 2 });
numberFormatter(12345.678);

Если Intl.NumberFormat отсутствует, используется внутренний слой, который зависит от CLDR и может быть медленнее.

Аналогично для дат:

const dateFormatter = Globalize.dateFormatter({ datetime: "medium" });
dateFormatter(new Date());

Итоговые технические ограничения legacy-режимов

При поддержке старых браузеров с Globalize проявляются следующие системные ограничения:

  • обязательность ES5+ среды выполнения
  • зависимость от Intl polyfill
  • необходимость полной загрузки CLDR
  • отказ от динамических импортов
  • ограниченная оптимизация bundle splitting
  • повышенные требования к тестированию локализации

Архитектура приложения в таких условиях строится вокруг принципа статической сборки локализационных данных и предсказуемой полифиллированной среды выполнения.

Оглавление