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

【问题标题】：What is the proper way to import jquery.inputmask?导入 jquery.inputmask 的正确方法是什么？
【发布时间】：2016-10-27 05:57:19
【问题描述】：

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

这就是我如何使用 jqlite 进行设置

像这样在您的应用中导入：
import InputMask from 'inputmask';
要使用该名称使模块可用，您必须给它起别名并且开发库

webpack 配置（使用 jqlite dep 库，如果你用那个代替）：
{
  // ... 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 编译器会抛出错误：

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

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

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

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

【问题讨论】：

您必须将import "inputmask"; 放入您的入口点，然后您可以使用import InputMask from "inputmask"; 将模块的元素导入您的类中
@iberbeu 我在这样做时遇到了同样的 TS2307 错误。

标签： typescript webpack jquery-inputmask

【解决方案1】：

周末有人问a similar question on GitHub，也发布了解决方案。

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

"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";。

【讨论】：

【解决方案2】：

以防万一您想让它为较新版本的 inputmask/jquery 运行。输入掩码的某些内容发生了变化。我能够使用以下代码使其工作：

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

【讨论】：