导入 jquery.inputmask 的正确方法是什么？

Question

我在导入时遇到问题 jquery.inputmask with webpack and TypeScript. There is some discussion at Question: build this with webpack/es6 #1115 :

Here's how i just set things up with jqlite

Import in your app like so:
import InputMask from 'inputmask';
to make the module available by that name you have to alias it and the dep lib

webpack config (using the jqlite dep lib, swap this out for jquery if you use that instead):
{
  // ... your config +
  resolve: {
    alias: {
      'inputmask.dependencyLib': path.join(__dirname, 'node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib.jqlite.js'),
      'inputmask': path.join(__dirname, 'node_modules/jquery.inputmask/dist/inputmask/inputmask.js')
    }
  }
}

我有一个类似的 webpack 配置，使用 jQuery 而不是 jqLite 作为依赖项：

alias: {
    "inputmask.dependencyLib": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib.jquery.js'),
    "inputmask": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.js')
}

使用 import InputMask from "inputmask"; TypeScript 编译器会抛出错误：

error TS2307: Cannot find module 'inputmask'.

使用 import "inputmask"; 调用 $(element).inputmask(mask);:

时出现运行时错误

TypeError: $(...).inputmask is not a function

是配置有问题，还是库本身有问题？

Answer 1

周末有人问a similar question on GitHub，也贴出了解决方法

可以找到完整的要点（带有注释）here。需要两个额外的别名：

"jquery": path.join(__dirname, '../node_modules/jquery/dist/jquery.js'),
"inputmask.dependencyLib": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib.jquery.js'),
"inputmask": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/inputmask.js'),
"jquery.inputmask": path.join(__dirname, '../node_modules/jquery.inputmask/dist/inputmask/jquery.inputmask.js')

然后导入库，使用import "jquery.inputmask";。

Answer 2

以防万一你想把它放到运行以获得更新版本的 inputmask/jquery。 inputmask 的一些事情已经改变。我能够使用以下代码让它工作：

package.json:

"webpack": "^5.1.3",

"inputmask": "^5.0.5",
"jquery": "^3.5.1",

webpack model.exports:

resolve: {
  alias: {
    'jquery': _path('../node_modules/jquery/dist/jquery'),
    'inputmask': _path('../node_modules/inputmask/dist/jquery.inputmask'),
  },
},

ES6 导入：

import 'inputmask';
import $ from 'jquery';

导入 jquery.inputmask 的正确方法是什么？

What is the proper way to import jquery.inputmask?

typescript

webpack

jquery-inputmask