Rails 7 Импорт карты Bootstrap

Question

Итак, я настроил свое приложение для рельсов 7, выполнив следующие действия.

      rails new .

Чтобы добавить загрузчик, я реализовал его с помощью importmap (без веб-упаковщика) следующим образом.

      ./bin/importmap pin bootstrap

который загрузил эти строки (я добавил preload: true)

      pin 'bootstrap', to: https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js', preload: true
pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js', preload: true

затем в моем application.js я добавил

      import "bootstrap"
import "@popperjs/core"

и я смог использовать элемент тоста, выполнив следующие действия

       # toast_controller.js
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'

// Connects to data-controller="toast"
export default class extends Controller {
  connect() {
    const toast = new bootstrap.Toast(this.element, {
      delay: 5000,
      animation: true,
      autohide: true
    })
    toast.show()
  }
}

и это работало хорошо, но я начал сталкиваться с проблемами с начальной загрузкой при попытке использовать всплывающую подсказку в моем меню.

      # layout_controller.js
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'

// Connects to data-controller="toast"
export default class extends Controller {
  connect() {
    [].slice.call(document.querySelectorAll('[data-bs-togle-secondary="tooltip"]'))
      .map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl, {placement: "right"})
      })
  }
}

причина в том, что popperjs использует process.env.NODE_ENVкоторого не существует, так как я не настроил webpacker

поэтому мне пришлось сделать что-то уродливое в моем макете приложения и добавить его вот так

      <script>
  const process = {}
  process.env = {}
  process.env.NODE_ENV = "<%= Rails.env %>"
</script>

Есть ли лучший подход/исправление для такого рода проблем?

Answer 1

На момент написания этого 04.11.2022 на данный момент нет четкого решения, и упомянутый вами подход с определением в процессе const в теге работает, одна проблема заключается в том, что с подходом importmaps + turbolink возникает «Uncaught SyntaxError: переобъявление процесса const".

Вероятно, сейчас лучше всего просто следить за этой веткой https://github.com/rails/importmap-rails/issues/65 , так как эта проблема упоминается там в комментариях. Одно из упомянутых там быстрых исправлений похоже на ваше: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960. С вашим комбинированным решением и решением в комментариях кажется, что на данный момент это работает лучше всего, и нет ошибки повторного объявления.

      <script>window.process = { env: { NODE_ENV: "#{Rails.env}" } }</script>

Если решение этой проблемы представлено либо на стороне importmaps, либо на стороне popperjs, обновите этот комментарий или введите новый ответ.