Question

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

以下是我用jqlite设置的方法

在您的应用中导入，如下所示：
import InputMask from 'inputmask';
要使该模块可用，您必须使用别名和   dep lib

webpack config（使用jqlite dep lib，将其交换为jquery if   你用它代替）：
{
  // ... 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：无法找到模块'inputmask'。

使用import "inputmask";我在调用$(element).inputmask(mask);时遇到运行时错误：

TypeError：$（...）。inputmask不是函数

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

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 运行。输入掩码的一些事情已经改变。我能够使用以下代码使其工作：

package.json：

"webpack": "^5.1.3",

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

webpack 模型.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的正确方法是什么？

2 个答案: