Как разобраться в работе js сборщиков, транспайлеров etc?
Бывают ситуации, когда сборка приложения рушится из-за какой-то магии и это нужно отлаживать.
Отладка превращается в попытки прописывания console.log внутри падающего кода и анализа данных.
Сказывается нехватка знаний в работе сборщиков, хочется спросить совета умных людей и мб кто-то знает хорошие материалы по теме(или копаться в исходниках?)
интересует устройство работы babel, webpack, различных бойлерплейтов будь то vue-create-app или react-create-app
допустим где найти, как переопределяются пресеты для Бабеля? vue-create-app как делает чтобы для основного приложения использовался один конфиг, а для jest включает другой.
как искать узкие места в скорости сборки и оптимизировать? находил специальные плагины для вебпака
выглядит все как огромное сборище различных инструментов,
нашел классный курс от Ильи Кантора по вебпаку, настроить теперь могу, а объяснить как это работает нет.
Хочется систематизировать знания, чтобы JS перестал быть черной коробкой.
Может подскажите куда копать или с чего начать
Заранее спасибо
Компиляторы\препроцессоры транслируют один код в другой. Сборщики собирают все во едино. Ошибки в написанном вами коде никак не относятся не к первым ни ко вторым. Хотите знать в каком именно месте и по какой причине возникла ошибка - используйте typescript. В 2020 году его только камикадзе не используют.
twoone, поправляюсь, ошибка не в коде, а например при установке новой зависимости.
с тем что "Компиляторы\препроцессоры транслируют один код в другой. Сборщики собирают все во едино." не поспоришь, но хотелось бы углубиться в эту тему, как они это делают? как строят деревья зависимостей? почему именно так?
Причин краша самих сборщиков не так много.
Чаще всего, это несовместимость версий используемых пакетов. Например, третий галп ни в какую не хочет запускаться под четырнадцатой нодой. Выход - обновиться до четвертого галпа или откатить ноду на компе до 8 (или 12, не помню уже).
Node-sass иногда вываливается с ошибкой несовместимости бинарника. Просто пересобираем бинарник.
Вчера отвалился vue-cli (давно не использовал). Я даже выяснять не стал, почему, просто выполнил npm i -g @vue/cli и все заработало. Опять же что-то там с версиями было.
Ну и т.д.
А информация о настройке пакетов всегда доступна на их официальных сайтах или в репозиториях на гитхабе. Тут достаточно просто уметь читать.
Никита Смирнов, я считаю, что да. Разбираться во всем если не невозможно, то очень сложно. Лучше сосредоточить усилия на прикладной части (вам за нее деньги платят =)), а "разбираться в инструментах" оставить разработчикам этих инструментов.
Любителям аналогий:
Когда я езжу на машине, я не вникаю, как она работает. Есть только минимум школьных знаний о принципах работы ДВС =)) Но это же не мешает ездить?
Сергей delphinpro, согласен, но это немного разочаровывает, в итоге достаточно прочитать документацию, поискать в гугле и в крайнем случае создать issue авторам проекта, а для всяких ускорений вбить в Гугл "топ 10 способов ускорить webpack" и если способы не подходят, то вряд ли я придумаю что-то принципиально новое, спасибо) тогда лучше пойду читать книжки Роберта Мартина
