如何与webpack一起全面公开$.ui (Jquery)

Question

我用的是npm，TypeScript和Webpack。

我可以使用公开加载器来全局公开jQuery：

import "expose-loader?$!jquery"
import "expose-loader?jQuery!jquery"

然后我可以导入引导程序：

import "bootstrap"

这允许$、jQuery和$().popover( jQuery命名空间中的引导函数)在外部js文件或浏览器控制台中全局可见。

但是，我无法找到以同样的方式公开$.ui 的方法.

我试过：

import "jquery-ui" //needs building, from 1.12 on they support importing indivisual modules
import "jquery-ui/ui"
import "jquery-ui-dist/jquery-ui.js"
import "jquery-ui-bundle" //1.12.1 and 1.11.4
import "jqueryui";

所有这些都是为了让import "jquery-ui-touch-punch"最终导入而不抛出错误.

Answer 1

我现在的工作方式是：

(window as any).$ = require('jquery');
(window as any).jQuery = $;

// use require so the imports aren't hoisted above the global variable assignments.
require('jquery-ui-dist/jquery-ui');
require('imports-loader?this=>window!jquery-ui-touch-punch');

使用

"jquery": "3.1.1",
"jquery-ui-dist": "1.12.1",
"jquery-ui-touch-punch": "0.2.3",

Answer 2

以上问题中的示例在create-react-app上下文中正常工作。但是，在.Net应用程序的上下文中，在前端使用它是不正常的。我不知道为什么，但我确实做了这样的事情：

import $ from "jquery";
var jQuery = $;
(<any> window).$ = (<any>window).jQuery = $;
//use require so the assignments above happen, imports get hoisted
require("jquery-ui") 
require("jquery-ui-touch-punch");
require("bootstrap");

对于jQuery-ui-touch-punch，我必须在文件的开头加上var jQuery = require('jquery');，才能让它和webpack玩得很好。我分叉了它，并且正在使用一个基于git的npm依赖来处理这个问题。