jquery - webpack encore 和 jquery ui (dateRangeSlider)

Question

我在使用 Webpack Encore 将 jquery-ui 插件与我的 Symfony 应用程序集成时遇到问题。您可以在控制台中看到错误(TypeError: t(...).dateRangeSlider is not a function[Learn More]):

https://date-range-demo.herokuapp.com/en/blog/search

其源代码位于 https://github.com/tacman/range-slider-demo ，它只是在搜索页面上带有日期范围 slider 的 symfony 演示，通过以下更改:

从命令行将库添加到 package.json

yarn 添加jquery-ui jqrangeslider

添加到/blog/search.html

    <div id="slider">Slider Placeholder</div>

添加到assets/js/search.js

import 'jquery-ui'; 
import 'jqrangeslider';

$('#slider').dateRangeSlider();

Assets 是使用“yarn run encore dev”构建的，我确信这是一个简单的配置错误，但我不知道它是什么。

部署到heroku 添加了更多内容，但与插件未加载无关。要在本地查看此错误，只需克隆存储库，运行 Composer install && Yarn install && Yarn run encore dev，然后启动服务器并转到/en/blog/search。

感谢您对此提供的任何帮助!

Answer 1

经过几个小时的寻找解决方案后，我已经通过导入特定文件来完成此操作:首先我安装了jquery-ui

npm i jquery-ui --dev

然后在我的 js 文件中导入以下文件(拖放):

require('jquery-ui/ui/widgets/droppable');
require('jquery-ui/ui/widgets/sortable');
require('jquery-ui/ui/widgets/selectable');
import $ from 'jquery';