Понимание Laravel Mix

Понимание Laravel Mix

В настоящее время я переношу один из моих сайтов в Laravel, чтобы сделать его немного более удобным в будущем... У меня есть много опыта разработки API с Laravel, но у меня очень ограниченный опыт создания сайтов с Laravel и в результате я нуждаюсь в небольшом совете от другого профессионала.

Короче говоря, я очень благодарен за ответы на следующие очень простые вопросы, если кто-то может избавить меня от нескольких минут...

Основанные на файлах JS и CSS вместо основанного на приложении

Мне нравится писать мои файлы JS и CSS определенным образом, где каждая страница имеет свои собственные файлы, относящиеся к странице. Например, about.php может иметь следующие зависимости:

JS:

  • jquery.js
  • any_other_third_party_library.js
  • app.js (глобальные функции)
  • about.js (специальные функции страницы)

CSS

  • some_third_party_library.css
  • app.css (глобальные стили)
  • about.css (стили, специфичные для страницы)

В моей собственной структуре вышеупомянутое было объединено и обобщено в один файл для JS и один файл для CSS. Из того, что я понимаю, Laravel Mix делает именно это...

Однако, насколько я вижу, способ сделать это будет следующим:

webpack.mix.js:

// About
mix.scripts([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js');

Очень просто, что я хотел бы знать; вернее ли это? Есть ли лучший, более эффективный способ автоматизировать это для каждой страницы?

Каковы файлы bootstrap.js и app.js?

Из того, что я вижу, эти файлы просто загружают зависимости, но это немного запутывает, поскольку некоторые зависимости могут быть специфическими для страницы... Пожалуйста, кто-нибудь может объяснить немного более подробно, для чего эти файлы? Или, по крайней мере, какая разница между ними...

Избавление от Vue

Я не заинтересован в использовании Vue в моем проекте, поэтому я удалил следующие файлы:

/components/Example.vue Код vue в app.js

Это имеет значение в любом случае?

Ответы

Ответ 1

Вы объедините все свои стили и сценарии по одному файлу каждый и подадите их клиенту, который был изменен.

Для активов переднего плана вызовите mix.sass('resources/assets/sass/app.scss'). В этой точке входа в ваши стили вы сможете импортировать свои другие таблицы стилей, как вам нужно, используя синтаксис Sass @import 'about';. (Переименуйте другие файлы CSS, чтобы они закончились в .scss).

Для ваших задних активов вызовите mix.js('resources/assets/js/app.js'). Затем аналогичным образом вы можете импортировать другие модули JavaScript, используя import './about.js';. Возможно, вам захочется найти модули ES2015, чтобы вы могли научиться писать модульный JavaScript.

Прочитайте файл bootstrap.js, чтобы узнать, как Laravel подключает jQuery и Vue по умолчанию. Вам ничего не нужно, поэтому удалите все, что вам не нужно, или удалите весь файл, если вам это не нужно.

Vue выходит из коробки с Laravel, но это всего лишь предложение, вы можете заменить его своей собственной каркасом переднего края или вырвать его и заменить его ничем. До вас.

Изменить: длинный рассказ; используйте mix.sass и mix.js, прочитайте с использованием модулей Sass и ES2015 для написания удивительного кода.