ウェブサイト検索

typescript - jquery.inputmask をインポートする適切な方法は何ですか？

私はwebpackとTypeScriptでjquery.inputmaskをインポートするのに問題があります。Question: build this with webpack/es6 #1115 でいくつかの議論があります：

これが私が jqlite でセットアップした方法です

アプリに次のようにインポートしてください:

import InputMask from 'inputmask';

その名前でモジュールを利用可能にするには、それをエイリアスして依存ライブラリを作成する必要があります

webpack 設定（jqlite 依存ライブラリを使用、代わりに 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')
    }
  }
}

依存関係としてjqLiteの代わりにjQueryを使った、同様のwebpack設定があります：

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' を見つけることができません。

＜code＞import "inputmask";＜/code＞ を使用すると、＜code＞$(element).inputmask(mask);＜/code＞ を呼び出した時にランタイムエラーが発生します:

TypeError: $ (...).inputmask は関数ではありません

設定に問題があるのか、それともライブラリ自体の問題なのですか？

回答 #1

週末に誰かがGitHubで似たような質問をして、解決策も投稿されました。

コメント付きの全文はここで見つけることができます。さらに2つの別名が必要です：

"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 で動作させたい場合のために。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';

関連記事