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

Question

我在使用 webpack 和 TypeScript导入jquery.inputmask时遇到问题。在Question: build this with webpack/es6 #1115有一些讨论：

以下是我如何使用 jqlite 进行设置

像这样在您的应用中导入：

import InputMask from 'inputmask';

要使该模块可用该名称，您必须为它和 dep lib 起别名

webpack 配置（使用 jqlite dep lib，如果您使用它，请将其换成 jquery）：

{
  // ... 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 而不是 jqLit​​e 作为依赖项：

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 编译器会引发错误：

错误 TS2307：找不到模块“输入掩码”。

调用import "inputmask";时出现运行时错误$(element).inputmask(mask);：

TypeError: $(...).inputmask 不是函数

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

Answer 1

周末有人在 GitHub 上问了一个类似的问题，也发布了一个解决方案。

完整的要点（带评论）可以在这里找到。需要两个额外的别名：

"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 运行。输入掩码的某些内容发生了变化。我能够使用以下代码使其工作：

包.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';