Как использовать несколько js с помощью Webpack.mix.js в Laravel 7?

В своем проекте я использую Bootstrap.js, Jquery.js, Jquery_validation.js и один custom.js (для правил конкретного проекта).

Я хочу использовать только один app.js на всех страницах. как лучше всего использовать webpack.mix?

Я установил jquery и jquery-validation, пожалуйста, предложите мне.

package.json

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "jquery-validation": "^1.19.1",
    "savvy-js": "^1.0.7"
}

в ресурсе / js / app.js

require('jquery-validation');

require('./bootstrap');

window.Vue = require('vue');

webpack.mix

mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js')

.sass ('ресурсы / sass / app.scss', 'общедоступный / css') .options ({processCssUrls: false});

Итак, скажите, пожалуйста, как лучше всего использовать bootstrap.js, jquery.js, jquery-validation.js и custom.js (resource / js / custom.js)?


webpack node.js jquery laravel laravel-7
person Kapil Dev    schedule 17.05.2020    source источник
comment
Это довольно стандартная настройка laravel. В вашем app.blade.php должно быть <script src="{{ asset('js/app.js') }}"></script>, которое включает созданный вами сценарий.   -  person mankowitz    schedule 17.05.2020
comment
Да, я использую его, но у меня есть несколько js (bootstrap, jquery, jquery_validation и один пользовательский js), поэтому необходимо их объединить.   -  person Kapil Dev    schedule 17.05.2020
comment
Вы уже запускали npm run production?   -  person Karl Hill    schedule 17.05.2020

Ответы (2)


arrow_upward
2
arrow_downward

Для webpack.mix.js нужны расширения файлов; папки не хватает. Обычно я связываю .sass со своим представлением. Что-то вроде


//does not work
mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js');


//sucessful
mix.js('resources/js/app.js','public/js');

//or if you want a custom name
mix.js('resources/js/snavvy.js', 'public/js/custom_snavvy.js');

npm run dev

//or

npm run watch

Удачи.

person save0r    schedule 17.05.2020
comment
Я добавил имя файла с расширением. mix.js (['resources / js / app.js', 'resources / js / snavvy.js'], 'public / js / app.js'), но snavvy по-прежнему не работает. - person Kapil Dev; 17.05.2020
comment
попробуйте удалить '[' и ']' и поместить представления .js в отдельный класс mix.js. - person save0r; 17.05.2020
comment
я в точности как // успешно это - person save0r; 17.05.2020
comment
новый отредактированный ответ, создающий два файла js в папке public / js, тогда в чем преимущество webpack.mix. - person Kapil Dev; 17.05.2020
comment
скомпилировать файлы в определенный каталог с соответствующими библиотеками. Это просто синтаксическая проблема - person save0r; 17.05.2020
comment
Основные библиотеки находятся в node_modules, поэтому быть доступными для пользователя небезопасно. - person save0r; 17.05.2020

arrow_upward
0
arrow_downward

Это решение сработало для меня:

mix.js([
    'resources/js/app.js',
    'resources/js/jquery-2.2.4.min.js',
    'resources/plugins/bootstrap-3.3.6/js/bootstrap.min.js',
     ...
], 'public/js/app.js').version();

Дополнительная информация

person Dávid Siklaky    schedule 23.11.2020