1

我对如何将 JQuery 和 JQuery.spinner 与 TypeScript 一起使用有一个基本的误解。

我已将现有项目的 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) 我的查询返回一个看起来像“rfinit(1)”的值。特别是这行 javascript 返回“rfinit(1)”：

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

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

我不确定问题出在哪里，这里的其他答案也没有帮助。我敢肯定这是一个基本问题，但是在环顾四周和 JQuery UI API 之后，我在这里不知所措。

4

1 回答 1

3

经过数小时的反复试验，我找到了一个可行的解决方案：

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

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

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

于 2018-03-02T03:15:33.310 回答