Skip to main content
 首页 » 编程设计

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

2026年09月08日2mate10pro

我正在使用 npm、TypeScript 和 Webpack。

我可以使用Expose Loader来全局公开jQuery:

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

然后我可以导入 Bootstrap :

import "bootstrap" 

这使得 $、jQuery 和 $().popover(jQuery 命名空间中的 boostrap 函数)全局可见到外部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" 最终导入而不抛出错误...

请您参考如下方法:

我现在这样工作:

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