打包支持

dist/index.d.ts

@@ -22,10 +22,6 @@ interface ScanConfigOptions {
    * 网页扫码成功提示音是否启用，默认启用
    */
   webScanBeepEnabled?: boolean,
-  /**
-   * BarcodeDetector polyfill 地址，默认使用 jsDelivr CDN
-   */
-  webBarcodeDetectorPolyfillUrl?: string,
   /**
    * 微信JSSDK配置，微信环境才会生效，配置后会自动初始化微信JSSDK
    */

package.json

@@ -16,36 +16,38 @@
     "types"
   ],
   "devDependencies": {
-    "barcode-detector": "^3.0.8",
     "autoprefixer": "^7.2.3",
     "axios": "0.21.1",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.0",
+    "barcode-detector": "^3.0.8",
+    "browserify-cipher": "1.0.1",
     "clean-webpack-plugin": "3.0.0",
     "concurrently": "^3.5.0",
     "cp-webpack-plugin": "^1.0.0",
-    "html-webpack-plugin": "4.5.2",
     "cross-env": "5.2.1",
     "css-loader": "^0.28.4",
     "es6-promise": "4.2.6",
     "exports-loader": "^0.6.4",
     "file-loader": "^0.11.2",
     "file-saver": "^1.3.3",
+    "html-webpack-plugin": "4.5.2",
     "http-server": "0.11.1",
     "imports-loader": "^0.7.1",
     "postcss-loader": "^2.0.6",
+    "quagga": "0.12.1",
     "str-webpack-plugin": "1.0.0",
     "style-loader": "^0.18.2",
+    "terser-webpack-plugin": "1.4.6",
     "uglifyjs-webpack-plugin": "^1.2.2",
     "url-loader": "^0.5.9",
     "vconsole": "3.3.0",
-    "quagga": "0.12.1",
-    "browserify-cipher": "1.0.1",
     "webpack": "^4.12.0",
     "webpack-bundle-analyzer": "3.6.0",
-    "webpack-cli": "^3.3.9"
+    "webpack-cli": "^3.3.9",
+    "zxing-wasm": "3.0.2"
   },
   "repository": {},
   "author": "",

pnpm-lock.yaml

@@ -80,6 +80,9 @@ importers:
       style-loader:
         specifier: ^0.18.2
         version: 0.18.2
+      terser-webpack-plugin:
+        specifier: 1.4.6
+        version: 1.4.6(webpack@4.47.0)
       uglifyjs-webpack-plugin:
         specifier: ^1.2.2
         version: 1.3.0(webpack@4.47.0)
@@ -98,6 +101,9 @@ importers:
       webpack-cli:
         specifier: ^3.3.9
         version: 3.3.12(webpack@4.47.0)
+      zxing-wasm:
+        specifier: 3.0.2
+        version: 3.0.2(@types/emscripten@1.41.5)
 
 packages:
 

src/services/web/index.js

@@ -1,3 +1,4 @@
+import { BarcodeDetector as BarcodeDetectorPonyfill, prepareZXingModule } from "barcode-detector/dist/cjs/index.js";
 import { createUUID } from "../../utils/uuid";
 import { getConfig } from "../config";
 import scanBeepAudio from "../../../res/scan_beep.ogg";
@@ -8,9 +9,9 @@ const scanWeb = {
 }
 
 const DEFAULT_SCAN_BEEP_AUDIO = scanBeepAudio;
-const BARCODE_DETECTOR_POLYFILL_URL = "https://fastly.jsdelivr.net/npm/barcode-detector@3/dist/iife/index.min.js";
+const ZXING_READER_WASM_URL = "./lib/reader.wasm";
 
-let barcodeDetectorPolyfillPromise = null;
+let barcodeDetectorPreparePromise = null;
 
 function removeEl(id) {
   try {
@@ -70,48 +71,32 @@ function getBarcodeDetectorClass() {
   if (typeof BarcodeDetector !== 'undefined') {
     return BarcodeDetector;
   }
-  if (typeof window !== 'undefined'
-    && window.BarcodeDetectionAPI
-    && window.BarcodeDetectionAPI.BarcodeDetector) {
-    return window.BarcodeDetectionAPI.BarcodeDetector;
-  }
-  return null;
+  return BarcodeDetectorPonyfill;
 }
 
-function loadBarcodeDetectorPolyfill() {
-  if (getBarcodeDetectorClass()) {
-    return Promise.resolve(getBarcodeDetectorClass());
+function prepareBarcodeDetector() {
+  const BarcodeDetectorClass = getBarcodeDetectorClass();
+  if (typeof BarcodeDetector !== 'undefined' || !prepareZXingModule) {
+    return Promise.resolve(BarcodeDetectorClass);
   }
-  if (barcodeDetectorPolyfillPromise) {
-    return barcodeDetectorPolyfillPromise;
-  }
-  barcodeDetectorPolyfillPromise = new Promise((resolve, reject) => {
-    if (typeof document === 'undefined') {
-      reject(new Error("BarcodeDetector is not supported"));
-      return;
-    }
-    const scriptUrl = getConfig("webBarcodeDetectorPolyfillUrl") || BARCODE_DETECTOR_POLYFILL_URL;
-    const script = document.createElement("script");
-    script.src = scriptUrl;
-    script.onload = () => {
-      const BarcodeDetectorClass = getBarcodeDetectorClass();
-      if (BarcodeDetectorClass) {
-        resolve(BarcodeDetectorClass);
-      } else {
-        reject(new Error("BarcodeDetector polyfill is not ready"));
+  if (!barcodeDetectorPreparePromise) {
+    prepareZXingModule({
+      overrides: {
+        locateFile: path => {
+          if (path && path.indexOf(".wasm") !== -1) {
+            return ZXING_READER_WASM_URL;
+          }
+          return path;
+        }
       }
-    };
-    script.onerror = reject;
-    document.head.appendChild(script);
-  }).catch(err => {
-    barcodeDetectorPolyfillPromise = null;
-    throw err;
-  });
-  return barcodeDetectorPolyfillPromise;
+    });
+    barcodeDetectorPreparePromise = Promise.resolve(BarcodeDetectorClass);
+  }
+  return barcodeDetectorPreparePromise;
 }
 
 function createBarcodeDetector(scanType) {
-  return loadBarcodeDetectorPolyfill().then(BarcodeDetectorClass => {
+  return prepareBarcodeDetector().then(BarcodeDetectorClass => {
     if (!BarcodeDetectorClass) {
       throw new Error("BarcodeDetector is not supported");
     }

types/index.d.ts

@@ -22,10 +22,6 @@ interface ScanConfigOptions {
    * 网页扫码成功提示音是否启用，默认启用
    */
   webScanBeepEnabled?: boolean,
-  /**
-   * BarcodeDetector polyfill 地址，默认使用 jsDelivr CDN
-   */
-  webBarcodeDetectorPolyfillUrl?: string,
   /**
    * 微信JSSDK配置，微信环境才会生效，配置后会自动初始化微信JSSDK
    */

webpack.base.js

@@ -3,6 +3,7 @@ const rules = require('./webpack.rules.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CpWebpackPlugin = require('cp-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const zxingReaderWasm = require.resolve('zxing-wasm/reader/zxing_reader.wasm');
 
 const output = path.resolve('./dist');
 
@@ -29,6 +30,7 @@ const config = {
         }),
         new CpWebpackPlugin([
             { from: path.resolve('./types'), to: path.resolve('./dist') },
+            { from: zxingReaderWasm, to: path.resolve('./dist/lib/reader.wasm') },
         ])
     ],
     devtool: 'cheap-module-souce-map',

webpack.prod.js

@@ -1,17 +1,22 @@
 const baseConfig = require('./webpack.base.js');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const { EnvWebPackage } = require('./webpack.plugin.js');
 
 module.exports = Object.assign({}, baseConfig, {
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                terserOptions: {
+                    output: {
+                        comments: false
+                    }
+                },
+                extractComments: false
+            })
+        ]
+    },
     plugins: [
         ...baseConfig.plugins,
-        new UglifyJsPlugin({
-            uglifyOptions: {
-                output: {
-                    comments: false
-                }
-            }
-        }),
         new EnvWebPackage({
             entry: baseConfig.entry,
             output: baseConfig.output.path,