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，它只是在搜索页面上带有日期范围滑块的 symfony 演示，通过以下更改：

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

纱线添加 jquery-ui jqrangeslider

添加到/blog/search.html

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

添加到 asset/js/search.js

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

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

资产是使用“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';