Webpack Encore和JQuery ui（dateRangeSlider）

Question

我无法使用Webpack Encore将jquery-ui插件与我的Symfony应用集成。您可以在控制台中看到错误（TypeError：t（...）。dateRangeSlider不是函数[了解更多]）：

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安装&& yarn运行encore dev，然后启动服务器并转到/ en / blog / search。

谢谢您的帮助！

Answer 1

经过数小时的搜索解决方案，我已经完成了导入特定文件的操作： 首先，我已经安装了public class MiniGameRocketShipController : MonoBehaviour { public Vector2 velocity = new Vector2(0f, 1500f); private Vector2 directionX; private Vector2 directionY; public Rigidbody2D rb; public new Camera camera; public float moveSpeed = 100f; public float rotation; private void Start() { rotation = rb.rotation; } private void Update() { rb.AddForce(velocity * Time.deltaTime); rb.velocity = new Vector2(directionX.x * moveSpeed, directionY.y * moveSpeed); FaceMouse(); } void FaceMouse() { if (rotation > 180) { rotation = 360; } rotation = Mathf.Clamp(rotation, -40f, 40f); rb.rotation = rotation; Vector3 mousePosition = Input.mousePosition; mousePosition = camera.ScreenToWorldPoint(mousePosition); directionX = (mousePosition - transform.position).normalized; directionY = transform.position.normalized; transform.up = directionX; } }

jquery-ui

然后在我的js文件中，导入了以下文件（拖放）：

npm i jquery-ui --dev

Answer 2

我遇到了问题，但使用了jqueryui的可拖动组件。

在我的应用中，我使用require而不是import，但是我必须特别要求可拖动组件，而不是整个jquery-ui组件。

我现在没有合适的示例进行复制粘贴，但是尝试导入draggable.js文件。

Answer 3

使用webpack-jquery-ui代替使用jquery-ui： --dev（最终使用require('webpack-jquery-ui')选项）。

然后将其与<td>一起导入到search.js中。