2017-04-23 59 views
1

我遇到了使用npm模块 - signature_pad的问题,似乎无法设置它。目前我使用的都是香草HTML,CSS和JS。此刻,我不断收到错误消息:SignaturePad is not defined。我尝试从我的package.JSON文件使用import SignaturePad from 'signature_pad'导入模块,但是我收到一个错误,说unexpected token importSignaturePad未定义 - 无法将signature_pad模块初始化为脚本

我在下面附加了我的HTML和JS代码。有什么建议么?

的JavaScript

var wrapper1 = document.getElementById("signature-pad-1"), 
    canvas1 = wrapper1.querySelector("canvas"), 
    signaturePad1; 

resizeCanvas(canvas1); 
signaturePad1 = new SignaturePad(canvas1); 

function resizeCanvas(canvas) { 
    var ratio = window.devicePixelRatio || 1; 
    canvas.width = canvas.offsetWidth * ratio; 
    canvas.height = canvas.offsetHeight * ratio; 
    canvas.getContext("2d").scale(ratio, ratio); 
} 

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sign Here</title> 
    <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
    <div class="contract"> 
     <h1>Signature Below</h1> 
     <p>ABC</p> 
     <div id="signature-pad-1" class="m-signature-pad"> 
     <div class="m-signature-pad--body"> 
      <canvas></canvas> 
     </div> 
     </div> 
     <script type="text/javascript" src="./js/sig_pad.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script> 
    </body> 
</html> 

回答

1

解决。首先交换脚本的顺序并使其成为signature_pad.min.js脚本来修复它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script> 
    <script type="text/javascript" src="./js/sig_pad.js"></script>