jquery - 如何在 Aurelia 中导入和使用 RobinHerbots 的 Inputmask

Question

我正在尝试使用 RobinHerbots' Inputmask在 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);
}

产生 未处理的 promise 拒绝 TypeError:inputmask_1.default 不是构造函数 和 Uncaught TypeError:无法读取未定义的属性“值”

Inputmask error in the console

当我尝试使用 data-inputmask 属性时，它也不起作用。

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

Input is not successfully masked using data-inputmask

我错过了什么吗？我只有导入明确用于 Aurelia 的插件或明确声明它们可以与 Aurelia 一起使用的经验，所以我确实可能遗漏了一些重要的东西。

Answer 1

jquery.inputmask.bundle.js 包不是很兼容。他们将它与 webpack 捆绑在一起。它没有任何默认导出，可能只适用于 webpack。

尝试导入常规构建输出:

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

这将需要您可能还需要将其包含在 aurelia.json 中的其他依赖项，但如果是这种情况，您将收到适当的警告。

编辑:

您还应该更改您的导入语句:

从“输入掩码”导入输入掩码；

到:

从 "inputmask"导入 * 作为 inputmask;

inputmask 没有默认导出，这就是导入语句不起作用的原因。