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');
希望这可以节省一些时间,我花了几个小时才弄明白!
三个简单的步骤:
安装 npm 包:npm i -S jquery-ui-bundle
导入javascript(在jquery导入之后的某处):require('jquery-ui-bundle');
- 导入 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
在将 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');
希望这可以节省一些时间,我花了几个小时才弄明白!
三个简单的步骤:
安装 npm 包:
npm i -S jquery-ui-bundle
导入javascript(在jquery导入之后的某处):
require('jquery-ui-bundle');
- 导入 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