如何使用 webpack 全局公开 $.ui (jquery-ui)

Question

I'm using npm, TypeScript and Webpack.

I can use Expose Loader to expose jQuery globally:

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

Then I can import bootstrap:

import "bootstrap"

And this allows $ , jQuery , and $().popover (a boostrap function in the jQuery namespace) to be visible globally to external js files or the browser console.

However, I can't find a way to expose $.ui in the same manner.

I've tried:

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";

All in an effort to get import "jquery-ui-touch-punch" to eventually import without throwing errors...

Answer 1

Examples above in the question work properly in the context of a create-react-app . But in the context of a .Net application using it on the frontend it wasn't behaving. I'm not sure why, but I did get things working like this:

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");

And for jQuery-ui-touch-punch I had to prepend var jQuery = require('jquery'); in the start of the file to make it play nicely with webpack. I forked it and am using a git based npm dependency to handle this.

Answer 2

I have this working now this way:

(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');

using

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