В этой статье я собираюсь объяснить вам, как вы можете использовать webpack вместе с фреймворком Symfony для создания живого перезагружаемого веб-приложения с поддержкой SASS и ESNext.
Какая цель?
В конце концов, у вас будет проект Symfony, вы сможете использовать SASS и ESNext и видеть изменения скриптов и стилей прямо в браузере благодаря мощности webpack-dev-server.
Что тебе нужно?
- Базовые знания фреймворка Symfony
- Установщик или композитор Symfony
- PHP установлен на вашем компьютере или на виртуальной машине, на которой он установлен
- NodeJS + npm
1. Создание проекта Symfony
Первый шаг - создать базовый проект Symfony. Я использую версию 2.8. * Symfony, но это руководство, вероятно, будет работать с другими версиями.
Продолжайте и выполните следующую команду, чтобы настроить новый проект.
$ symfony новый демопроект 2.8
2. Настройка webpack
Webpack вместе со своим dev-сервером с нашими файлами скриптов и таблицами стилей. Поскольку мы стремимся использовать SASS для стилизации и ESNext для написания сценариев, необходимо установить довольно много пакетов узлов.
Выполните следующие команды в корневом каталоге вашего проекта, чтобы получить все необходимые пакеты.
$ npm init -y
$ npm i -D webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 sass-loader css-loader style-loader node-sass extract-text-webpack-plugin
После установки этих пакетов нам нужно настроить файлы конфигурации webpack и babel. Так что продолжайте и создайте файлы .babelrc
и webpack.config.babel.js
в корневом каталоге. Конфиги должны выглядеть так:
.babelrc
необходим, чтобы сообщить транспилятору babel, какие модули он должен использовать для преобразования кода в ECMAScript 5.
Примечание
Вы можете добавить больше предустановок, чтобы использовать дополнительные языковые функции, такие как async / await или декораторы. Посетите http://babeljs.io для получения дополнительной информации.
Конфигурация webpack предназначена для использования с webpack 1.x. Поскольку версия 2 webpack находится на грани выпуска, вам следует либо убедиться, что вы установили версию 1.x, либо даже лучше: перенести конфигурацию на 2.x, когда она будет выпущена.
Поскольку было бы слишком много, если бы я объяснил всю конфигурацию, вот некоторые вещи, на которые следует обратить внимание:
- Скрипт точки входа
<project_root>/web/js/index.js
- Объединенные файлы обслуживаются с
<project_root>/web/assets
- Dev-сервер доступен через
http://localhost:9000/
- Таблицы стилей извлекаются из пакета скриптов и размещаются вместе с javascript.
3. Создание скриптов и стилей.
Поскольку наша среда готова, мы можем приступить к созданию файлов сценариев и стилей для нашего приложения.
Сначала создайте таблицу стилей <project_root>/web/scss/main.scss
и поместите в нее несколько основных стилей, например body { background: red; }
Затем создайте файл <project_root>/web/js/index.js
и поместите в него следующее содержимое.
Скрипт загружает только таблицу стилей и выводит базовое информационное сообщение.
Теперь вы можете запустить свой webpack-dev-сервер, набрав webpack-dev-server
в консоли и зайдя на свой dev-сервер на localhost:9000/assets/bundle.js
, чтобы увидеть свой скрипт, или localhost:9000/assets/style.css
, чтобы просмотреть таблицу стилей.
4. Подключение к Symfony
Когда ваш сервер разработки запущен и работает, теперь мы можем использовать обслуживаемые файлы в проекте Symfony.
Первый файл, который вам нужно отредактировать, - это <project_root>/app/config/config.yml
Сделайте так, чтобы он содержал следующие строки, чтобы сообщить Symfony, где искать ресурсы. В нашем случае это будет наш dev-сервер.
framework: templating: assets_base_url: "http://localhost:9000"
Затем откройте <project_root>/app/Resources/views/base.html.twig
, чтобы загрузить скрипты и стили.
В разделе заголовка добавьте таблицу стилей:
<link rel="stylesheet" href="{{ asset('assets/style.css') }}"/>
Файлы сценария должны перейти в конец основного раздела, чтобы загрузить сценарий горячей перезагрузки с webpack-dev-server, а также связанный с ним javascript.
<script src="{{ asset('webpack-dev-server.js') }}"></script> <script src="{{ asset('assets/bundle.js') }}"></script>
Вот и все! Перейдем к самому лучшему.
5. Запуск проекта
Убедитесь, что сервер веб-пакетов запущен, затем запустите свой проект Symfony, набрав php app/console server:run
в консоли.
Ваш сервер должен запуститься и быть доступен в localhost:8000
.
Откройте URL-адрес в своем любимом веб-браузере и откройте консоль. Вы должны увидеть уведомление от webpack о том, что он ожидает изменений, внесенных в скрипты или стили, а также информационное сообщение от консоли, которое сообщает вам, что проект работает.
Внесение любых изменений в файлы js и scss приведет к перестройке webpack и автоматическому обновлению страницы веб-браузером.
Дайте мне знать, если в комментариях ниже есть какие-либо вопросы, и хорошо проводите время в своей новой продуктивной среде!
RH