SignaturePad未定義 - 無法將signature_pad模塊初始化為腳本

Question

我在使用npm模塊時遇到了問題 - signature_pad，似乎無法設置它。 目前我正在使用的是vanilla HTML，CSS和JS。 目前我不斷收到錯誤消息： SignaturePad is not defined 。 我嘗試使用import SignaturePad from 'signature_pad'從我的package.JSON文件import SignaturePad from 'signature_pad'模塊，但是我收到一條錯誤，說明unexpected token import 。

我在下面附上了我的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>

Answer 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>

SignaturePad未定義 - 無法將signature_pad模塊初始化為腳本

問題描述

1 個解決方案

解決方案1
1 已采納 2017-04-24 00:01:10

SignaturePad未定義 - 無法將signature_pad模塊初始化為腳本

問題描述

1 個解決方案

解決方案1 1 已采納 2017-04-24 00:01:10

解決方案1
1 已采納 2017-04-24 00:01:10