Import JS, --download и pin_all_from в Importmap Rails

Importmap в Rails упрощает работу со сторонними JavaScript библиотеками. В этом посте покажу, как интегрировать библиотеки в ваш проект с помощью Importmap, используя pin, флаг --download и метод pin_all_from.

Добавление JavaScript файлов:

Например файл app/javascript/util.js

export function greet(name) { return `Hello ${name}`; }

Импортируйте его в app/javascript/application.js:

import "util";

При перезагрузке браузера может возникнуть ошибка, так как util ещё не добавлен в importmap. Добавьте его в config/importmap.rb:

pin "util", preload: true

Для добавления библиотеки в Importmap, используйте команду pin, указывая URL к модулю. Например, чтобы добавить библиотеку underscore, выполните следующую команду:

$ ./bin/importmap pin underscore

Это добавит запись в ваш config/importmap.rb, указывающую, откуда загружать библиотеку:

pin "underscore", to: "https://ga.jspm.io/npm:underscore@1.13.2/modules/index-all.js"

Использование Флага --download

Если вы хотите загрузить файлы библиотеки непосредственно на ваш сервер, а не использовать CDN, можно использовать флаг --download. Это позволит вам загрузить основной файл модуля на локальный сервер:

./bin/importmap pin underscore --download

Добавление всех модулей из каталога с помощью pin_all_from

Для упрощения работы с множеством JavaScript модулей используйте метод pin_all_from. Он позволяет автоматически добавлять все модули из указанного каталога в Importmap, что удобно при работе с большими проектами.

Например, чтобы добавить все модули из каталога app/javascript, обновите ваш config/importmap.rb следующим образом:

pin_all_from Rails.root.join("app/javascript"), preload: true