Обновление App
С некоторых пор я плотно переехал на Webpack, так что решил обновить и свою заготовку для создания сайтов App.
Точкой входа во frontend приложение служит _build/assets/js/index.js, там вот такой код:
В чём прикол, по сравнению с Gulp? Ну в том, что нам нужна только эта точка входа для работы, в которой импортируются и скрипты и стили. А дальше Webpack уже сам всё разбирает:
— берёт указанные скрипты, проходит по ним, находит зависимости и тащит с собой
— затем проходит по стилям, обрабатывает пути к файлам и тащит импорты
— копирует и минифицирует изображения
— скрипты, стили, шрифты и картинки раскладываются в соответствующие директории
— а конечные директории перед этим очищаются от старых файлов
— имена файлов называются с припиской их хэша из 8 символов, для грамотного кэширования
— за всё это отвечает единый конфиг и при добавлении новых библиотек в нём ничего менять не нужно, просто импортировать их в index.js
В итоге получается вот такая картина в assets:
Так как имена файлов меняются, генерируется еще и специальный манифест с их именами:
Дальше дело техники получить его в плагине на OnBeforeRegisterClientScripts и подключить скрипты со стилями на страницу:
Больше про версии ассетов думать не нужно. Просто вызывайте npm run build перед сборкой и установкой App. Понятное дело, есть и npm run watch для разработки.
Как видите, автоматически грузится и шрифт FontAwesome который обработан через импорт в scss и скопирован в директорию fonts.
Помимо автоматизации вы можете использовать и все прелести ECMAScript 6, конечно. Можно подключать хоть Vue, хоть React, хоть чёрта лысого.
Всем приятной разработки!
Точкой входа во frontend приложение служит _build/assets/js/index.js, там вот такой код:
import 'jquery'
import 'bootstrap'
import '../scss/index.scss'
console.log('App is loaded!');В чём прикол, по сравнению с Gulp? Ну в том, что нам нужна только эта точка входа для работы, в которой импортируются и скрипты и стили. А дальше Webpack уже сам всё разбирает:
— берёт указанные скрипты, проходит по ним, находит зависимости и тащит с собой
— затем проходит по стилям, обрабатывает пути к файлам и тащит импорты
— копирует и минифицирует изображения
— скрипты, стили, шрифты и картинки раскладываются в соответствующие директории
— а конечные директории перед этим очищаются от старых файлов
— имена файлов называются с припиской их хэша из 8 символов, для грамотного кэширования
— за всё это отвечает единый конфиг и при добавлении новых библиотек в нём ничего менять не нужно, просто импортировать их в index.js
В итоге получается вот такая картина в assets:
Так как имена файлов меняются, генерируется еще и специальный манифест с их именами:
{
"bootstrap.js": "/assets/components/app/js/bootstrap.7ee522b0.min.js",
...
"fonts/fa-solid-900.woff": "/assets/components/app/fonts/fa-solid-900.0be94a07.woff",
"fonts/fa-solid-900.woff2": "/assets/components/app/fonts/fa-solid-900.64b3e814.woff2",
"jquery.js": "/assets/components/app/js/jquery.a93a223a.min.js",
"main.css": "/assets/components/app/css/main.628a6812.min.css",
"main.js": "/assets/components/app/js/main.41054e11.min.js",
"popper.js.js": "/assets/components/app/js/popper.js.103f3354.min.js"
}Дальше дело техники получить его в плагине на OnBeforeRegisterClientScripts и подключить скрипты со стилями на страницу:
$manifest = MODX_ASSETS_PATH . 'components/app/manifest.json';
if (file_exists($manifest)) {
$files = json_decode(file_get_contents($manifest), true);
foreach ($files as $file) {
if (strpos($file, '.css')) {
$modx->regClientCSS($file);
} elseif (strpos($file, '.js')) {
$modx->regClientScript($file);
}
}
}Больше про версии ассетов думать не нужно. Просто вызывайте npm run build перед сборкой и установкой App. Понятное дело, есть и npm run watch для разработки.
Как видите, автоматически грузится и шрифт FontAwesome который обработан через импорт в scss и скопирован в директорию fonts.
Помимо автоматизации вы можете использовать и все прелести ECMAScript 6, конечно. Можно подключать хоть Vue, хоть React, хоть чёрта лысого.
Всем приятной разработки!
Комментарии: 38
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Пример. Создал я в удобном для меня окружении сайт, всё без админки, по фен-шую! Но, пришёл после меня менеджер, которую эти webpack / gulp совсем ни о чём не говорят, ему надо только шрифт в нескольких местах изменить, да скриптов пару поправить. И для этого ему надо подключаться по ssh, чтобы в терминалы выполнить npm run build? Это неудобно)
Скрипт сборки по умолчанию и так запускает npm run build, но процесс это небыстрый и, как правило, build.php прибивается по таймауту, если запускать его из браузера. А вот при работе в консоли такой проблемы не будет.
Ваш метод хорош, а желание совместить приятное с полезным, чтобы всем было удобно, остаётся.
Самый логичный способ — добавить 1 кнопку для ребилда скриптов, стилей и т.д. Идеально же!
Прямо сейчас представил, как я сдал modstore.pro Витале с Лёней, а они там стили со скриптами в админке правят, чтобы меня не вызывать лишний раз. До слёз!
Рад, что развеселил вас! Не плачьте
А так Василий создал хорошую вещь и она только для программеров и не более.
честно говоря твой посыл в этом сообщении я понял только после 4-5 раза перечитывания :D
Лично меня не радует перекачивать какой-нибудь бандл на много мегабайт при каждой обновке. Именно поэтому всё разбито на файлы с хэшем в имени.
Файл main.XXX.min.css — каждый раз новый, что удобно для кеширования, но не удобно для «истории».
Не успел опробовать, пожалуйста, подскажи:
Реально ли писать имя файла в формате main.min.css?v=XXX, где XXX — contenthash
archive.org/web/ и «Сохраненная копия» поисковиков
Такая же проблема с использованием Minify — каждый раз новые файлы (css и js)
Если есть огромное желание — убери вообще [contenthash:8]. и добавляй версию при подключении файла в плагине.
1) как поставить пакеты из modstore (подгружаю файл providers.php в resolvers и поставщик ставится без проблем), пробую указать такую конструкцию в setup.php, но пакет не ставится:
Что делаю не так?
2) почему то при установке в папке core/components создается папка 0, которая полностью дублирует папку assets/components/app, это так и должно быть?
2) есть такая проблема
2) эту папку можно удалять без каких-либо последствий?
Я так понимаю, что нужно копать в файле webpack.config.js в блоке CleanWebpackPlugin, параметр cleanaftereverybuildpatters? Или ничего не получится и необходимо дополнительно ставить gulp?
в папке /Extras/App/core/components/app/model/ в файле app.class.php нужно найти код (101 строка):
на