Настраиваем Webpack и разбиваем фронт на модули. Spring Boot REST HD

10.09.2018
Spring Boot Rest Application: настраиваем сборку frontend с помощью WebPack и babel, что позволит использовать в проекте hot code reload и все современные возможности JavaScript, например - разбиение на модули. А также подключить vue-compiler и использовать однофайловые компоненты Vuejs Ссылка на код из видео: https://github.com/drucoder/sarafan/tree/WebPackConfig Перед началом работы необходимо настроить рабочее место и установить на компьютер node js и Yarn. Ссылка на видео по установке Node.js: https://youtu.be/ZNjnM0Fyn4E Ссылка на видео по работе с пакетным менеджером NPM: https://youtu.be/TsM4Mekj_54 Ссылка на сайт с документацией по Yarn: Установка: https://yarnpkg.com/en/docs/install#debian-stable Описание команд: https://yarnpkg.com/en/docs/usage Далее нам необходимо настроить в нашем проекте webpack. Для знакомства с основными возможностями Webpack рекомендую посмотреть следующее видео: https://youtu.be/QyfzMzo9QGs Чтобы сократить затраты по времени и уменьшить количество ошибок, рекомендую ориентроваться на следующие конфигурационные файлы: Зависимости для нашего фронтэнда: https://gist.github.com/drucoder/76929ca18eb3f6890817b5bb678570aa Настройки webpack: https://gist.github.com/drucoder/120659207c2ea2e53fd64e1fbb014dab После настройки webpack необходимо немного изменить контроллер и шаблон index.html: мы отказываемся от явного указания внешних зависимостей, вместо этого будем поставлять необходимые библиотеки в одном файле с нашим исполняемым кодом Для определения режима запуска приложения (режим разработки или релизный код) нам необходимо при старте приложения указать переменную окружения spring.profiles.active=dev, подобно тому, как мы это делали в приложении Sweater: https://youtu.be/wj7j92w2eLw В связи с тем, что frontend приложения разнесён по модулям, нам необходимо переконфигурировать Vue Resource: https://github.com/pagekit/vue-resource ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Твиттер: https://twitter.com/letsCodeDru ➡ Группа Вконтакте: https://vk.com/letscodedru ➡ Канал в Telegram: https://t.me/letsCode_dru ➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw ➡ Сервер в Discord: https://discord.gg/xs6XxSx ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ ➡ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac20956168a91ffeae449c5

Похожие видео