ecmascript-6 - 用于 Polymer 3x 的 Web 组件的 Quagga JS

问题描述

创建自定义组件后，在聚合物 1.0 中也是如此。聚合物 3.x 组件出现问题。我遇到错误。我尝试使用抛出不同错误的 npm 包管理器，所以我是用户 Quagga.min.js 并直接从我面临以下问题的聚合物组件导入相同的

未捕获的语法错误：请求的模块“/quagga.min.js”不提供名为“默认”的导出


import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/iron-image/iron-image.js';
import '@polymer/iron-input/iron-input.js';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/app-storage/app-localstorage/app-localstorage-document.js';
import { ERAppServices } from '../service/er-appservices';
import { PolymerElement, html } from '@polymer/polymer';
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
import {
    mixinBehaviors
} from '@polymer/polymer/lib/legacy/class.js';

import { ERPolymerElement } from 'er-polymer/elements/er-polymer-element.js';
import Quagga from '/quagga.min.js';


class BarcodeScanner extends ERPolymerElement{
    static get template() {
        return html`
            <style include="er-theme">
                :host {
                    display: block;
                    padding: 10px;
                }
                video {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
            </style>

            <template>
                <div id="interactive" class="viewport"></div>
            </template> 

        `;
    }



    ready() {
        super.ready();
        ERAppServices.ERLoaders.stopSplash();
    }


    static get properties() {
        return {
            result: {
                type: Object,
                notify: true,
                readOnly: true,
                value: null
              },
              code: {
                type: String,
                notify: true,
                reflectToAttribute: true,
                readOnly: true,
                value: ''
              },
              active: {
                type: Boolean,
                value: true,
                notify: true,
                reflectToAttribute: true
              }
        }
    }

    attached() {
        this._isReady = false;
        var _this = this;

        Quagga.init({
          inputStream : {
            name : "Live",
            type : "LiveStream"
          },
          decoder : {
            readers : ["ean_reader"]
          }
        }, function(err) {
          _this.querySelector('video').className += ' barcode-scanner';

          if (err) {
            console.log(err);
            return;
          }

          if (_this.active) {
            _this._isReady = true;
            Quagga.start();
          }
        });

        Quagga.onDetected(function(result) {
          if (_this.active) {
            _this._setResult(result);
            _this._setCode(result.codeResult.code);
            console.log("=======================Result",result.codeResult)
            _this.fire('recognize', {code: result.codeResult.code, result: result});
          }
        });
      }

      suspend() {
        Quagga.stop();
      }

      resume() {
        Quagga.start();
      }

}
window.customElements.define('barcode-scanner', BarcodeScanner);

标签： ecmascript-6polymer-3.x

ecmascript-6 - 用于 Polymer 3x 的 Web 组件的 Quagga JS

问题描述

解决方案

推荐阅读