jquery - Hur man importerar och använder RobinHerbots' Inputmask i Aurelia

Jag försöker använda RobinHerbots Inputmask i Aurelia men verkar inte kunna importera det korrekt.

Jag har stött på folk som diskuterar att använda detta plugin i Aurelia men jag kunde inte hitta specifik dokumentation om hur man gör detta.

Efter npm i inputmask --save är detta vad jag har i min aurelia.json:

{
   "name": "inputmask",
   "path": "../node_modules/inputmask/dist",
   "main": "jquery.inputmask.bundle",
   "deps": [
      "jquery"
      ]
}

I min package.json har jag deklarerat inputmask.

"dependencies": {
//...
"inputmask": "^3.3.11",
//...
}

Jag ser inga fel när jag kör au build. Men när jag importerar med ES6 kan jag inte använda någon av dess egenskaper.

import Inputmask from "inputmask";

attached() {
     let im = new Inputmask('999-99-9999');
     let select = document.getElementById('social-security-number-field');
     im.mask(select);
}

Ger Unhandled promise rejection TypeError: inputmask_1.default är inte en konstruktor och Uncaught TypeError: Kan inte läsa egenskapen 'value' av undefined

Inputmask-fel i konsolen

När jag försöker använda attributet data-inputmask fungerar det inte heller.

<input type="text" class="form-control" id="social-security-number-field" value.bind="ssn" data-inputmask="'mask': '999-99-9999'">

Indata maskeras inte framgångsrikt med data-inputmask

Missar jag något? Jag har bara haft erfarenhet av att importera plugins som uttryckligen är för Aurelia eller som specifikt anger att de kan användas med Aurelia, så jag kan faktiskt missa något viktigt.

Svar #1

Det där jquery.inputmask.bundle.js-paketet är inte särskilt kompatibelt. De bundlade det med webpack. Det har inga standardexporter och fungerar förmodligen bara med webpack.

Försök att importera de vanliga byggutdata:

{
   "name": "inputmask",
   "path": "../node_modules/inputmask/dist/inputmask",
   "main": "inputmask",
   "deps": ["jquery"]
}

Detta kommer att kräva de andra beroendena som du kanske behöver inkludera i din aurelia.json också, men du får en korrekt varning om det är fallet.

Redigera :

Du bör också ändra din import-sats från:

import inputmask från "inputmask";

till :

importera * som inputmask från "inputmask";

inputmask har ingen standardexport, vilket är anledningen till att den import-satsen inte fungerar.