Настройка Webpack
с помощью Rails
Организуйте зависимости своего приложения
и ускорьте работу своей команды.
В Ruby on Rails соглашение по конфигурации является парадигмой. Соглашение об управлении зависимостями JavaScript в Rails - это метакомментарии в файлах манифеста JavaScript. Затем скрипты загружаются с помощью Звездочек.
Хотя это отлично работает для небольших приложений, у более крупных приложений больше зависимостей. Когда список необходимых скриптов становится длиннее, выяснение того, какие файлы зависят друг от друга, становится все труднее. Любая реорганизация, помимо добавления файлов в список, вызывает затруднения, потому что вам нужно выполнить поиск по всей кодовой базе JavaScript, чтобы узнать, где используется скрипт.
Модульный JavaScript
Как нам указать, какие файлы зависят друг от друга? Один из способов - разделить наш JavaScript на модули, которые могут быть загружены с локально указанными зависимостями. Загрузка зависимостей в каждый файл также поддерживает чистоту глобальной области. Есть много инструментов, облегчающих загрузку этого типа скриптов (например, Browserify, RequireJS и webpack), и есть два стиля (CommonJS и AMD) для загрузки модулей.
В Бригаде нам нужен был сборщик модулей JavaScript, который:
- Простая интеграция с Rails
- Разрешить обслуживание некоторого JavaScript через Sprockets
- Поддержка определений модулей CommonJS
Мы обнаружили, что webpack предлагает функции, которые мы искали.
Как работает Webpack?
Подобно тому, как все сценарии перечислены в манифесте JavaScript при использовании Sprockets, все зависимости перечислены в сценарии «точки входа» при использовании webpack. Например, предположим, что мы хотим загрузить скрипт «init.js», который будет отображать представление на странице. Нам потребуется это в сценарии точки входа. Внутри файла «init.js» нам требуется представление JavaScript, которое будет отображаться на странице, а также модель, которая будет передана в представление:
Представление и модель JavaScript, в свою очередь, перечисляют свои собственные зависимости, которые, в свою очередь, могут перечислять больше зависимостей и так далее; это черепахи полностью вниз. Webpack рекурсивно находит все необходимые зависимости и объединяет их в один «пакет», выводя код так, чтобы он был загружен в правильном порядке.
Независимо от того, что для «module.exports» установлено значение в каждом из требуемых файлов, оно будет заключено в анонимную функцию, и эти функции хранятся в массиве в произвольном порядке. Затем, вместо того, чтобы требовать имя файла, на них ссылаются по их индексу в массиве, и содержимое загружается по мере необходимости.
После запуска одного из обратных вызовов он помечается как «загруженный», а его «экспорт» кэшируется для следующего обращения к нему в вашем коде. Вот упрощенный пример того, как работает связанная версия:
Настройка Webpack
Настроить веб-пакет было просто, как запустить
и написать «webpack.config» для вывода javascript в нужном месте. Ниже мы встроили пример файла конфигурации.
Интеграция Webpack с Rails
Поскольку мы используем гибридную систему, в которой используются как Sprockets, так и веб-пакет, наш JavaScript создается и обслуживается в несколько этапов:
- Webpack запускает и компилирует пакет на основе сценариев, необходимых для сценария точки входа.
- Пакет, скомпилированный веб-пакетом, требуется в манифесте JavaScript вместе со всеми скриптами, которые предоставляются непосредственно гемами.
- Rails использует Sprockets для компиляции и обслуживания скриптов, перечисленных в манифесте JavaScript.
Разработка с помощью Webpack
При настройке среды разработки или внесении изменений в наш JavaScript нам необходимо запустить webpack, чтобы сгенерировать связанную версию наших скриптов.
К счастью, webpack имеет« режим наблюдения , в котором он будет постоянно следить за вашими файлами JavaScript и повторно компилировать пакет при обнаружении изменений. Чтобы упростить запуск этого процесса при каждом запуске сервера Rails, мы используем foreman для запуска этих и других соответствующих процессов с помощью одной команды.
Использование загрузчиков с Webpack
При обработке и объединении ваших скриптов webpack также может минимизировать или вносить другие типы изменений в ваш код с помощью загрузчиков.
Любой желающий может написать загрузчик для webpack, потому что он модульный по своей природе. Существуют десятки загрузчиков веб-пакетов, которые добавляют ряд функций, и возможность писать свои собственные загрузчики делает его гибким.
Жизнь в будущем
Один из наших любимых загрузчиков - загрузчик es6, который позволяет нам использовать в нашем коде все виды забавного синтаксиса ECMAScript 6th edition (ES6). ES6 - это последний предложенный стандарт для ECMAScript, который реализован в виде JavaScript в большинстве браузеров и JScript в Internet Explorer. Функции, предложенные в черновике ES6, в настоящее время поддерживаются не всеми браузерами, но наши разработчики любят играть с новейшими игрушками. Функция толстой стрелки - это один из примеров новой функции JavaScript, которую мы начали использовать:
Поскольку он автоматически привязывается к охватывающей области, это помогает нам избежать ошибок, вызванных тем, что мы забыли привязать обратные вызовы к «this». Это также краткое обозначение анонимных функций.
Попался
Мы рассматривали возможность полной замены Sprockets на такой инструмент, как webpack. В нашем случае возникла дополнительная проблема, связанная с использованием некоторых скриптов, которые предоставляются непосредственно гемами. Например, мы используем гем под названием js-routes, который дает нашему JavaScript доступ к помощникам URL Rails. Добавление метакомментария - это способ сделать помощники URL-адресов доступными в нашем JavaScript:
Мы используем несколько драгоценных камней, которые загружают JavaScript таким образом, поэтому мы хотели продолжить загрузку некоторых с помощью Sprockets, а для остальных использовать сборщик модулей.
Выбирай с умом
Принятие технических решений сводится к уравновешиванию набора компромиссов. Стоит провести небольшое исследование и использовать инструмент, наиболее подходящий для вашего проекта.
В прошлом мы использовали Sprockets для загрузки JavaScript, и мы видели, как переход на веб-пакет улучшил организацию нашего приложения и позволяет нам работать быстрее. Я надеюсь, что, поделившись нашей точкой зрения, я помог и вам улучшить вашу систему сборки JavaScript.
Webpack с демо-репозиторием Rails
(Этот раздел добавлен в четверг, 4 сентября.)
Читатель запросил полный пример того, как настроить Ruby on Rails с помощью webpack, поэтому я создал образец репозитория. Надеюсь, это поможет продемонстрировать один из способов сделать это!
