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

Posted 2023-05-08

【中文标题】如何在 Aurelia 中导入和使用 RobinHerbots 的 Inputmask

【英文标题】：How to import and use RobinHerbots' Inputmask in Aurelia

【发布时间】：2018-10-10 19:06:48

【问题描述】：

我正在尝试在 Aurelia 中使用 RobinHerbots' Inputmask，但似乎无法正确导入它。

我遇到过有人在 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

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 一起使用，所以我确实可能遗漏了一些重要的东西。

【参考方案1】：

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

尝试导入常规构建输出：

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

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

编辑：

您还应该将导入语句更改为：

import inputmask from "inputmask";

到：

import * as inputmask from "inputmask";

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

【讨论】：

感谢您的帮助。我试过你的解决方案。没有构建错误，但当我尝试在类中使用 Inputmask 时仍然收到 Unhandled promise rejection TypeError: inputmask_1.default is not a constructor 和 Uncaught TypeError: Cannot read property 'value' of undefined，当我尝试使用 data-inputmask 属性时出现此错误 Uncaught TypeError: Cannot read property 'substring' of null。

@flea 哦，抱歉，我刚刚注意到我遗漏了一些内容，您应该将 import inputmask from "inputmask"; 更改为 import * as inputmask from "inputmask";。更新了我的答案。