2016-11-04 4 views
6

Я не могу получить пользовательский интерфейс JQuery, необходимый при использовании Laravel Elixir с Webpack.Laravel Elixir с JQuery и 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 требуется и работать.

ответ

6

Выяснил это. jquery-ui, as is built и в npm не содержит файл dist. Чтобы решить эту проблему, вы должны использовать файл с именем jquery-ui-bundle. Выполните следующую команду: npm i -S jquery-ui-bundle.

Затем требует после JQuery

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

Надеется, что это спасает кто-то какое-то время, я потратил несколько часов, полагая, что вне!

+0

как насчет CSS? его не работает –

+0

@JagadeshaNH вы используете для этого эликсир? –

+0

, где вы ставите требование? –

1

Три простых шага:

  1. Установите НПМ пакет: npm i -S jquery-ui-bundle

  2. Импорт Javascript (где-то после того, как JQuery импортирование): require('jquery-ui-bundle');

  3. Импорт стилей CSS: node_modules/jquery-ui-bundle/jquery-ui.css
3

npm install jquery-ui-bundle --save

В вашем bootstrap.js добавить следующее:

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

npm run dev