Представляем Webpacker

Официальный гем Rails для объединения ресурсов JavaScript с Webpack

В постоянно меняющемся мире JavaScript одна важная вещь, которой не хватало в Rails, - это поддержка надлежащей системы объединения для ресурсов JavaScript, но с Rails 5.1 это изменится с появлением нового Webpacker Жемчужина.

Rails 5.1 поставляется с webpack и yarn через параметр –webpack, а в ближайшее время появится готовая интеграция с React, Angular, vue, elm и другими.

Предпосылки

Настраивать

Перед началом убедитесь, что на вашем компьютере установлены рубин, узел и пряжа. См. Дополнительные сведения в разделе предварительных условий.

Теперь откройте свой терминал и установите гем 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

Вы можете проверить эти ссылки по этой теме,

Https://webpack.js.org/configuration/dev-server/#devserver-hot секс https://webpack.js.org/guides/hmr-react/

Внедряем это в действие

Теперь давайте создадим небольшой модуль 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

Ресурсы