Когда я переписываю основное приложение Nomcre для обновления до Rails 6, я пытаюсь сделать что-то «The Rails Way», но оно немного изменилось со времен Rails 5.1… до того, как веб-пакет был включен по умолчанию.
Согласно документации, все, что вам нужно сделать, чтобы включить какой-нибудь классный пакет node.js, - это использовать команду yarn add.
пряжа добавить имя_пакета
После jQuery и jQuery UI у меня было ощущение, что он не будет таким прямым, как документация.
С jQuery мне пришлось перепрыгнуть через несколько обручей, установив глобальную переменную:
require («jquery»)
// jquery
import $ from «jquery»;
global. $ = $
global.jQuery = $
В jQuery UI есть дополнительный этап включения css, который должен поставляться в комплекте с jQueryUI.
require ('jquery-ui');
require.context ('file-loader? name = [путь] [имя]. [ext] & context = node_modules / jquery-ui-dist! jquery-ui-dist' , правда, /jquery-ui\.css/);
require.context ('file-loader? name = [путь] [имя]. [ext] & context = node_modules / jquery-ui-dist! jquery-ui-dist', true, /jquery-ui\.theme\.css /);
Это было довольно интересное исправление. Кроме того, я думал, что большинство других пакетов JS не потребуют…, но, конечно, следующий пакет, который я попробовал, натолкнулся на некоторые из тех же проблем. Итак, для моего рассудка, вот краткое изложение того, что происходит, и как я решил это.
В новом приложении Rails 6 я хочу использовать webpacker для объединения необходимых мне ресурсов JS в конвейер.
Проблема:
Использование пряжи не является автоматическим волшебством.
Когда мы даем команде yarn имя пакета для добавления, менеджер пакетов обращается к его репозиторию пакетов и в основном говорит
«Привет, PackageManager, ты знаешь, где я могу найти этот пакет?»
Если вы это сделаете, назовите мне URL-адрес репо для загрузки, и я возьму его.
Если нет… ¯ \ _ (ツ) _ / ¯ ”
Если диспетчер пакетов действительно находит пакет, он загружает всю ветку репозитория в вашу локальную папку.
my_app_name / node_modules / package_name
иначе:
nomcre / node_modules / jquery-шаги
Затем вы переходите к своему файлу регистрации пакета javascript по адресу
мое_имя_приложения / приложение / javascripts / packs / application.js
и вы добавляете имя js-пакета, который хотите включить в свое приложение Rails
требовать («jquery-steps»);
И вы ожидаете, что сможете начать писать JS между тегами
‹script› ‹/script›
, которые вызывают методы из jquery-steps.
Но когда я перезагружаю страницу, это занимает секунду или две, поскольку webpacker пытается скомпилировать файлы JS, за исключением того, что вы получите ошибку, которая в основном гласит:
«Уоу, уоу, уоу, я понятия не имею, о чем ты говоришь. WTF - это jquery-steps? »
Решение:
Когда мы добавляем пакет с помощью пряжи, нет гарантии, что в пакете будет какой-либо конкретный макет папки. Кроме того, нельзя сказать, использовали ли разработчики дефисы (-) или точки (.) В имени файла.
Поэтому нам просто нужно убедиться, что, когда нам требуется js-файл из нашего файла application.js, этот веб-пакетер знает, где находится фактический файл распространения в папке загруженного пакета.
Когда я открыл папку node_modules и прокрутил ее до jquery-steps, я заметил, что в корне папки пакета нет файлов .js. В этом случае структура файлов была:
node_modules / jquery-шаги / сборка / jquery.steps.js
Поэтому вам просто нужно вернуться к вашему файлу application.js и обновить путь к файлу, который webpacker будет использовать для поиска библиотеки. Используя в качестве примера jquery-steps, требуемый вызов изменяется с
требовать («jquery-steps»);
to
требуется (‘jquery-steps / build / jquery.steps.js’);
БУМ! Перезагрузите страницу, посмотрите, как ваш webpacker скомпилирует сборку, и все получится!
Но что тогда произойдет, если вы захотите использовать стиль по умолчанию? Что ж, правильный путь - это другой пост. Но самый простой способ - перейти в пакет (в папке node_modules), найти их файлы CSS и скопировать / вставить содержимое в одну из таблиц стилей в вашем app / assets / таблицы стилей.
Теперь вы можете с легкостью использовать все волшебные пакеты JS. Я надеюсь, что это поможет кому-то другому… даже если я просто пытаюсь вспомнить, что я сделал 😊.
