条码生成与扫描页面多个JS错误排查求助

看起来你遇到了前端库加载的典型问题，这些错误都是因为JsBarcode和ZXing这两个工具库没有正确在浏览器环境中被加载到全局对象里，再加上CDN版本选择不对导致了额外的require报错。我来帮你一步步解决：

错误原因分析与修复步骤 #

• Uncaught ReferenceError: require is not defined & Uncaught TypeError: JsBarcode is not a function
  你当前使用的JsBarcode CDN链接指向的是CommonJS模块版本，这种版本是给Node.js环境用的，浏览器不支持require语法，也不会自动把JsBarcode暴露成全局函数。
  解决方法：把JsBarcode的CDN替换成浏览器兼容的UMD版本：

  <!-- 替换原来的JsBarcode引入 -->
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
  

• ReferenceError: ZXing is not defined
  @zxing/browser的默认CDN包没有把ZXing挂载到全局window对象上，导致你的代码找不到这个变量。
  解决方法：替换成专门的浏览器全局版本：

  <!-- 替换原来的ZXing引入 -->
  <script src="https://unpkg.com/@zxing/browser@latest/dist/zxing-browser.min.js"></script>
  

关键注意点 #

一定要确保这两个库的<script>标签放在你自己的业务代码<script>之前，这样浏览器会先加载完工具库，你的代码执行时才能找到对应的全局函数。

修改后的完整头部示例 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barcode Generator and Scanner</title>
    <!-- 修正后的库引入 -->
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://unpkg.com/@zxing/browser@latest/dist/zxing-browser.min.js"></script>
    <style>
        /* 你的样式代码不变 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            margin-bottom: 20px;
        }
        video {
            width: 100%;
            max-width: 400px;
        }
        svg {
            margin: 20px 0;
        }
    </style>
</head>

做完这些修改后，再运行页面，应该就能解决所有你列出的错误了，条码生成和扫描功能应该可以正常工作。

备注：内容来源于stack exchange，提问作者Onion Archives