如何使用 webpack 正确管理 jquery-ui

Question

我目前正在我的 symfony 应用程序上迁移到 webpack-encore，我正在努力使用 jquery-ui 库。

在我的第一个文件中 app.js 我想使用缓动

import $ from 'jquery';
import 'bootstrap';
import 'jquery-ui/ui/effect';


// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: (target.offset().top - 70)
            }, 1000, "easeInOutExpo");
            return false;
        }
    }
});

我花了一些时间才弄清楚它在 jqueryui/ui/effect.js 文件中....

现在在我的 view.js 中，我想使用可拖动元素：

//css
import '../css/event.css';

//js 
import $ from 'jquery';
import 'bootstrap';
import 'jquery-ui/ui/plugin';

$("span[class='draggable']").draggable({
    snap : '.dropdown'
});

当然它不起作用我得到一个

ERROR: $("span[class='draggable']").draggable() is not a function

是否有一种正确的方式来加载所有 jquery-ui 就像所有的日子一样好？用一个简单的

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Answer 1

此代码已经过测试

安装 jquery-ui 参考：doc

$ npm install webpack-jquery-ui

然后

require('webpack-jquery-ui/draggable');

$( "#draggable" ).draggable();

如何使用 webpack 正确管理 jquery-ui

how to properly manage jquery-ui with webpack

symfony

webpack

webpack-encore