Представляем Webpacker
Официальный гем Rails для объединения ресурсов JavaScript с Webpack
В постоянно меняющемся мире JavaScript одна важная вещь, которой не хватало в Rails, - это поддержка надлежащей системы объединения для ресурсов JavaScript, но с Rails 5.1 это изменится с появлением нового Webpacker Жемчужина.
Rails 5.1 поставляется с webpack и yarn через параметр –webpack, а в ближайшее время появится готовая интеграция с React, Angular, vue, elm и другими.
Предпосылки
- Ruby 2.2.6+ [https://github.com/rbenv/rbenv]
- Рельсы 5+
- Узел [https://github.com/riywo/ndenv]
- Пряжа [https://yarnpkg.com/lang/en/docs/install/]
- Webpack
- JavaScript
- Git
- Командная строка, также известная как Терминал
Настраивать
Перед началом убедитесь, что на вашем компьютере установлены рубин, узел и пряжа. См. Дополнительные сведения в разделе предварительных условий.
Теперь откройте свой терминал и установите гем rails 5.1, а затем создайте новое приложение rails, например,
// Latest version of rails 5.1+ gem install rails rails new webpacker-example-app --webpack // or this to setup react or angular or vue rails new webpacker-example-app --webpack=react rails new webpacker-example-app --webpack=angular rails new webpacker-example-app --webpack=vue
Обратите внимание на новую изящную опцию webpack, она настроит webpack с Yarn после создания приложения Rails 5.1. После того, как приложение создано и установлен веб-пакет, мы готовы использовать веб-пакет в нашем новом приложении Rails. Вуаля! 🎉
Если у вас есть существующее приложение Rails 4.2+, вы можете установить веб-пакет, добавив его в свой Gemfile и установив его следующим образом:
rails webpacker:install rails webpacker:install:[react, angular or vue] (optional)
Не стесняйтесь проверить проект readme для получения более подробной информации, https://github.com/rails/webpacker
Примечание. Мы также можем настроить React или Angular, если предоставим соответствующие параметры.
Вы можете увидеть список команд, с которыми поставляется webpacker, набрав любую из следующих команд в каталоге вашего приложения:
bundle exec rails webpacker bundle exec rails -T
Конфигурация
Как и все Rails, в webpacker по умолчанию есть определенные соглашения. Давайте посмотрим на них по очереди:
1. Структура папки
Обратите внимание на новую папку app / * javascript. Это папка, которая будет содержать весь код приложения JavaScript и точки входа в веб-пакеты (также известные как пакеты). По умолчанию это app / javascript / packs.
По соглашению все точки входа в веб-пакет должны быть помещены в папку app / * javascript / * packs, а модули могут быть размещены внутри app. / * javascript любым удобным для вас способом. Итак, допустим, мы создаем новое приложение-календарь. Мы можем структурировать его так:
* Примечание. Все параметры настраиваются из config / webpack / paths.yml
По умолчанию примечание, webpacker генерирует application.js внутри файла каталога packs для демонстрационных целей.
2. Конфигурация Webpack
Генератор добавляет конфигурации веб-пакетов для каждой среды в * config / webpack. Эти конфигурации "из коробки" поддерживают многие функции веб-пакетов для различных сред, например код -разбиение, снятие отпечатков пальцев и связывание статических ресурсов, таких как изображения и таблицы стилей (включая post-css).
* Примечание. Все параметры настраиваются из config / webpack / paths.yml
Живая перезагрузка
Webpacker предоставляет binstub для запуска webpack-dev-server, который поддерживает перезагрузку живого кода в среде разработки. Вам потребуется установить дополнительные плагины для Webpack, если вам нужны такие функции, как HMR [Горячая замена модуля]. * Примечание. Параметры сервера разработчика можно настроить в config / webpack / development.server.yml
Вы можете проверить эти ссылки по этой теме,
Внедряем это в действие
Теперь давайте создадим небольшой модуль JavaScript и соберем его все вместе, чтобы посмотреть, как он работает.
1. Настройка
Во-первых, давайте добавим гем мастера для управления несколькими процессами в группе разработки вашего Gemfile и запустим установку пакета. Затем создайте два файла с именами Procfile и Procfile.dev (для разработчиков) в корневой папке .
Procfile
web: bundle exec puma -p $PORT
Procfile.dev
web: bundle exec rails s # watcher: ./bin/webpack-watcher webpacker: ./bin/webpack-dev-server
Кроме того, давайте настроим небольшую binstub, которая запускает Procfile.dev, создадим файл в папке bin / * с именем server и вставим следующие команды:
#!/bin/bash -i bundle install bundle exec foreman start -f Procfile.dev
Вам также может потребоваться выполнить chmod 777 bin / server, если при запуске этого binstub вам будет отказано в разрешении. Итак, теперь мы можем выполнить ./bin/server, и он запустит Procfile.dev и запустит webpack и puma, как задумано.
2. Код
Теперь давайте добавим наш новый пример модуля счетчика, сначала создайте папку модуля с именем counter в папке app / javascript, а затем внутри этой папки создайте два файла: index.js и counter. .js со следующим кодом.
counter.js
index.js
Затем внутри каталога packs создайте входной файл с именем counter.js и заполните его следующим кодом.
Довольно просто!
3. Просмотр
Наконец, для добавления этого счетчика в наше представление давайте сгенерируем контроллер:
bundle exec rails g controller pages index
Затем в файле routes.rb настройте наш корневой маршрут следующим образом:
root ‘pages#index’
..и, наконец, внутри pages / index.html.erb вставьте следующий фрагмент HTML:
<div class=”counter-wrapper”> <h1>Counter</h1> <form class=’counter’> <button id=’increment’>Increment</button> <input type=”number” name=”counter” id=’counter’ value=’0' /> <button id=’decrement’>Decrement</button> </form> </div> <%= javascript_pack_tag ‘counter’ %>
Обратите внимание, помощник javascript_pack_tag извлекает скомпилированный скрипт модуля счетчика и ссылается на него в приложении следующим образом:
<script src=”http://localhost:8080/counter.js"></script>
4. Бег
Откройте текущий каталог в Терминале и запустите:
./bin/server # or bundle exec foreman start -f Procfile.dev
В Терминале вы заметите, что webpack компилирует наш модуль счетчика и отображает соответствующую информацию, такую как размер и т. Д.
Теперь перейдите по адресу http: // localhost: 5000 / в своем браузере, и вы увидите, что приложение счетчика запущено. Ура! 😄
5. Укладка.
Давайте добавим немного стиля нашему модулю счетчика с помощью Sass. Создайте новый style.sass внутри app / javascript / counter / style.sass со следующим кодом:
..и затем, наконец, добавьте его в наш counter / index.js and view:
<%= stylesheet_pack_tag ‘counter’ %>
Теперь вернитесь в браузер и обратите внимание, что новые изменения перезагружаются в реальном времени из-за перезагрузки сервера webpack dev в реальном времени. Удивительный! 👍
<link rel="stylesheet" media="screen" href="http://localhost:8080/counter.css" />
Развертывание
И последнее, но не менее важное: давайте рассмотрим развертывание, в частности развертывание этого приложения в Heroku. Heroku устанавливает yarn и node по умолчанию, если вы развертываете приложение rails с Webpacker. Также замените sqlite gem на pg gem в Gemfile, bundle и зафиксируйте изменения.
Теперь введите git push heroku master из папки вашего приложения, и он должен быть развернут в Heroku. Простой! 😀
Вы можете найти больше примеров в этом репо: https://github.com/gauravtiwari/webpacker-example-app и https://github.com/gauravtiwari/webpacker-react-frontend
Ресурсы
- Webpacker: жемчужина Webpacker
- Webpack 2: официальный сайт Webpack
- Пряжа: менеджер пакетов узлов.
- Демо: https://webpacker-example-app.herokuapp.com/
- Код: https://github.com/gauravtiwari/webpacker-example-app
- Код с тестами: https://github.com/gauravtiwari/webpacker-react-frontend