Rails 7 Import Maps — как мне вставить скрипт в HTML-шаблон?

Question

В rails 6 с webpacker вы можете добавить <%= javascript_pack_tag 'alerts' %> в представлении или шаблоне для внедрения некоторых js.

Как это работает с картами импорта и рельсами 7?

Answer 1

Пока код правильно указан в карте импорта, вы можете сослаться на него с помощью:

      <script type="module">import "/assets/custom/alerts.js";</script>

Предполагая, что файл app/javascript/custom/alerts.js

Упоминается в config/importmap.rbв качестве:

      pin_all_from "app/javascript/custom", under: "custom"

И импортируем в application.js:

      import "custom/alerts"

---

Редактировать: теперь я думаю, что это антипаттерн в Rails 7. Вместо этого очень легко использовать контроллеры Stimulus.

Справочник по стимулам Для справки

Например, чтобы отклонить оповещение, когда пользователь нажимает «x».

      // app/javascript/alerts_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    dismiss () {
        this.element.style.display = 'none';
    }
}

      <div data-controller="alerts">
    <h2> Alert! </h2>
    <span data-action="click->alerts#dismiss"><i class="fas fa-times"></i></span>
</div>