jquery - TypeScript からの JQuery UI のインポート

Question

TypeScript で JQuery と JQuery.spinner を使用する方法について、基本的な誤解があります。

既存のプロジェクトの JavaScript エントリ ポイントを html タグから独自の TypeScript ファイル「main.ts」に移動し、webpack を使用してモジュールの依存関係を処理しています。

「main.ts」内では、次を使用します。

import $ = require("jquery");
import "jquery-ui";

次のように、「jquery」を「webpack.config.js」内のローカル .js ライブラリにリンクします。

var path = require('path')

module.exports = {
  entry: './built/main.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'webpack-bundle.js'
  },
  module : {
    rules :
    [{
      oneOf:
      [{
          resourceQuery : 'jquery',
          use : './js/jquery-3.1.1.min.js'
      },
      {
          resourceQuery : 'jquery-ui',
          use : './js/jquery-ui.min.js'
      }
    ]
    }]
  },
}

これは正しくコンパイルされますが、2 つの問題があります。

1）実行時に、元のプロジェクトのようにスピナーの矢印が表示されません（最初のものは私のもので、2番目のものは元のプロジェクトのスピナーです）：

2) 私のクエリは "rfinit(1)" のような値を返します。特に、この JavaScript の行は "rfinit(1)" を返します。

$('#backgroundColorR').spinner('value')

html に含まれる場所: <input type="text" id="backgroundColorR" value="0.0">

問題の原因がどこにあるのかわかりません。ここでの他の回答は役に立ちませんでした。これは基本的な質問だと思いますが、ここと JQuery UI API をよく調べた後、ここで途方に暮れています。