我正在尝试在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一起使用的插件,所以我确实可能错过了一些重要的东西。
答案 0 :(得分:0)
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没有默认导出,这就是导入语句不起作用的原因。