Laravel Elixir 与 JQuery 和 JQuery UI

Posted 2023-03-14

【中文标题】Laravel Elixir 与 JQuery 和 JQuery UI

【英文标题】：Laravel Elixir with JQuery and JQuery UI

【发布时间】：2017-03-18 12:22:37

【问题描述】：

在将 Laravel Elixir 与 Webpack 结合使用时，我无法获得所需的 JQuery UI。

这是我的 gulpfile.js，没什么异常：

const elixir = require('laravel-elixir');

elixir.config.sourcemaps = false;

elixir(mix => 
    mix.sass('app.scss')
       .webpack('app.js');
);

我的 app.js 文件是我试图同时要求 JQuery 和 JQuery UI 的地方。我尝试了多种方法，但这就是我所在的位置：

window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui'));

无论我做什么，我似乎都无法获得所需的 JQuery UI 和工作。

【参考方案1】：

想通了。 jquery-ui，作为内置和 npm 不包含 dist 文件。为了解决这个问题，您必须使用一个名为jquery-ui-bundle 的文件。运行以下命令npm i -S jquery-ui-bundle。

然后在jquery之后需要它

require('jquery');
require('jquery-ui-bundle');

希望这可以节省一些时间，我花了几个小时才弄清楚！

【讨论】：

@JagadeshaNH 你也在用灵丹妙药吗？

你把需求放在哪里？？

@Rabb-bit 导入模块

谢谢@JakeSylvestre。这为我节省了很多时间！

【参考方案2】：

npm install jquery-ui-bundle --save

在你的 bootstrap.js 中添加：

window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui-bundle'));

npm run dev

【参考方案3】：

三个简单的步骤：

安装 npm 包：npm i -S jquery-ui-bundle

导入 javascript（在 jquery 导入之后的某处）：require('jquery-ui-bundle');

导入css样式：node_modules/jquery-ui-bundle/jquery-ui.css