如何在npm（laravel-mix环境）中正确使用jQuery-UI？

我太懂这种拆分组件带来的头疼了——jQuery UI拆成一个个小模块后，在Laravel Mix里确实容易摸不着头绪，尤其是bounce/shake这类特效，和常规组件的加载逻辑还略有区别。我来给你一套更顺畅的方案，既能搞定特效，还能让拖拽组件的调用回到文档里的常规写法。

核心问题：为什么之前的方式对特效不管用？ #

jQuery UI的特效模块是作为jQuery的原型方法（也就是$.fn上的方法）存在的，而不是像draggable那样可以通过构造函数实例化。而且特效需要先加载核心的effect模块，再加载具体的特效实现，顺序错了就会失效。另外，如果你没把jQuery挂载到全局，组件也没法自动注册到$上，这就是你之前只能用构造函数调用拖拽的原因。

一步一步来搞定： #

1. 先配置Laravel Mix让jQuery全局可用

打开webpack.mix.js，加上这句配置，确保jQuery被挂载到window对象上，这样所有jQuery UI组件都会自动注册成$的方法：

mix.autoload({
    jquery: ['$', 'window.jQuery']
});

2. 正确引入jQuery UI的特效模块和样式

在你的JS文件里，按这个顺序引入（顺序很重要）：

// 引入特效相关的样式（按需引入，比如bounce特效需要effect-bounce.css）
require('jquery-ui/themes/base/theme.css');
require('jquery-ui/themes/base/effect.css');
require('jquery-ui/themes/base/effect-bounce.css');
require('jquery-ui/themes/base/effect-shake.css');

// 引入jQuery并挂载到全局
import $ from 'jquery';
window.$ = window.jQuery = $;

// 先引入特效核心模块，再引入具体特效
require('jquery-ui/ui/widgets/effect');
require('jquery-ui/ui/effects/effect-bounce');
require('jquery-ui/ui/effects/effect-shake');

3. 按文档方式调用特效就行啦

现在你就可以像官方文档那样直接调用特效了：

// 给元素加bounce特效，参数分别是特效名、配置、时长
$('.resource').effect('bounce', { times: 3, distance: 20 }, 600);

// shake特效同理
$('.resource').effect('shake', { distance: 15, times: 2 }, 400);

顺便优化你的拖拽组件调用 #

其实拖拽组件也不用用构造函数的方式，按同样的逻辑引入后，就能用文档里的常规写法：

// 引入拖拽样式和组件
require('jquery-ui/themes/base/draggable.css');
require('jquery-ui/ui/widgets/draggable');

// 直接调用$().draggable()
$('.resource').draggable({
    revert: 'invalid',
    cursor: 'move'
    // 其他配置...
});

关键总结 #

• 一定要确保jQuery挂载到全局，这样组件和特效会自动注册到$上，不用手动实例化
• 引入模块时要注意依赖顺序：先jQuery，再核心模块（比如effect），最后是具体组件/特效
• 样式文件要对应引入，不然特效可能会没有预期的视觉效果

内容的提问来源于stack exchange，提问作者Džuris