Как организовывать работу с JS файлами, как объединить все файлы и минифицировать?
Как организовать работу с JS файлами?
Допустим сайт состоит из нескольких страниц. На каждой странице есть свой JS код.
Как собрать весь код со всех страниц в один файл и подключать ко всем страницам один, единый файл.
Как правильно это сделать чтобы не было конфликтов и ошибок, что не найден тот или иной элемент на странице?
Не подключать же к каждой странице отдельно разные файлы с JavaScript кодом?
Как я понял, в итоге все файлы собираются в один и минифицируются.
Вопрос - Как это сделать?
Стоит использовать сборщик. В вашем случае проще всего установить Gulp и плагин к нему gulp-uglify.
Если хотите внутри своих скриптов использовать функцию required и динамически подключать нужные файлы в нужных частях страницы, тогда рекомендую использовать сборщик webpack. Вот пример работы - youtube
Александр Козак Ну gulp я использовал, собрал все файлы, минифицировал, получился один файл со всем минифицированным кодом.
Но проблема в том, что теперь если подключить этот файл ко всем страницам, то будут выскакивать ошибки, что тот или иной файл на той то странице не найден.
Как быть? Как вообще принято организовывать работу с js кодом? Для каждой страницы сайта же не нужно подключать разные файлы? Или так и делают?
Александр Козак: Ну у меня на одной странице находится форма, на другой стоит список.
на первой странице я работаю с элементами формы, т.е есть инструкции типо document.querySelector("input"), на другой с элементами списка, типо document.querySelector(".list").
И так вот, я хочу чтобы к этим двум страницам подключался один и тот же файл JS.
Я объединил весь код в один файл, но при запуске страницы, например второй, выскакивает ошибка, типо например элемент формы не найден, так как форма на первой странице, а на второй ее нет, а файл JS один для все страниц.
В качестве первой точки входа у вас будет главный скрипт для формы и все его зависимости (на пример jQuery). В качестве второй - скрипты для списка и его зависимости.
На выходе получите два РАЗНЫХ сжатых файла в каждом из которых будет только то, что необходимо на данной странице. Ну и на каждой странице подключить необходимый.
Александр Козак: Вот у меня так и вышло, так работает все нормально.
Получается что к каждой странице нужно подключать свой файл JS?
Не делают так что для всех страниц единый файл?
Просто я хотел подключить ко всем страницам один и тот же файл и работать в нем, а не писать код для каждой страницы в отдельном файле.
evg_: Писать весь код в одном файле - плохо. Вам же потом хуже будет.
Используя webpack вы наоборот можете дробить свой код на куда более мелкие части. webpack сам потом их скомбинирует и подключит на каждую страницу то, что ей нужно.
Предположим у вас есть 3 функции:
1. StorageSet
2. StorageGet
3. StorageChanged
Первая нужна для страницы с формой. Вторая на странице с списком. А третья нужна на обоих. Вы можете вынести все три функции в отдельные файлы. И в дальнейшем, если на какой-либо странице та или иная функция вам понадобится вы просто вызываете required('StorageChanged') и всё. webpack включит код этой функции в эту страницу. Если в процесе разработки эта же функция вам понадобилась на иной странице, вы просто снова добавляете required('StorageChanged').
Таким образом вы можете добиться высокой модульности вашего кода. При этом ни одна из страниц не загрузит ни строчки лишнего кода.
Александр Козак: Получается что все таки для каждой страницы сайта нужно подключать свой отдельный файл с JS кодом?
Получается если все руками сделать, без сборщика, получится так,что в один файл я помещаю функцию 1 и 3, а в другой 2 и 3. И потом для первой страницы подключаю свой файл, а для второй свой. так происходит работа?
А если например чрз webpack то он смотрит на зависимости на каждой странице, собирает для каждой свой файл js, минифицирует например и подлючает для каждой странице свой файл? Правильно я понял?
evg_: получается что лучше создать один пхп который будет инклудится во все страницы, а в нем подключение всего того что надо для всех страниц... так понятней?
