Laravel 5.4 и Semantic UI

Question

Я использую Laravel 5.4 и Semantic 2.2.7. Вот мой микс

mix.combine(['resources/libs/jquery/dist/jquery.min.js', 'resources/libs/semantic/dist/semantic.js'], 'public/js/vendor.js') 
.combine(['resources/libs/semantic/dist/semantic.min.css', 'resources/libs/font-awesome/css/font-awesome.min.css'], 'public/css/vendor.css') 
.js('resources/assets/js/scripts/login.validator.js', 'public/js/scripts.js') 
.less('resources/assets/less/style.less', 'public/css'); 

Я получаю библиотеки js, которые хорошо сочетаются в vendor.js. Если я следую примеру входа из link, я получаю ошибку следующим образом.

Примечание. Я проверил использование источника представления, и я мог сопоставить код forms.js в файле vendor.js.

Любые решения, которые мне нужно установить в laravel?

Кроме того, почему мой scripts.js файл 10343 строк, тогда как мой login.validator.js только 34 линия

Answer 1

вы можете использовать WebPack CommonsChunkPlugin, чтобы избежать Jquery readdition, Вы можете добавить настройку в webpack.mix.js файл, см. Laravel mix custom webpack configuration.

пример (не проверено)

webpack.mix.js

... 
... 
mix.webpackConfig({ 
    entry: { 
     vendor: ["jquery", "other-lib"] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor' 
     }) 
    ] 
}); 

Answer 2

Вы должны установить JQuery, как global. Webpack загружает модуль только тогда, когда ему это нужно, поэтому вы должны использовать autoload(), чтобы он работал везде.

mix.autoload({ 
    jquery: ['$', 'window.jQuery'] 
}); 

Answer 3

Проверьте этот пакет. Меня устраивает. https://github.com/Maxlab/laravel-vue-semantic-ui