Используйте TypeScript, чтобы перенести свой новый JavaScript в старые браузеры
Недавно я опубликовал краткое руководство по созданию одностраничных приложений с использованием «ванильного» JavaScript-фреймворка:
Он задуман как пародия и имитирует быстрый запуск очень популярного фреймворка. Я не пытаюсь сказать, что все фреймворки плохи, но важно отметить, насколько далеко продвинулась спецификация языка JavaScript. Он иллюстрирует, что возможно без загрузки сторонних фреймворков или сложных процессов сборки.
Я быстро получил комментарий о том, целесообразно ли предполагать, что у клиентов будет последняя версия JavaScript. Ответ: «Это зависит». Большинство потребителей используют новейшие движки, потому что браузеры телефонов и настольных компьютеров обновляются автоматически. Именно корпоративные среды представляют наибольший риск, поскольку в некоторых случаях они могут быть «заблокированы» в более старых версиях браузеров.
Если вы окажетесь в таком затруднительном положении, можно взять современный JavaScript и скомпилировать его для устаревших браузеров. Этот пост проходит через процесс.
Примечание. код как есть использует новый fetch API для загрузки данных из тестовой конечной точки. Как и старый XMLHttpRequest API, это не языковая функция, а функция браузера, доступная для JavaScript. В этом посте рассматривается преобразование современного кода JavaScript в ECMAScript 5, а не обработка различий между браузерами за пределами поддерживаемой версии JavaScript.
Настраивать
Необходимые условия: git и node.js (с npm).
Сначала клонируйте репозиторий.
git clone https://github.com/jeremylikness/VanillaJs.git
Откройте plain\index.html в своем браузере, чтобы убедиться, что он работает. Это современная версия. Создайте новый каталог с именем legacy и скопируйте в него все три файла из plain. Перейдите в свой устаревший каталог.
Инициализировать проект узла.
npm init -y
Установите TypeScript.
npm install typescript --save-dev
Инициализируйте конфигурацию TypeScript.
npx tsc --init
Отредактируйте сгенерированный файл tsconfig.json так, чтобы для свойства strict было установлено значение false. Убедитесь, что target равно es5 (это должно быть значение по умолчанию), чтобы создать устаревший код.
Трансформировать
Далее вы преобразуете JavaScript в TypeScript.
Измените расширение файла с .js на .ts. Если вы используете IDE, например бесплатную кроссплатформенную Visual Studio Code, вы заметите несколько ошибок. Есть две вещи, необходимые для завершения преобразования.
Сначала в конструкторе класса Wrapper добавьте к каждому из параметров ключевое слово public. Это сообщает TypeScript, что они являются допустимыми свойствами в классе. Обновленный конструктор должен выглядеть так:
constructor(public element, public text, public display = true) {
Затем исправьте коллизию между статическими методами generate, переименовав метод на AnchorWrapper в generateAnchor:
static generateAnchor(href, text, target = “_blank”) {
Чтобы использовать недавно переименованный метод, найдите и замените два экземпляра AnchorWrapper.generate на AnchorWrapper.generateAnchor.
Последний шаг — скомпилировать TypeScript в JavaScript.
npx tsc
Вот и все! Вы сможете открыть файл index.html в каталоге legacy и увидеть, что приложение работает успешно. Посмотрите на сгенерированный код app.js, чтобы увидеть, насколько он изменился по сравнению с более ранними версиями JavaScript! Вы можете использовать этот же процесс для преобразования других ваших проектов JavaScript, воспользовавшись тем фактом, что TypeScript является расширенным набором диалектов JavaScript.
С уважением,
