如何在 npm (laravel-mix) 中使用 jquery-ui？

Question

我已经npm install编辑了 jquery-ui。它在那里全部拆分为组件，在我使用 laravel-mix 编译的 javascript 文件中似乎很难使用它们。

这就是我设法调用可拖动到一组元素的方式：

require('jquery-ui/themes/base/draggable.css');
var jQuery = require('jquery');
var draggable = require('jquery-ui/ui/widgets/draggable');

var draggableOptions = {
    revert: 'invalid',
    // other options...
    cursor: 'move'
};

$('.resource').each(function(index, resource) {
    new draggable(draggableOptions, $(resource));
});

// The documented approach didn't work because there was no function 'draggable'
// $('.resource').draggable(draggableOptions);

现在我正在尝试使用 jquery-ui 效果，例如bounceor shake，但我无法以任何方式导入和/或调用它们，无论是记录的还是上面的。总而言之，我觉得我做错了，应该更容易。

Answer 1

今天一直在我自己，我已经找到了这种解决方案。

编辑您/resources/assets/js/app.js并添加以下内容：

import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
import 'jquery-ui/ui/widgets/sortable.js';

如您所见，您需要添加您打算包含的小部件。

来源：https : //github.com/JeffreyWay/laravel-mix/blob/master/docs/jquery-ui.md

我希望它可以在路上帮助你。