Laravel JQuery 和 JQuery UI 的长生不老药

Laravel Elixir with JQuery and JQuery UI

在将 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 的要求和工作。

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

然后在jquery

之后要求ui重新
require('jquery');
require('jquery-ui-bundle');

希望这可以节省一些时间,我花了几个小时才弄明白!

三个简单的步骤:

  1. 安装 npm 包:npm i -S jquery-ui-bundle

  2. 导入javascript(在jquery导入之后的某处):require('jquery-ui-bundle');

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

npm install jquery-ui-bundle --save

在您的 bootstrap.js 中添加:

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

npm run dev