JS с нуля #40 | Транспирация: Зачем нам Babel и что происходит с кодом под капотом.

Зачем переводить JavaScript с современного языка на «устаревший», как обеспечить поддержку вашего сайта на древних смартфонах и что делает утилита Babel? Разбираем основы компиляции. ⠀ 🔹 В ЭТОМ ВИДЕО: Мы начинаем царапать поверхность продвинутой фронтенд-инфраструктуры. Вы узнаете, как устроен мост между ультрасовременными фишками JavaScript (ES6+) и старыми браузерами, которые отказываются понимать новые стандарты. Без паники: наша цель сегодня — понять глобальный концепт, а не зазубривать конфигурации! ⠀ 🔹 ЧТО ТАКОЕ ТРАНСПИЛЯЦИЯ НА ПАЛЬЦАХ: Транспиляция — это трансформация (перевод) исходного кода из одного синтаксиса в другой на том же уровне абстракции. Вы уже сталкивались с этим, если работали с препроцессором SCSS, который компилируется в обычный CSS. В мире JavaScript эту работу выполняет легендарный инструмент Babel. Он берет ваши современные стрелочные функции, деструктуризацию, модули и переписывает их в старый формат ES5, который поймет даже Internet Explorer. ⠀ 🔹 ПРАКТИКА: НАСТРОЙКА СБОРКИ И ФЛАГ -D: Мы установим Babel в наш проект и разберем важнейшую терминальную утилиту помощи: Флаг -D (--save-dev): Вы узнаете, почему Babel устанавливается как зависимость для разработки (devDependencies). Этот инструмент нужен только нам на компьютере, в итоговый код пользователя он не пойдет. Скрипт автоматизации: В объекте scripts файла package.json мы настроим команду: "build": "babel src -d dist" Мы разберем, как ключ -d (сокращение от --out-dir) заставляет Babel взять файлы из папки src, транспилировать их и автоматически создать выходную папку dist (distribution) с готовым к продакшену кодом. ⠀ 🔹 ЛАЙФХАК С ТЕРМИНАЛОМ: Мы запрограммируем кастомный скрипт "help", запустим команду babel --help и научимся читать официальные справки разработчиков прямо внутри консоли VS Code, чтобы моментально узнавать значение любых флагов и сокращений. ⠀ 🔹 ПОЛЕЗНЫЕ ССЫЛКИ: 🔗 Официальный сайт транспилятора Babel и онлайн-песочница: https://babeljs.io/ ⠀ 🔗 Доступ к полным материалам, коду, Markdown-конспектам и ДЗ курса на Udemy: https://www.udemy.com/course/modern-f... ⠀ 💬 Наше Telegram-сообщество для разработчиков DevHotSpot: https://t.me/devhotspot ⠀ #javascript #транспиляция #babel #packagejson #devdependencies #dist #фронтенд #devhotspot