Webpacker：解决未定义的 gems

如何解决Webpacker：解决未定义的 gems

实现 zxing library 出现了许多 webpacker 配置。 zxing 是通过 yarn add @zxing/library 安装的。
application.js 文件需要该依赖项和一个 src 文件 scan，它被导入并且仅用于一个特定页面；第二个页面将需要一个类似的文件，但对其 CodeParams 进行了修改。

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

import "channels"

require('@client-side-validations/client-side-validations')
require("jquery")
require("@zxing/library")
require("foundation-sites")
require("grapheme-splitter")
 import("src/foundation-datepicker")

 import '../src/scan'

扫描脚本需要通过 gon gem 运行，因为它调用实例变量 gon.selected_section （这可能会被替换为会话变量，从而消除了要求贡）。扫描 scan.js

import { BrowserMultiFormatReader,NotFoundException } from '@zxing/library';

    window.addEventListener('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,section_id:  gon.selected_section
};
formData.append("code_json_data",JSON.stringify(CodeParams));
Rails.ajax({
  url: "barcode_section_update",type: "post",data: formData
  });
              }
              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)
        })
    })

在呈现页面时，控制台返回两个未定义的错误：
1 Uncaught ReferenceError: ZXing is not defined 调试器指出 zxing 已加载，扫描文件也是如此

 __webpack_require__(/*! @zxing/library */ "./node_modules/@zxing/library/esm/index.js"); 
[...]
/***/ "./app/javascript/src/scan.js": 
[...]
window.addEventListener('load',function () {
  var selectedDeviceId;
  var codeReader = new ZXing.BrowserMultiFormatReader();

抱怨最后一行，也就是js文件的第四行。

2 如果我在控制台中查询 gon.selected_section 或只是 gon，控制台再次抱怨缺乏定义

Uncaught ReferenceError: gon is not defined

如何正确定义这两个元素？有没有一种轻量级的方法可以在每页的基础上调用脚本？