Управление CSS и JavaScript
Дата обновления перевода 2023-07-20
Управление CSS и JavaScript
Screencast
Предпочитаете видео-уроки? Посмотрите Webpack Encore screencast series.
Symfony поставляется с библиотекой полностью на JavaScript - называемой Webpack Encore
- которая делает работу с CSS и JavaScript радостью. Вы можете использовать ее, или
что-то другое, или просто создавать статичные файлы CSS и JS files в вашем каталоге public/
и включать их в ваши шаблоны.
Webpack Encore
Webpack Encore - это упрощенный сопсоб интеграции Webpack в ваше приложение. Он становится оберткой для Webpack, предоставляя вам чистый и мощный API для построения модулей JavaScript, предварительной обработки CSS и JS, а также для компиляции и уменьшения ресурсов. Encore предоставляет вам профессиональную систему ресурсов, упоительную в использовании.
Enconre вдохновлена Webpacker и Mix, но создана в духе Webpack: использует его функции, концепты и договорености по именованию для более привычного ощущения. Она стремится исправить большинство распросраненных случаев использования Webpack.
Tip
Encore сделана Symfony и прекрасно работает в приложениях Symfony. Но она также с легкостью может быть использована в любом приложении... На любом языке!
Документация Encore
Справочники
- Использование самозагрузки CSS & JS
- Создание CSS/JS для конкретных страниц
- jQuery и приложения наследования
- Передача информации из Twig в JavaScript
- webpack-dev-server и Hot Module Replacement (HMR)
- Добавление пользовательских загрузчиков и плагинов
- Продвинутая конфигурация Advanced
- Использование Encore в Виртуальной Машине
Компоненты Symfony UX
Дата обновления перевода 2023-01-17
- ux-autocomplete: Преобразование
EntityType
,ChoiceType
или любого элемент<select>
в поле автозаполнения с помощью Ajax (см. демо) - ux-chartjs: Простые графики с Chart.js (см. демо)
- ux-cropperjs: Тип формы и инструменты для обрезания изобажения (см. демо)
- ux-dropzone: Тип формы для стилизованной "зоны сброса" для загрузки файлов (см. демо)
- ux-lazy-image: Оптимизация загрузки изображений с BlurHash (см. демо)
- ux-live-component: Построение динамических интерфейсов без JavaScript (см. демо)
- ux-notify: Отправка нативного уведомления, отправленного сервером, с Mercure (см. демо)
- ux-react: Отображение компонента React из Twig (см. демо)
- ux-swup: Интеграция с Swup (см. демо)
- ux-turbo: Интеграция с Turbo Drive для опыта одностраничного приложения (см. демо)
- ux-twig-component: Построение компонентов Twig с поддержкой PHP-класса (см. демо)
- ux-typed: Интеграция с Typed (см. демо)
- ux-vue: Отображение компонента Vue из Twig (см. демо)
Другие статьи о фронтенде
- AssetMapper: простое и современное управление CSS и JS
- Assetic
- Assetic
- Создайте пакет UX
- Как использовать стратегию пользовательских версий для ресурсов
- Продвинутая конфигурация Webpack
- Конфигурирование Babel
- Использование Bootstrap CSS и JS
- Использование CDN
- Асихнронное разделение кода
- Копирование и ссылание на изображения
- Предпроцессоры CSS: Sass и др. с Webpack Encore
- Добавление пользовательских загрузчиков и плагинов
- Using webpack-dev-server and HMR
- Мспользование webpack-dev-server и HMR
- ЧЗВ и распространенные проблемы
- Документация Webpack Encore
- Установка Encore
- jQuery и приложения наследования
- Создание CSS/JS, присущих странице
- PostCSS и автоматическое добавление префиксов (postcss-loader)
- Подключение React.js
- Передача информации из Twig в JavaScript
- Создание общей распространённой записи
- Encore: Настройка вашего проекта
- Включение карт источников Webpack Encore
- Предотвращение дублирования путем "разделения" общего кода в отдельные файлы
- Подключение TypeScript (ts-loader) с Webpack Encore
- Встраивание изображений и шрифтов в CSS с Webpack Encore
- Версионирование ресурсов с Webpack Encore
- Encore против Assetic?
- Использование Encore на виртуальной машине
- Подключение Vue.js (vue-loader) с Webpack Encore
- Passing Information from Twig to JavaScript
- Инициатипа и пакеты Symfony UX