Добро пожаловать в первую из мини-серии коротких статей, в которых я исследую тему, которую недавно затронул, продолжая изучать новые вещи в мире программирования. Я разработчик-самоучка; до сих пор я специализировался на фронтенд-инжиниринге, хотя меня интересует и бэкэнд. У меня есть профессиональный опыт в области визуализации данных и отчетности, и я также могу немного написать об этих областях. Надеюсь, что эти краткие обзоры помогут мне не только понять, что я узнал, но и другим учащимся.
Недавно мне задали вопрос, работают ли мои веб-проекты в Internet Explorer 11. Когда я разрабатывал проекты, я тестировал их в современных браузерах, таких как Firefox, Chrome и Edge. Итак, как бы они повели себя в старом IE11? Ответ, к моему разочарованию, в целом был не очень хорошим. Один из моих проектов React, который работает путем получения данных с сервера при загрузке страницы, вообще ничего не отображал, кроме названия приложения. Другие проекты, такие как моя игра в крестики-нолики и мой калькулятор, не имели никакой интерактивности. Некоторые проекты действительно работали, но их было меньшинство. Итак, что было причиной проблемы и как я мог ее исправить?
Причиной проблемы был код JavaScript, который я написал. Дополнения и расширения для языка JavaScript выпускаются довольно регулярно, а это значит, что он со временем развивается. Однако старые браузеры, такие как IE11, могут не поддерживать эти новые функции. Например, в двух своих проектах я использовал метод Array.from(), который был добавлен в JavaScript в спецификации ECMAScript 2015 (также известной как ES6). Современные браузеры поддерживают этот метод, а IE11 нет, что приводило к ошибке при попытке браузера запустить мой код.
Решение проблемы предлагает популярный инструмент Babel. Babel — это компилятор JavaScript, который позволяет нам пользоваться преимуществами и удобством написания современного кода JavaScript, поддерживая при этом старые браузеры. Он работает, беря файл, содержащий наш код JavaScript, в качестве входных данных и выводя новый файл, в котором любые функции, не поддерживаемые старыми браузерами, преобразуются в код, который они поддерживают. Фактическая функциональность кода, то есть то, что он делает при запуске, не меняется. Преобразование может принимать форму преобразования синтаксиса. Распространенным примером этого является замена ключевых слов ES6 let и const на var при объявлении переменных.
Таким образом
const name = ‘John’; let age = 36;
становится
var name = ‘John’; var age = 36;
Теперь код будет работать, даже если браузер не поддерживает let и const. Преобразование также может включать добавление кода, который воспроизводит функции, недоступные в старых браузерах. Это называется полифилинг и возвращает нас к моей попытке использовать Array.from(). Чтобы обеспечить функциональность этого метода в IE11, Babel может добавить в мой скрипт полифилл. Вот как я смог заставить два упомянутых выше проекта работать в IE11.
Babel очень настраиваемый; вы можете выбрать, какие браузеры и версии использовать, и Babel выдаст вывод, который будет поддерживаться ими. Например, вы можете выбрать поддержку IE11, но не любую более старую версию IE, такую как 10 или 9. Решение проблемы с моим приложением React состояло в том, чтобы изменить конфигурацию по умолчанию, предоставленную Создать приложение React (которое использует Babel под капот), а также полифилл IE11.
Надеюсь, вам понравилось читать статью! Если у вас есть какие-либо вопросы, предложения или исправления, не стесняйтесь связаться со мной.
Электронная почта: [email protected]
Твиттер: @RossMorran
