Webpacker - это тонкая абстракция поверх webpack. Что само по себе является широко используемым инструментом для объединения ресурсов. Он очень настраиваемый, поэтому его можно использовать во многих случаях. Но из-за множества предлагаемых опций он стал печально известен своей неудобной настройкой. Сообщество Rails увидело множество преимуществ, которые оно имеет, но они хотели упростить начало работы, поэтому создали эту абстракцию, которая, в свою очередь, была объединена с самим Rails.
В версии 6.0 Rails по умолчанию использует webpacker для связывания JavaScript. Но его можно использовать для замены звездочек в целом при правильной настройке.
Но зачем нам вообще использовать webpack?
С помощью webpack мы можем хорошо структурировать наш JavaScript. Мы можем использовать современные функции ES20 **, которые передаются с помощью babel, а также мы можем лучше разделять проблемы, потому что у нас наконец-то есть способ запрашивать функции из других файлов.
Самое большое преимущество: мы можем использовать все пакеты из npm и, следовательно, иметь доступ к самому большому месту для обмена (интерфейсными) пакетами в Интернете. Здесь - более подробное исследование самого веб-пакера.
Тогда давайте воспользуемся webpack и воспользуемся новым популярным фреймворком JavaScript!
Итак, давайте посмотрим, как мы можем настроить webpacker для замены звездочек, а также давайте использовать некоторые дополнительные загрузчики webpack¹ и плагины² для использования в нашем приложении Rails!
Webpacker знает, как установить несколько фреймворков JavaScript из коробки. Вы можете установить их так:
rails webpacker:install:<framework>
На сегодняшний день фреймворки могут быть Angular, CoffeeScript, Elm, ERB³, React, Stimulus, Svelte, TypeScript и Vue.
Допустим, вы установили бы реакцию с помощью этой команды, что произойдет?
Rails обновит файл package.json и запустит yarn, чтобы все необходимые пакеты были доступны. Кроме того, он создаст hello_react.jsx файл в каталоге app / javascript / packs. Теперь вы можете включить приложение реакции в свое приложение, поместив this<%= javascript_pack_tag 'hello_react' %> в один из файлов просмотра. Но подождите минутку! Что это за javascript_pack_tag помощник?
Включите файлы в ваши представления из Webpack
Sprockets добавляет помощников javascript_include_tag, stylesheet_link_tag, image_url и asset_url, которые известны каждому разработчику Rails. Аналогичным образом webpacker добавляет похожие помощники, а именно javscript_pack_tag, которые мы уже встречали, а также stylesheet_pack_tag, image_pack_tag и asset_pack_tag.
Короткая экскурсия: точки входа
Важной концепцией веб-пакета являются точки входа. Точка входа - это файл, который является корнем графа зависимостей. Кроме того, каждый файл, который работает как точка входа, создает новый выходной файл. Webpacker неявно знает, какие файлы являются точками входа, и поэтому должен сгенерировать отдельный файл. По соглашению каждый файл в app/javascript/packs каталоге является точкой входа. Что это значит для нас?
Это означает, что мы должны создать каталог src, stylesheets и images в каталоге «javascript». Затем мы можем ссылаться на эти файлы в нашем файле application.js, чтобы они были включены в связанный пакет.
Но если вы хотите создавать пакеты меньшего размера для некоторых страниц, например В качестве целевой страницы вы можете создать файл Landing_page.js в каталоге packs, импортировать все действительно необходимые зависимости, а затем webpacker создаст новый пакет, который вы можете включить с помощью помощника javascript_packt_tag.
Использование Webpacker для CSS
Webpacker также настроен на возможность связывания css. Если вы создаете файл scss, вы можете импортировать его в свой файл application.js с import, и webpack также создаст необходимые файлы css. Или, точнее, он встроит это в JS-файл и автоматически загрузит его. Многие современные JS-фреймворки работают с этим подходом.
Sidenode: Вы можете проверить, какие расширения включены по умолчанию, в файле webpacker.yml. В разделе extensions вы видите все доступные расширения файлов, которые webpacker установил для обработки по умолчанию.
Давайте использовать SCSS прямо сейчас!
После того, как вы создали файл app / javascript / style / app_style.scss, добавьте его в свой application.js: import 'style/app_style'. Теперь перезагрузите страницу, и вы увидите, что css, определенный в вашем файле, применен. (В первый раз по какой-то причине вам может потребоваться перезапустить сервер Rails.)
Статические активы
Webpacker настраивает webpack, чтобы иметь возможность обрабатывать и другие статические ресурсы, такие как изображения или шрифты. Чтобы это работало, вы должны импортировать статические ресурсы в файл application.js. Только после этого вы можете использовать помощник image_pack_tag или asset_pack_tag в ваших представлениях Rails.
Важно: когда вы используете этот тег, вы должны предварять свой путь префиксом «media», потому что это путь, в который webpack будет связывать статические ресурсы.
Итак, в ваших представлениях это будет выглядеть примерно так:
<%= image_pack_tag “media/images/logo.png” %>
Если у вас много файлов для импорта, я бы рекомендовал использовать метод require.context(). При этом вы можете потребовать все файлы в указанном каталоге, и не нужно делать это по отдельности.
Добавление новых плагинов
Как уже упоминалось выше, с помощью webpacker мы можем использовать все функции, разработанные фронтенд-сообществом. Это также означает различные инструменты, которые упрощают разработку, а также некоторые плагины, которые актуальны только при развертывании.
Плагины в webpack - это пакеты, которые добавляют функциональные возможности. Недавно мне понадобился плагин CopyPlugin. Мне пришлось добавить CKEditor 4 в приложение, и для его работы необходимы некоторые исходные файлы в общедоступном каталоге. Вот как можно добавить плагин в webpacker (версия 5):
Вы можете добавить это в любой из файлов config / webpack / {environment, development, production, test} .js. (Поскольку мне нужна была эта функция в каждом отдельном режиме, я поместил ее в environment.js)
Важно: В 6-й версии webpacker это изменится! Скорее всего, это будет выглядеть так:
Добавление дополнительных загрузчиков
Погрузчики трансформаторы. Загрузчик преобразует исходный файл в JavaScript. В Webpacker предварительно настроен загрузчик scss / css. Если вам нужен дополнительный загрузчик, вы можете добавить его следующим образом:
Опять же, это только действительно для webpacker 5!
Вот как это выглядит для webpacker 6:
Итак, это основные вещи, которые вы хотите добавить в webpacker для замены звездочек.
Развертывание
Как мы уже привыкли, webpacker подключается к задаче rake assets:precompile. Так что никаких изменений нет.
Заключение
Как мы видели, webpacker может полностью заменить традиционную основу конвейера ресурсов, хотя у него есть некоторые необработанные края, если вы хотите это сделать. Тем не менее, это очень полезно, чтобы узнать об этом больше, потому что это дает гораздо больше возможностей для вашего интерфейса - что наиболее важно, более простая интеграция с npm! И это огромный импульс, потому что большая часть разработки внешнего интерфейса происходит именно там.
¹ Загрузчики - это жаргон веб-пакетов для трансформеров. Они преобразовывают файлы, с которыми работают, в JavaScript. Загрузчик TypeScript - очень хороший пример. Он компилирует исходный код TypeScript в JavaScript, а затем возвращает код.
² Плагины - это новые функции, которые вы можете добавить в webpack. Он будет выполняться на различных этапах процесса сборки, в зависимости от типа используемого плагина.
³ Это позволяет использовать ERB в ваших файлах JavaScript.
