Привет, я использую смесь laravel с моим Laravel 5.5
У меня есть вот такой микс-файл:
/* Production settings */
if (mix.inProduction()) {
mix.version();
mix.disableNotifications();
}
/* Sass Processing */
mix.sass('resources/assets/sass/_bootstrap.scss', 'public/css/bootstrap.css');
mix.sass('resources/assets/sass/navigation.scss', 'public/css/navigation.css');
mix.sass('resources/assets/sass/global.scss', 'public/css/global.css').options({
processCssUrls: false
});
mix.sass('resources/assets/sass/cards.scss', 'public/css/cards.css')
.sass('resources/assets/sass/forms.scss', 'public/css/forms.css')
.sass('resources/assets/sass/search.scss', 'public/css/search.css')
.sass('resources/assets/sass/profile.scss', 'public/css/profile.css')
.sass('resources/assets/sass/event.scss', 'public/css/event.css')
.sass('resources/assets/sass/entity.scss', 'public/css/entity.css')
.sass('resources/assets/sass/travel.scss', 'public/css/travel.css')
.sass('resources/assets/sass/sliders.scss', 'public/css/sliders.css')
.sass('resources/assets/sass/login.scss', 'public/css/login.css');
mix.styles([
'resources/assets/css/bootstrap-social.css',
'resources/assets/css/dropzone.css',
'resources/assets/css/jquery-ui.css',
'resources/assets/css/jquery-ui.structure.css',
'resources/assets/css/jquery-ui.theme.css',
'resources/assets/css/font-awesome.css',
'resources/assets/css/animate.css',
], 'public/css/style.css');
/* Global JS */
mix.scripts([
'resources/assets/js/pace.js',
'resources/assets/js/jquery.js',
'resources/assets/js/page-load.js',
'resources/assets/js/bootstrap.js',
'resources/assets/js/jquery-ui.js',
'resources/assets/js/favourites.js',
], 'public/js/global.js');
mix.js('resources/assets/js/dropzone.js', 'public/js/dropzone.js');
mix.js('resources/assets/js/image-upload.js', 'public/js/image-upload.js');
mix.js('resources/assets/js/googlemap.js', 'public/js/googlemap.js');
mix.js('resources/assets/js/entity.js', 'public/js/entity.js');
mix.js('resources/assets/js/validation.js', 'public/js/validation.js');
mix.js('resources/assets/js/search.js');
mix.js('resources/assets/js/homesearch.js', 'public/js/homesearch.js');
mix.js('resources/assets/js/instantsearch.js', 'public/js/instantsearch.js');
mix.js('resources/assets/js/featured.js', 'public/js/featured.js');
mix.js('resources/assets/js/tram.js', 'public/js/tram.js');
mix.js('resources/assets/js/counter.js', 'public/js/counter.js');
Я хотел использовать метод извлечения, как указано в документации:
Извлечение от поставщика - одним из потенциальных недостатков объединения всего кода JavaScript для конкретного приложения с библиотеками поставщика является то, что это затрудняет долгосрочное кэширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все библиотеки вашего поставщика, даже если они не изменились.
Если вы намереваетесь часто обновлять JavaScript своего приложения, вам следует рассмотреть возможность извлечения всех библиотек вашего поставщика в их собственный файл. Таким образом, изменение кода вашего приложения не повлияет на кеширование вашего большого файла vendor.js. Метод экстракции Mix упрощает задачу:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
Метод extract принимает массив всех библиотек или модулей, которые вы хотите извлечь в файл vendor.js. Используя приведенный выше фрагмент в качестве примера, Mix сгенерирует следующие файлы:
- public / js / manifest.js: среда выполнения манифеста Webpack
- public / js / vendor.js: библиотеки вашего поставщика
- public / js / app.js: код вашего приложения Чтобы избежать ошибок JavaScript, обязательно загружайте эти файлы в правильном порядке:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
Итак, я создал пустой файл в: resources/assets/js/app.js и в своем веб-пакете:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['jquery', 'bootstrap', 'pace'])
Все успешно обрабатывается, все файлы прикрепил. app.js, похоже, имеет требуемый контент, однако, когда я перехожу на страницу, очевидно, что jquery не определяется.
Что может быть причиной? Я установил bootstrap, jquery и темп через npm.
