Импорт пользовательского интерфейса JQuery из TypeScript

Question

У меня есть базовое недоразумение о том, как использовать JQuery и JQuery.spinner с TypeScript.

Я переместил точку входа javascript существующего проекта из html-тега в его собственный файл TypeScript "main.ts" и использую webpack для работы с зависимостями модулей.

В рамках "main.ts" я использую:

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

И свяжите "jquery" с локальной библиотекой.js в "webpack.config.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'
      }
    ]
    }]
  },
}

Это правильно компилируется, но у меня есть две проблемы:

1) Во время выполнения стрелки счетчика не отображаются так, как в исходном проекте (первый - мой, второй - счетчик в исходном проекте):

2) Мои запросы возвращают значение, которое выглядит как "rfinit(1)". В частности, эта строка JavaScript возвращает "rfinit(1)":

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

Где HTML содержит:<input type="text" id="backgroundColorR" value="0.0">

Я не уверен, откуда проблема, и другие ответы здесь не помогли. Я уверен, что это основной вопрос, но я в растерянности, после долгих осмотров здесь и API JQuery UI.

Answer 1

После многих часов проб и ошибок я пришел к решению, которое работает:

import * as $ from "jquery";
import "jquery-ui/ui/widgets/spinner";

Проверка веб-пакета с помощью --verbose опция показывает, что она на самом деле загружает цепочку зависимостей jquery-ui, тогда как просто import "jquery-ui" показал бы только несколько JQuery-зависимостей.

Кажется, что каждый виджет должен быть загружен вручную таким образом; К счастью, я использую только блесну.