Объясните пожалуйста, что значит development среда и production среда в web?

Question

[eldar_web]

Есть вещи, которые ты сходу понимаешь, а есть некоторые, хоть убейся об стенку, не понимаешь.
Вот есть же при разработке такие понятия как development, и production.
То, что я знаю, то это то, что там хранятся разные зависимости, гэмы, плагины.
Сможете объяснить, что значит в development одни гэмы, а в production другие или для чего эти среды?
Хотел бы чтобы вы внятно объяснили как мудрец ребенку, дабы, чтобы понял раз и навсегда.

Answer 1

[amorphine]

За гемы не скажу, но в сборщиках дев сборка - как правило с вотчером, неминифицированная, с сорс мапами. Прод - минифицированная, без сорсмапов.
Потому что при разработке нужна отладочная информация и важна скорость генерации ассетов. На проде это не нужно

Comments

[eldar_web]

Да уж, как будто новичку объяснил седьмой раздел математики.

[amorphine]

eldar_web,
Допустим, твой проект состоит из красиво оформленных модулей из множества JS/TS/SCSS/etc-файлов. Для чего нужен сборщик - он берет все это дело и сжимает в 1-2 обычных js/css файла. Ведь браузер не понимает TypeScript, SCSS и прочее, да и большое количество файлов вредно для скорости загрузки. И этот/эти обычные js/css файлы, именуемые бандлами, ты инклюдишь в html-код своего сайта.
Development окружение: js/css - как правило неминифицированы и/или имеют сорсмапы. Сорсмапы - технология, благодаря которой при отладке или просмотре ресурсов браузер покажет тебе место не в коде исполняемого бандла / css-файла, а в оригинальном файле.
Production сборка - js/css минифицируются и без сорсмапов - пользователям не нужно видеть содержимое оригинальных файлов.
В общем, поменьше теории, побольше практики. Имеется замечательный скринкаст по вебпаку, обязательно посмотри, там по шагам все объясняется.
Все, что я тут написал настолько условно и ситуативно, что не стоит вникать, смотри, как делают остальные.

Answer 2

[Алексей Пустоутов]

gem - файлы это инструкции для сборки проекта