Инкрементная разработка функций javascript для Rails 7 и importmaps

Question

Есть несколько библиотек, которые находятся в центре внимания тестов Rails 7 (например, zxing, flatpickr). Но пара вопросов требует ясности, чтобы установить порядок работы.

Маршрут importmap является предпочтительным маршрутом.
Однако документация, кажется, указывает (исключительно?) на процесс закрепления с двумя вариантами: выбор cdn и --downloadвозможность обслуживать версию локально. Но что, если у вас уже есть файл js для работы — можно ли его интегрировать в поток?

Точно так же, как следует обрабатывать встроенный javascript - с точки зрения процесса я считаю предпочтительным сначала начать со встроенных блоков, прежде чем перемещать их в контроллер (если это вообще необходимо). Можно ли это сделать и нужны ли какие-либо декларации?

пример скрипта, используемый встроенный (по общему признанию, с синтаксисом jquery), где раздел «адаптированный» относится к formData который может быть вызван только на одной или двух страницах.

      <script>
window.addEventListener('turbo:load', function () {
  let selectedDeviceId;
  const codeReader = new ZXing.BrowserMultiFormatReader()
  console.log('ZXing code reader initialized')
  codeReader.getVideoInputDevices()
    .then((videoInputDevices) => {
      const sourceSelect = document.getElementById('sourceSelect')
      selectedDeviceId = videoInputDevices[0].deviceId
      if (videoInputDevices.length >= 1) {
        videoInputDevices.forEach((element) => {
          const sourceOption = document.createElement('option')
          sourceOption.text = element.label
          sourceOption.value = element.deviceId
          sourceSelect.appendChild(sourceOption)
        })

        sourceSelect.onchange = () => {
          selectedDeviceId = sourceSelect.value;
        };

        const sourceSelectPanel = document.getElementById('sourceSelectPanel')
        sourceSelectPanel.style.display = 'block'
      }

      document.getElementById('startButton').addEventListener('click', () => {
        codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
          if (result) {
            console.log(result)
            document.getElementById('result').textContent = result.text
let formData = new FormData();
let CodeParams = {
  code_data: result.text
};
formData.append("code_json_data", JSON.stringify(CodeParams));
$.ajax({
  url: "barcode_section_update",
  type: "post",
  data: formData,
  processData: false,
  contentType: false
  });
          }
          if (err && !(err instanceof ZXing.NotFoundException)) {
            console.error(err)
            document.getElementById('result').textContent = err
          }
        })
        console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
      })

      document.getElementById('resetButton').addEventListener('click', () => {
        codeReader.reset()
        document.getElementById('result').textContent = '';
        console.log('Reset.')
      })

    })
    .catch((err) => {
      console.error(err)
    })
})

</script>