Понимание 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 в своем проекте, поэтому я удалил следующие файлы:

/components/Example.vue

и код Vue в app.js

Имеет ли это какое-либо значение?


node.js javascript laravel laravel-mix bootstrapping
person Ben Carey    schedule 05.03.2017    source источник
comment
Я думаю, сначала вам нужно будет посмотреть, как должен выглядеть результат. Насколько я понимаю, у вас очень простая структура js/css без каких-либо препроцессоров. Итак, начните с минимизации ваших глобальных ресурсов, а затем сгруппируйте другие ресурсы по страницам.   -  person Cerlin    schedule 06.03.2017
comment
@CerlinBoss Да, вы правы, моя структура JS/CSS чрезвычайно проста, на самом деле, я ожидаю, что большинство сайтов будут использовать что-то подобное. Тем не менее, я ожидаю, что у меня будет один файл, например. about-some_hash.js, который содержит весь код, необходимый для about.php. И то же самое для CSS... По сути, один уникальный комбинированный и минимизированный файл для каждой страницы. Имеет ли это смысл?   -  person Ben Carey    schedule 06.03.2017
comment
Абсолютно. Как я уже говорил ранее, у вас может быть глобальный файл js (min) и файл css (min), а затем отдельные мини-файлы js и css для конкретных страниц. Laravel mix не делает ничего, кроме того, что сделал бы gulp.   -  person Cerlin    schedule 06.03.2017
comment
@CerlinBoss Да, но затем их следует объединить, чтобы уменьшить количество запросов ... По сути, то, что я хочу знать, очень просто, это плохая практика: mix.js(['resources/assets/js/app.js', 'resources/assets/js/about/about.js'], 'public/js/about/about.js') и т. д. для каждой страницы ... Или есть лучший способ сделать это?   -  person Ben Carey    schedule 06.03.2017
comment
В конечном итоге у вас будет отдельная задача для каждой страницы. Это произойдет, даже если у вас есть sass. Если у вас есть общий код внутри app.js, создайте для него отдельный файл app.min.js и включите его отдельно.   -  person Cerlin    schedule 06.03.2017
comment
Или вы можете скомпилировать все в один файл и использовать кеширование браузера.   -  person Cerlin    schedule 06.03.2017
comment
@CerlinBoss Спасибо, Серлин, я собираюсь опубликовать еще один вопрос, который объясняет это немного подробнее и, надеюсь, немного яснее. Я не хочу иметь отдельный app.min.js, так как это потребует другого поиска в браузере, однако я не хочу использовать один и тот же файл JS и CSS на каждой странице сайта, так как это снизит эффективность. каждой страницы...   -  person Ben Carey    schedule 06.03.2017
comment
@CerlinBoss Я опубликую здесь ссылку на мой новый вопрос, как только закончу, так что не стесняйтесь отвечать там, если хотите :-D   -  person Ben Carey    schedule 06.03.2017
comment
@CerlinBoss Проверьте это, если у вас есть минутка: stackoverflow.com/questions/42622118/ :-)   -  person Ben Carey    schedule 06.03.2017

Ответы (1)


arrow_upward
4
arrow_downward

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

Для внешних ресурсов позвоните по номеру 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 для написания отличного кода.

person Dwight    schedule 06.03.2017
comment
Во-первых, большое спасибо за ответ! Однако я не думаю, что вы действительно поняли мой вопрос (вопросы). Я не спрашиваю, что делает Laravel Mix, я знаю, что он делает... Я пытаюсь понять, как наиболее эффективно использовать Laravel Mix для сжатия определенных файлов для конкретные страницы? - person Ben Carey; 06.03.2017
comment
Я бы порекомендовал вам этого не делать, а вместо этого использовать один комбинированный JavaScript и одну комбинированную таблицу стилей для всего вашего приложения. Если вы спрашиваете, как заставить соответствующие стили или части вашего скрипта активироваться на определенных страницах, вы можете рассмотреть возможность добавления имени контроллера и действия в качестве классов в тег body и использования его для целевой функциональности. Если вы хотите использовать Laravel Mix для создания отдельного ресурса для каждой страницы, он не предназначен для этого, и на самом деле нет эффективного способа сделать это. - person Dwight; 06.03.2017
comment
Спасибо, что вернулись ко мне; Я слышу вас, и, учитывая, что Laravel явно поощряет его использование, я попробую, хотя я все еще сдержан в отношении включения неиспользуемого кода на определенные страницы... Тем не менее, не могли бы вы отредактировать свой ответ, чтобы включить пример из app.js и some_page.js вместе с примером смешивания, чтобы я мог увидеть, как мне это сделать, а затем я могу пометить ответ как принятый :-D - person Ben Carey; 06.03.2017
comment
Большинство сайтов, которые вы используете, будут делать именно это, предоставляя вам отдельные ресурсы, даже если любая страница будет использовать только подмножество. Если вам нужен реальный пример, вот файл webpack.mix.js из моего блога: github.com/dwightwatson/neontsunami/blob/master/webpack.mix.js Это демонстрирует, как вы можете использовать отдельные ресурсы, если хотите, я разбил свои ресурсы администратора, потому что они полностью отличались от основных сайт. - person Dwight; 06.03.2017
comment
Большое спасибо, Дуайт, это именно то, что мне нужно было увидеть! У меня есть последний вопрос, можно? Весь мой javascript - это просто чистый старомодный javascript в моей собственной структуре, jQuery и т. Д. Однако каждая страница имеет свою собственную реализацию функции с именем SetPageElements(), которая инициализирует все, что требуется для этой конкретной страницы. Как бы вы подошли к созданию функции, уникальной для каждой страницы? Очевидно, я мог бы просто переименовать функцию для каждой страницы, но я бы предпочел этого не делать, если этого можно избежать... - person Ben Carey; 06.03.2017
comment
Каждый файл в ES2015 JavaScript должен быть самодостаточным, поэтому наличие функции с одинаковым именем в каждом из них не должно быть проблемой — это просто вопрос ее подключения, чтобы каждый файл знал, когда его запускать. - person Dwight; 07.03.2017