От вводящих в заблуждение вызовов importmap до ненавязчивого использования JavaScript на ограниченном количестве страниц ⇐ Javascript

[Anonymous]

Приложение Rails использует библиотеку zxing для обработки штрих-/QR-кодов.

Многие попытки использовать карты импорта не увенчались успехом. Альтернативой была встроенная вставка вызовов JavaScript.
Только недавно эта проблема указала на вводящее в заблуждение закрепление, происходящее в рельсах, и обходной путь. Я, конечно, не прочь понять, почему закрепление «пути Rails» возвращает контент без зависимостей.
Поскольку библиотека требуется только для нескольких действий, шаблон application.html.erb был дополнен в блоке заголовка.
Поскольку библиотека требуется и используется этот ресурс, в блок заголовка можно было бы вставить следующее файл config/importmap.rb

Код: Выделить всё

pin "@zxing/library", to: "https://ga.jspm.io/npm:@zxing/library@0.21.3/esm/index.js"
pin "ts-custom-error", to: "https://ga.jspm.io/npm:ts-custom-error@3.3.1/dist/custom-error.mjs"

но по субъективным предпочтениям файлы были загружены, сохранены в папке app/javascript и указаны в importmap.rb как

Код: Выделить всё

pin "@zxing/library", to: "zxing-lib.js"
pin "ts-custom-error", to: "zxing-custom-error.mjs"

Таким образом на нужной странице:

Код: Выделить всё

и в заголовке теперь отображается вызов файлов с их дайджестом

Код: Выделить всё

"@zxing/library": "/assets/zxing-lib-21d28ab0efbcdf2c5f0df70627a218b16467422cb510392a5a21e36e1b3b83cf.js",
"ts-custom-error": "/assets/zxing-custom-error-7e5249967291286065fb0396a35fd4480cb47d5b7bbaa5f4eb50b765fd3c456c.js",

Исходный встроенный вызов скрипта

Код: Выделить всё

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

Код: Выделить всё

window.addEventListener('turbo:load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader()
console.log('ZXing code reader initialized')
codeReader.listVideoInputDevices()
.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));
fetch("table_scan", {
method: "post",
format: "turbo_stream",
body: formData,
headers: {
"X-CSRF-Token": document.querySelector("[name='csrf-token']").content,
// set Accept header to issue a proper TURBO_STREAM request
"Accept": "text/vnd.turbo-stream.html"
}
})
.then(response => response.text())
.then(text => Turbo.renderStreamMessage(text));
codeReader.reset();
}
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)
})
})

Но библиотека, по-видимому, не загружается, поскольку консоль браузера связывает зависание. Uncaught ReferenceError: ZXing не определен ссылается на строку const codeReader = new ZXing.BrowserMultiFormatReader().

При возврате importmap.rb в библиотеку, на которую ссылается ga.jspm.io, сканер запускается (консоль регистрирует сообщение «Начало» непрерывное декодирование с камеры с идентификатором ') Он считывает QR-код, как и ожидалось. Хотя он не регистрирует «Инициализировано устройство чтения кода ZXing», он отправляет данные для обработки как зарегистрированные

Код: Выделить всё

Processing by PartisController#table_scan as TURBO_STREAM
Parameters: {"code_json_data"=>"{\"code_data\":\"

Что не так со ссылкой importmap.rb на локальный файл?

И как второй скрипт можно было интегрировать в качестве контроллера стимулов и сделать ненавязчивым?

Подробнее здесь: https://stackoverflow.com/questions/798 ... icted-amou