Мы собираемся поговорить о новом веб-пакере Rails 6, настроенном для Javascript, и о том, как использовать его с CSS.
Давайте просто назовем наше приложение так:
% rails new tailwind
Мы собираемся настроить попутный ветер CSS и использовать для этого последнюю версию 1.0, но когда вы настроите приложение rails 6, у вас больше не будет вашего JavaScript в конвейере ресурсов, это довольно большое изменение, и вы Вероятно, придется работать через процесс обновления до rails 6, так что это одна из вещей, которая является для нас большим преимуществом, потому что конвейер активов не был чем-то, где мы могли бы легко использовать модули узлов или современные инструменты JS как веб-пакет, поэтому, перейдя к веб-пакеру, мы используем веб-пакет, который поддерживает практически каждая современная библиотека JS, мы можем использовать пряжу для установки этих библиотек JS, а затем загружать их через веб-пакет, и это значительно упрощает все, поэтому Я хочу поговорить о веб-пакере, установленном внутри вашего нового приложения rails, и поэтому, если мы зайдем в наше приложение rails
% cd tailwind
Есть также несколько других вещей, которые у нас теперь есть в нашем пакете JSON, в нем перечислены все библиотеки JS, которые будет использовать наше приложение.
Здесь мы будем использовать команду yarn, вам нужно установить yarn отдельно, чтобы управлять этим, и она очень похожа на упаковщик и ваши файлы gem, так что это вроде как ваш файл gem для JS, поэтому здесь мы видим, что у нас есть Рельсы шесть альфа-библиотек и JS-библиотек для экшн-кабеля, активного хранилища и рельсов UJS, а также библиотека веб-упаковщика здесь и последняя версия турбо-ссылок.
Итак, это все, что раньше было драгоценными камнями или встроено в рельсы, и все они были в вашем файле application.js в конвейере ресурсов, теперь он будет другим и будет находиться в папке JS вашего приложения под пакетами:
Итак, что вам нужно сделать, это в конечном итоге переместить весь ваш JS из application.js в конвейере ресурсов в папку javascript приложения веб-упаковщика, чтобы вы могли видеть, что это настройка по умолчанию прямо сейчас для рельсов 6, так что это собираются включать библиотеку UJS rails, турбо-ссылки, активное хранилище и каналы, поэтому каждый из них будет загружать библиотеку и вызывать функцию запуска, которую они реализуют, просто для того, чтобы в основном связать все за кулисами для нас. Затем, когда мы импортируем эту папку каналов, она переходит к импорту index.js, который затем проходит и смотрит, где все файлы подчеркивания channel.js
Поэтому, когда вы генерируете или создаете какой-либо кабель действия Chanel, вы можете поместить его в эту папку, и он автоматически загрузит все они для вас, если мы сделаем что-то вроде:
% rails webpacker:install:stimulus
Это изменит конфигурацию нашего веб-пакета для загрузки нашего стимула JS, и вы можете видеть здесь, что он добавил некоторые вещи в наше приложение. Js создал пару папок, и он собирается установить зависимости стимулов и все это в нашем новом пакет JSON, поэтому вы увидите, что сюда добавлен стимул:
Теперь, когда у нас есть наша папка контроллеров для контроллеров стимулов, а наш application.js теперь импортирует для контроллеров:
Это очень похоже на require, есть несколько отличий, которые вы можете прочитать, но именно это будет загружать стимул время от времени, а затем делать тот же контекст require и просто искать _controller или файлы в этой папке, поэтому обычно это будет продолжайте и возьмите свой hello controller.js, который просто поместит его на страницу, если вы определите этот контроллер
Итак, если вы хотите обновить свое приложение с 5 рельсами до рельсов 6 и переместить весь свой JS в веб-упаковщик, это будет немного процесс, но материал рельсов по умолчанию довольно прост, чтобы пойти и добавить, вы собираетесь добавьте эти библиотеки в свой package.json с помощью yarn, а затем вы собираетесь добавить свои строки JS прямо здесь, и, к счастью, это очень просто, вам не так много нужно делать, и вы можете добавить свой index.js и своего потребителя .js, если вы хотите, чтобы самый простой способ развить все эти вещи - это взять новое приложение rails и сформировать rails 6, а затем просто скопировать эти файлы и просто взять его из приложения rails 6 и поместить его. прямо в приложение rails 5, чтобы упростить обновление.
Ссылки:
Https://gorails.com/episodes/webpacker-javascript-in-rails-6
