从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'
      }
    ]
    }]
  },
}

这个编译正确，但我有两个问题：

1）在运行时，微调器箭头不会像在原始项目中那样显示（第一个是我的，第二个是原始项目中的微调器）：

2）我的查询返回一个看起来像“r.f.init（1）”的值。特别是这行javascript返回“r.f.init（1）”：

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

html包含：<input type="text" id="backgroundColorR" value="0.0">

我不确定问题出在哪里，这里的其他答案都没有帮助。我确定这是一个基本的问题，但是我在这里和JQuery UI API之后看到了很多东西。

Answer 1

经过几个小时的反复试验，我找到了一个有效的解决方案：

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

使用--verbose选项检查webpack表明它实际上加载了一系列jquery-ui依赖项，而只有import "jquery-ui"才会显示一些jquery依赖项。

似乎每个小部件都必须以这种方式手动加载;谢天谢地，我只使用一个微调器。