SignaturePad未定义 – 无法将signature_pad模块初始化为脚本

我有一个问题使用npm模块 – signature_pad，似乎无法得到它的设置。 目前我所使用的是香草HTML，CSS和JS。 目前我不断收到一个错误： SignaturePad is not defined 。 我试图从我的package.JSON文件import SignaturePad from 'signature_pad'模块，但我得到一个错误回来说unexpected token import 。

我已经附上了我的HTML和JS代码。 有什么build议么？

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>

解决了。 交换脚本的顺序，使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>
Interesting Posts