Как импортировать и использовать маску ввода RobinHerbots в Аурелии

Question

Я пытаюсь использовать Inputmask RobinHerbots в Aurelia, но не могу импортировать его правильно.

Я встречал людей, обсуждающих использование этого плагина в Aurelia, но я не мог найти конкретную документацию о том, как это сделать.

После npm i inputmask --save это то, что у меня есть в моем aurelia.json:

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

В моем package.json Я объявил inputmask,

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

Я не вижу ошибок au build, Однако, когда я импортирую с помощью ES6, я не могу использовать ни одно из его свойств.

import Inputmask from "inputmask";

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

Урожайность Unhandled promise rejection TypeError: inputmask_1.default is not a constructor а также Uncaught TypeError: Cannot read property 'value' of undefined

Ошибка ввода маски в консоль

Когда я пытаюсь использовать data-inputmask атрибут это тоже не работает.

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

Ввод не был успешно замаскирован с использованием data-inputmask

Я что-то пропустил? У меня был только опыт импорта плагинов, специально предназначенных для Aurelia, или утверждал, что их можно использовать с Aurelia, поэтому я действительно мог упустить что-то жизненно важное.

Answer 1

Тот jquery.inputmask.bundle.js расслоение не очень совместимо. Они связали это с веб-пакетом. Он не имеет экспорта по умолчанию и, вероятно, работает только с веб-пакетом.

Попробуйте импортировать обычные результаты сборки:

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

Это потребует других зависимостей, которые вам, возможно, потребуется включить в ваш aurelia.json также, но вы получите надлежащее предупреждение, если это так.

Редактировать:

Вы также должны изменить свой оператор импорта с:

import inputmask from "inputmask";

чтобы:

import * as inputmask from "inputmask";

У входной маски нет экспорта по умолчанию, поэтому этот оператор импорта не будет работать.