How to expose $.ui (jquery-ui) globally with webpack

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

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