typescript - Vad är det korrekt sättet att importera jquery.inputmask?

Jag har problem med att importera jquery.inputmask med webpack och TypeScript. Det finns viss diskussion på Fråga: bygg detta med webpack/es6 #1115 :

Här är hur jag just ställde upp saker med jqlite

Importera i din app på detta sätt:

import InputMask from 'inputmask';

för att göra modulen tillgänglig under det namnet måste du ge den ett alias och dep-biblioteket

webpack-konfiguration (använder jqlite-biblioteket, byt ut detta mot jquery om du använder det istället):

{
  // ... 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')
    }
  }
}

Jag har en liknande webpack-konfiguration med jQuery istället för jqLite som beroende:

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')
}

Med import InputMask från "inputmask"; ger TypeScript-kompilatorn ett fel:

fel TS2307: Kan inte hitta modulen 'inputmask'.

Med import "inputmask"; får jag ett körtidsfel när jag anropar $ (element).inputmask(mask);:

TypeError: $ (...).inputmask är inte en funktion

Är det något fel på konfigurationen, eller är det ett problem med biblioteket självt?

Svar #1

Under helgen frågade någon en liknande fråga på GitHub, och en lösning publicerades också.

Hela huvudpoängen (med kommentarer) finns här. Två ytterligare alias behövs:

"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')

För att sedan importera biblioteket, använd import "jquery.inputmask";.

Svar #2

Bara ifall du vill få det att fungera för nyare versioner av inputmask/jquery. Vissa saker har ändrats för inputmask. Jag lyckades få det att fungera med följande kod:

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:

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

Relaterade artiklar