Как понять скомпилированный файл или нет js

Введение в JavaScript

Давайте посмотрим, что такого особенного в JavaScript, чего можно достичь с его помощью и какие другие технологии хорошо с ним работают.

Что такое JavaScript?

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Это отличает JavaScript от другого языка – Java.

Почему JavaScript?

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.

У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».

Разные движки имеют разные «кодовые имена». Например:

• V8 – в Chrome, Opera и Edge.
• SpiderMonkey – в Firefox.
• …Ещё есть «Chakra» для IE, «JavaScriptCore», «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome, Opera и Edge.

Как работают движки?

Движки сложны. Но основы понять легко.

1. Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
2. Затем он преобразует («компилирует») скрипт в машинный язык.
3. После этого машинный код запускается и работает достаточно быстро.

Движок применяет оптимизации на каждом этапе. Он даже просматривает скомпилированный скрипт во время его работы, анализируя проходящие через него данные, и применяет оптимизации к машинному коду, полагаясь на полученные знания. В результате скрипты работают очень быстро.

Что может JavaScript в браузере?

Современный JavaScript – это «безопасный» язык программирования. Он не предоставляет низкоуровневый доступ к памяти или процессору, потому что изначально был создан для браузеров, не требующих этого.

Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д.

В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.

Например, в браузере JavaScript может:

• Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
• Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
• Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
• Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
• Запоминать данные на стороне клиента («local storage»).

Чего НЕ может JavaScript в браузере?

Возможности JavaScript в браузере ограничены ради безопасности пользователя. Цель заключается в предотвращении доступа недобросовестной веб-страницы к личной информации или нанесения ущерба данным пользователя.

Примеры таких ограничений включают в себя:

• JavaScript на веб-странице не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Он не имеет прямого доступа к системным функциям ОС. Современные браузеры позволяют ему работать с файлами, но с ограниченным доступом, и предоставляют его, только если пользователь выполняет определённые действия, такие как «перетаскивание» файла в окно браузера или его выбор с помощью тега . Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может незаметно включить веб-камеру, наблюдать за происходящим и отправлять информацию в ФСБ.
• Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта). Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными. Это ограничение необходимо, опять же, для безопасности пользователя. Страница https://anysite.com , которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL https://gmail.com и воровать информацию оттуда.
• JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.

Подобные ограничения не действуют, если JavaScript используется вне браузера, например — на сервере. Современные браузеры предоставляют плагины/расширения, с помощью которых можно запрашивать дополнительные разрешения.

Что делает JavaScript особенным?

Как минимум, три сильные стороны JavaScript:

• Полная интеграция с HTML/CSS.
• Простые вещи делаются просто.
• Поддерживается всеми основными браузерами и включён по умолчанию.

JavaScript – это единственная браузерная технология, сочетающая в себе все эти три вещи.

Вот что делает JavaScript особенным. Вот почему это самый распространённый инструмент для создания интерфейсов в браузере.

Хотя, конечно, JavaScript позволяет делать приложения не только в браузерах, но и на сервере, на мобильных устройствах и т.п.

Языки «над» JavaScript

Синтаксис JavaScript подходит не под все нужды. Разные люди хотят иметь разные возможности.

Это естественно, потому что проекты разные и требования к ним тоже разные.

Так, в последнее время появилось много новых языков, которые транспилируются (конвертируются) в JavaScript, прежде чем запустятся в браузере.

Современные инструменты делают транспиляцию очень быстрой и прозрачной, фактически позволяя разработчикам писать код на другом языке, автоматически преобразуя его в JavaScript «под капотом».

Примеры таких языков:

• CoffeeScript добавляет «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, который позволяет писать чистый и лаконичный код. Обычно такое нравится Ruby-программистам.
• TypeScript концентрируется на добавлении «строгой типизации» для упрощения разработки и поддержки больших и сложных систем. Разработан Microsoft.
• Flow тоже добавляет типизацию, но иначе. Разработан Facebook.
• Dart стоит особняком, потому что имеет собственный движок, работающий вне браузера (например, в мобильных приложениях). Первоначально был предложен Google, как замена JavaScript, но на данный момент необходима его транспиляция для запуска так же, как для вышеперечисленных языков.
• Brython транспилирует Python в JavaScript, что позволяет писать приложения на чистом Python без JavaScript.

Есть и другие. Но даже если мы используем один из этих языков, мы должны знать JavaScript, чтобы действительно понимать, что мы делаем.

Итого

• JavaScript изначально создавался только для браузера, но сейчас используется на многих других платформах.
• Сегодня JavaScript занимает уникальную позицию в качестве самого распространённого языка для браузера, обладающего полной интеграцией с HTML/CSS.
• Многие языки могут быть «транспилированы» в JavaScript для предоставления дополнительных функций. Рекомендуется хотя бы кратко рассмотреть их после освоения JavaScript.

Как понять скомпилированный файл или нет js

При компиляции файлов TypeScript из командной строки компилятор позволяет установить ряд конфигурационных настроек. Для установки нам доступна куча различных настроек, полный список которых можно найти на странице Параметры компиляции в TypeScript. Рассмотрим лишь основные из них.

Автоматическая перекомпиляция

Опция —watch , а также ее сокращенная версия -w автоматически перекомпилирует файлы typescript, если в них были внесены какие-либо изменения. Благодаря чему не надо при каждом малейшем изменении вручную вводить команду в консоль для перекомпиляции.

tsc -w app.ts

Версия ECMAScript

С помощью параметра –-target или его сокращенной версии –t можно задать версию стандарта JavaScript, в которую будет компилироваться код TypeScript. Этот параметр может принимать следующие значения: «ES3» (по умолчанию), «ES5», «ES6» / «ES2015», «ES7» / «ES2016», «ES2017», «ES2018», «ES2019», «ES2020» или «ESNext»:

tsc app.ts -t ES5

Удаление комментариев

По умолчанию в файлы javascript переходят все комментариии, которыми снабжен код в файлах TS. Удаление комментариев при компиляции осуществляется с помощью параметра –-removeComments :

tsc app.ts --removeComments

Установка каталога

С помощью параметра —outDir можно задать папку для хранения скомпилированных файлов js:

tsc --outDir D:\ts\js app.ts

В данном случае скомпилированный файл app.js окажется в папке D:\ts\js

Объединение файлов

Если у нас несколько файлов TS, то с помощью параметра —outFile их можно объединить в один файл js:

tsc --outFile output.js app.ts hello.ts

Здесь файлы app.ts и hello.ts скомпилируются в один файл output.js

Тип модуля

С помощью параметра —module , либо -m можно указать тип модуля, который будет использоваться для компиляции. Эта опция может принимать следующие значения: «None», «CommonJS» (значение по умолчанию, если задана версия ECMAScript «ES3» или «ES5»), «AMD», «System», «UMD», «ES2015», «ES2020» и «ESNext».

tsc -m commonjs app.ts

Несколько параметров

Если надо задать несколько параметров, то они и их значения последовательно перечисляются через пробел.

tsc -t ES5 --outDir js -m commonjs app.ts

Вызов справки

И чтобы посмотреть все доступные параметры и справку по ним, можно воспользоваться параметром -h :

Компиляция

Если вы помните, то препроцессоры предлагают нам свой вариант синтаксиса для некоторых или всех конструкций языка, надстройкой над которым они являются. И CSS-препроцессоры не исключение.

Для того, чтобы браузер понимал код, написанный с использованием синтаксических конструкций препроцессора, его нужно компилировать в понятный для него язык. Таким языком для браузера, как не сложно догадаться, является CSS.

Существует несколько вариантов того, как можно перейти от Less к CSS.

Компиляция в браузере (less.js)

Наиболее простой способ использования CSS-препроцессора, но в тоже время малопопулярный. Альтернативные решения удобнее и предоставляют наиболее интересный функционал. Применяется на этапе разработки или отладки проекта, когда важен результат компиляции, а не её скорость.

Основан на идее подключения стилей с расширением .less к документу, используя стандартный тег , но с изменённым атрибутом rel . А также осуществляется подключение файла библиотеки.

link rel="stylesheet/less" href=". "> script src="less.min.js"> script> 

После компиляции скрипт проводит инъекцию полученного CSS-кода в секцию head документа посредством тега .

Способ не желателен к применению на так называемом «продакшене» в виду того, что имеет серьёзные проблемы со скоростью и сильно зависит от производительности устройства, а также скорости интернет-соединения. Помимо этого увеличивается объем загружаемых данных, так как браузеру пользователя приходится загружать less-файлы и файл библиотеки. Только после полной загрузки необходимых ресурсов начинается процесс компиляции less-кода в CSS.

Пример 1.4.1

Пример демонстрирует использование CSS-препроцессора Less прямиком в браузере, без предварительной компиляции CSS.

На изображении показана структура документа, подключённые файлы стилей, файл библиотеки, а также произведённая инъекция стилей в секцию head .

 html lang="en"> head> meta charset="UTF-8"> title>Demo Less title> link rel="stylesheet/less" href="less/_styles.less"> script src="less.min.js"> script> head> body> h1>Title h1> p>. p> body> html> 

Содержимое файла _styles.less :

body < background-color: #f5f5f5; color: #777; > 

Пример 1.4.2

Если в файле стилей допущена ошибка, то компилятор отобразит сообщение, в котором будет присутствовать следующая информация:

• Код ошибки;
• Описание ошибки;
• Название файла, в котором обнаружена ошибка;
• Номер строки и столбца, где допущена ошибка;
• Код, порождающий ошибку;

Такой подробный отчёт позволит разработчику в удобной форме получить полную информацию о допущенной ошибке и в максимально короткие сроки приступить к её устранению.

Пример 1.4.3

При необходимости доступны некоторые настройки для управления преобразованиями, происходящими в препроцессоре и, как следствие, получаемыми данными на выходе. Причём настройки можно менять, используя JavaScript, так и с помощью атрибутов data у тега link .

В этом примере добавляется возможность автообновления страницы при изменении подключённого файла стилей. Для активации механизма слежения за изменением ресурсов, необходимо добавить к адресу страницы маркер #!watch . Теперь, когда вы будете изменять less-файлы в проекте, которые подключены к активной странице, будет происходить автоматическая компиляция этого файла.

. head> . script> less = < env: 'development' >; script> script src="less.min.js"> script> script>less.watch(); script> head> . 

Другие параметры настроек можно посмотреть в документации. Так как этот метод находится в статусе «не рекомендуется», то и подробно рассматривать его нет смысла.

Компиляция из командной строки (lessc)

Как мы уже хорошо знаем, препроцессор Less написан на JavaScript. А ещё лучше мы знаем, что лучший друг JavaScript теперь — Node.js. Отсюда вытекают новые возможности для работы в командной строке. И Less предлагает нам такой инструмент для работы в ней.

Работа из командной строки предполагает наличие установленного Node.js. Помимо этого, необходимо глобально установить пакет less — это можно сделать командой:

$ npm install -g less 

Рассмотрим синтаксис команд npm:

• npm — пакетный менеджер;
• i — сокращение от install , то есть «установить»;
• -g — флаг, который указывает на то, что пакет будет установлен глобально;
• less — имя устанавливаемого пакета;

Общение с консолью осуществляется на примитивном уровне. Бегло ознакомимся с основными доступными командами:

Компилирование файла с именем _styles.less без сохранения результата:

$ lessc _styles.less 

Компилирование файла _styles.less с сохранением результата в файл _main.css :

$ lessc _styles.less > _main.css 

Помимо двух базовых команд можно передавать параметры скрипту, в зависимости от которых будет выполняться то или иное действие с вашим кодом. Например, ниже показана передача параметра x , который говорит скрипту (компилятору), что на выходе пользователь ожидает увидеть минифицированный файл.

$ lessc -x _styles.less 

И здесь наступает один важный момент, который может вызвать недопонимание. Если вы компилируете файл без сохранения результатов, то можно использовать параметр x . Но если вы собираетесь сохранить скомпилированный CSS-код, то будьте добры использовать плагины для его минификации. Проще говоря, при таком раскладе параметр x не работает.

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

Допустим, что у пользователя установлен пакет для минификации css-файлов less-plugin-clean-css . Тогда пользователю будет доступен новый параметр —clean-css для передачи скрипту. Более детально о доступных плагинах и возможности их применения мы поговорим позднее.

Но и это ещё не все. Пользователю также доступна типичная для консольных утилит команда —help , которая расскажет обо всех доступных к использованию параметрах.

lessc --help lessc --h 

В случае, как и с компиляцией в браузере, этот метод не особо популярен, так как существуют другие, более интересные по возможностям.

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

Компиляция, используя системы сборки

Настал тот момент, когда все скучные способы компиляции пройдены, а впереди есть ещё, которые выглядят куда интереснее всех остальных, включая и этот. Но я не могу обойти стороной самый популярный и гибкий способ.

Сейчас, если вы пишете Open Source проект, то хорошим тоном будет автоматизировать всё, что возможно и имеет смысл. Это делается для того, чтобы другие разработчики могли использовать ваши наработки и не мучиться с подготовкой проекта к «употреблению». Помимо этого, автоматизация действий, будь то банальное переименование файла или компиляция файлов препроцессора, экономит время не только других разработчиков, но и ваше.

Система сборки — это инструмент для автоматической, гибкой и удобной сборки проектов из командной строки с использованием ранее обозначенных инструкций (задач).

Если попытаться упростить эту формулировку, то получится следующее:

Система сборки — это инструмент, который автоматически преобразует проект в соответствии с заранее написанными правилами.

Первым популярным сборщиком был Grunt, позднее появился Gulp и самыми молодыми сейчас являются Brunch и Broccoli. Так повелось, что Grunt и Gulp воюют на одном универсальном поприще, покрывая своим функционалом и доступными плагинами почти весь спектр задач. А вот Brunch сразу же обозначил себя как сборщик для фронтенда и слегка намекает, что первые двое ему не родня, да и он не такой, как они.

Для Grunt и Gulp доступно большое количество различных пакетов, которыми можно выполнять практически любые задачи: от простейшего переименования файлов до сборки крупных приложений. Причём у Grunt их намного больше. А вот Brunch и Broccoli таким похвастаться не могут, но все основные пакеты для фронтенд разработки доступны уже сейчас. Практически любой недостающий функционал можно добавить, написав свой пакет, и делается это довольно просто.

К счастью, настройка систем сборки — это не основная тема книги. Поэтому конкретно рассматривать каждый из сборщиков я не буду, а предложу посмотреть уже готовые конфигурационные файлы для компиляции Less в архиве, идущем вместе с книгой.

Приложения для компиляции

Вот он, самый простой и удобный способ для проектов, использующих препроцессоры, причём не только CSS-препроцессоры, но и JS и HTML.

Существуют такие приложения, которые позволяют управлять проектами без написания кода, использования командной строки и систем сборок. Они написаны для людей, желающих делать своё дело и не вникать в некоторые тонкости, хотя бы на начальном этапе своей карьеры.

Такие приложения имеют довольно обширный функционал и, как правило, умеют:

• Компилировать файлы различных препроцессоров (Less, Stylus, Jade, CoffeeScript и т.д.);
• Проверять файлы на ошибки и соответствие правилам (общим или проекта);
• Обрабатывать файлы (минификация, расстановка префиксов в CSS и т.д.);
• Автоматизировать некоторые часто используемые действия;
• Локальный сервер для тестирования проектов на этапе разработки;

Среди всех подобных приложений можно выделить следующие решения:

• Prepros
• CodeKit (только OS X)
• Mixture
• Koala

Ранее я использовал Prepros для своих локальных проектов, так как он предлагает наиболее интересный для меня функционал. Остальные решения также хороши, но мне больше всего приглянулся именно он.

Проекты Koala и Mixture более не обновляются и представлены здесь лишь в дань уважения.

Если вы не хотите писать конфигурационные файлы для Grunt, Gulp и им подобным системам сборки, то это ваш выбор.

Альтернативные методы

Существуют решения для отдельно взятых сред (редакторов, IDE и т.д.), позволяющие использовать CSS-препроцессоры. В некоторых IDE есть встроенные средства для использования препроцессоров, а в тех, где нет, в общем случае, можно установить необходимые плагины, добавляющие такую возможность. По этой ссылке приведён обширный список таких плагинов.

Если для использования препроцессора Less на сервере, построенном с применением Node.js, требуется лишь официальный пакет доступный в npm, то на других платформах необходимы специальные библиотеки, а иногда и несколько (привет Java). Такой подход обеспечивает обмен переменными между Less и использующим его языком, что позволяет добиться компиляции файлов, в зависимости от контекста действий пользователя в приложении.

Отладка

Отладка — это процесс обнаружения, локализации и исправления возникающих ошибок в работе приложения. В случае с CSS-препроцессором, приложением будут являться препроцессорные файлы, так как именно в них могут возникать ошибки или «неточности». И если с ошибками бороться нам поможет сам компилятор, то исправлять «неточности» будет сложнее, из-за некоторых особенностей препроцессоров.

Карта кода (Source Maps)

Во время разработки и после неё, скомпилированные файлы стилей и исходные файлы могут сильно различаться. Происходит это из-за компиляции и обработки файлов. Если в процессе компиляции происходит раскрытие конструкций, написанных на препроцессорном языке в «чистый» CSS-код, то на выходе получается, как правило, большее количество строк кода. Выражается это в том, что в инспекторе браузера у тега стилей элемента указан один номер строки, а на самом деле он совсем другой.

Пример 1.4.4

В этом примере представлен препроцессорный и скомпилированный файлы. Обратите внимание лишь на отличающееся количество строк, работу препроцессора и её результат на выходе.

Файл препроцессора:

// Variables @header-background: #181e21; @header-color: #fff; .global-header < position: relative; background-color: @header-background; color: @header-color; h1 < font-size: 44px; line-height: 50px; small < font-size: 24px; line-height: 36px; > > > 

Скомпилированный файл:

.global-header < position: relative; background-color: #181e21; color: #ffffff; > .global-header h1 < font-size: 44px; line-height: 50px; > .global-header h1 small < font-size: 24px; line-height: 36px; > 

Замечательно, с физикой проблемы разобрались. Для её решения на помощь спешит так называемая «карта кода». Явление это не уникальное и встретить его можно, например в Visual Studio 2012, правда там карта действительно похожа на карту, а тут информация, ориентированная лишь на браузер. Когда я говорю, что файл предназначен для браузера, то имею в виду, что понять его человеку будет практически невозможно:

< "version": 3, "sources": [ "_styles.less" ], "names": [], "mappings": "AAIA;EACE,kBAAA;EACA,yBAAA;EACA,cAAA;;AAHF,cAKE;EACE,eAAA;EACA,iBAAA;;AAPJ,cAKE,GAIE;EACE,eAAA;EACA,iBAAA", "file": "undefined" > 

Получить такую карту кода можно, добавив параметр —source-map при компиляции, выбрав соответствующие пакеты для системы сборки или изменив настройки программы.

Теперь обратите внимание на изображение окна браузера, в котором слева показан скомпилированный файл без карты кода, а справа — с ней.

В первом случае видно, что селектор объявлен на 6 строке CSS-файла, но так как мы работаем с исходниками в формате Less, то нам эта цифра ни о чём не говорит — у нас на 6-ой строке находится другой код.

Во втором случае, когда применяется карта кода, все становится на свои места и указывается не только правильный номер строки объявления селектора, но и файл её содержащий. Название файла будет полезно тогда, когда я расскажу вам про подключение файлов друг к другу.

results matching » «

No results matching » «

Компиляция JS и CSS (Mix)

Laravel Mix – это пакет, разработанный создателем Laracasts Джеффри Уэй, предлагает гибкий API для определения шагов сборки Webpack для вашего приложения с использованием нескольких распространенных препроцессоров CSS и JavaScript.

Другими словами, Mix упрощает компиляцию и минимизацию файлов CSS и JavaScript вашего приложения. Посредством простой цепочки методов вы можете гибко определять свой сценарий по сборки исходников. Например:

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

Если вы однажды были сбиты с толку и ошеломлены, начав работу с Webpack и компиляцией ресурсов, то вам понравится Laravel Mix. Однако от вас не требуется использовать его при разработке приложения; вы можете использовать любой желаемый инструмент сборки, или даже не использовать его вовсе. Справедливо и обратное: вы можете использовать Laravel Mix без привязки вашего приложения к фреймворку Laravel.

Если вам нужно начать разработку приложения с помощью Laravel и Tailwind CSS, ознакомьтесь с одним из наших стартовых комплектов приложения.

Установка и настройка

Установка Node

Перед запуском Mix вы должны сначала убедиться, что на вашем компьютере установлены Node.js и NPM:

node -v npm -v 

Вы можете легко установить последнюю версию Node и NPM с помощью простых графических установщиков с официального веб-сайта Node. Или, если вы используете Laravel Sail, вы можете вызывать Node и NPM через Sail:

./sail node -v ./sail npm -v 

Установка Laravel Mix

Единственный оставшийся шаг – установить Laravel Mix. В свежей установке Laravel вы найдете файл package.json в вашем корневом каталоге. Файл package.json по умолчанию уже включает в себя все, что вам нужно для начала работы с Laravel Mix. Думайте об этом файле как о вашем файле composer.json , за исключением того, что он определяет зависимости Node вместо зависимостей PHP. Вы можете установить зависимости, на которые он ссылается, запустив:

npm install 

Запуск Mix

Mix – это слой конфигурации поверх Webpack, поэтому для запуска задач Mix вам нужно только выполнить один из сценариев NPM, который содержится в файле package.json по умолчанию. Когда вы запускаете сценарии dev или production , все исходники CSS и JavaScript вашего приложения будут скомпилированы и помещены в каталог public приложения:

// Запустить все задачи Mix . npm run dev // Запустить все задачи Mix и минифицировать на выходе . npm run prod 

Наблюдение за изменениями исходников

Команда npm run watch продолжит работу в консоли и будет следить за изменениями во всех соответствующих файлах CSS и JavaScript. Webpack автоматически перекомпилирует ваши исходники, когда обнаружит изменение в одном из этих файлов:

npm run watch 

Webpack может не обнаруживать изменения ваших файлов в определенных локальных средах разработки. Если это наблюдается в вашей системе, рассмотрите возможность использования команды watch-poll :

npm run watch-poll 

Работа с таблицами стилей

Файл webpack.mix.js вашего приложения является отправной точкой для компиляции всех ресурсов. Думайте об этом как о легкой конфигурационной обертке вокруг Webpack. Задачи Mix могут быть объединены в цепочку, чтобы точно определить, как должны компилироваться ваши ресурсы.

Tailwind CSS

Tailwind CSS – это современный, низкоутилитарный фреймворк для создания удивительных сайтов, не покидая HTML-разметку. Давайте рассмотрим, как начать использовать его в проекте Laravel совместно с Mix. Во-первых, мы должны установить Tailwind с помощью NPM и сгенерировать наш конфигурационный файл Tailwind:

npm install npm install -D tailwindcss npx tailwindcss init 

Команда init сгенерирует файл tailwind.config.js . Раздел content этого файла позволяет вам настроить пути ко всем вашим шаблонам HTML, компонентам JavaScript и любым другим исходным файлам, содержащим имена классов Tailwind, так что любые классы CSS, которые не используются в этих файлах, будут удалены из вашей производственной сборки CSS:

content: [ './storage/framework/views/*.php', './resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue', ] 

Затем вы должны добавить каждый из «слоев» Tailwind в файл resources/css/app.css вашего приложения:

@tailwind base; @tailwind components; @tailwind utilities; 

После того как вы указали необходимые слои Tailwind, необходимо обновить файл webpack.mix.js вашего приложения, чтобы скомпилировать ваш CSS, использующий Tailwind:

mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('tailwindcss'), ]); 

Наконец, вы должны указать свою таблицу стилей в основном шаблоне макета вашего приложения. Многие разработчики приложений предпочитают хранить этот шаблон в resources/views/layouts/app.blade.php . Кроме того, убедитесь, что вы добавили метатег viewport , если он еще не присутствует:

head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> link href="/css/app.css" rel="stylesheet"> head> 

PostCSS

PostCSS – мощный инструмент для преобразования вашего CSS, включен в Laravel Mix из коробки. По умолчанию Mix использует популярный плагин Autoprefixer для автоматического применения всех необходимых префиксов CSS3. Однако вы можете добавлять любые дополнительные плагины, подходящие для вашего приложения.

Сначала установите нужный плагин через NPM и включите его в свой массив плагинов при вызове метода postCss Mix. Метод postCss принимает путь к вашему файлу CSS в качестве первого аргумента, а в качестве второго аргумента – каталог, в который следует поместить скомпилированный файл:

mix.postCss('resources/css/app.css', 'public/css', [ require('postcss-custom-properties') ]); 

Или вы можете выполнить postCss без дополнительных плагинов, чтобы получить простую компиляцию и минификацию CSS:

mix.postCss('resources/css/app.css', 'public/css'); 

Sass

Метод sass позволяет вам скомпилировать Sass в CSS, понятный веб-браузерам. Метод sass принимает путь к вашему файлу Sass в качестве своего первого аргумента и каталог, в который должен быть помещен скомпилированный файл, в качестве второго аргумента:

mix.sass('resources/sass/app.scss', 'public/css'); 

Вы можете скомпилировать несколько файлов Sass в отдельные файлы CSS и даже настроить каталог назначения результирующего CSS, вызывая метод sass несколько раз:

mix.sass('resources/sass/app.sass', 'public/css') .sass('resources/sass/admin.sass', 'public/css/admin'); 

Обработка URL

Поскольку Laravel Mix построен поверх Webpack, важно понимать несколько концепций Webpack. Для компиляции CSS Webpack перезапишет и оптимизирует любые вызовы url() в ваших таблицах стилей. Хотя поначалу это может показаться странным, это невероятно мощная функциональность. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL-адрес изображения:

.example < background: url('../images/example.png'); > 

Абсолютные пути для любого заданного url() будут исключены из перезаписи URL. Например, url(‘/images/thing.png’) или url(‘http://example.com/images/thing.png’) не будут изменены.

По умолчанию Laravel Mix и Webpack найдут example.png , скопируют его в вашу папку public/images , а затем перепишут url() в созданной вами таблице стилей. Таким образом, ваш скомпилированный CSS будет:

.example < background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e); >

Какой бы полезной ни была эта функция, возможно, что ваша существующая структура папок уже настроена так, как вам нравится. В этом случае вы можете отключить перезапись url() следующим образом:

mix.sass('resources/sass/app.scss', 'public/css').options(< processCssUrls: false >); 

После добавления этой записи в ваш файл webpack.mix.js , Mix больше не будет сопоставлять какой-либо url() или копировать ресурсы в ваш публичный каталог. Другими словами, скомпилированный CSS будет выглядеть так же, как вы его изначально указали:

.example < background: url("../images/thing.png"); > 

Source maps CSS

Хотя по умолчанию они отключены, source maps могут быть активированы путем вызова метода mix.sourceMaps() в вашем файле webpack.mix.js . Хоть это и связано с затратами на компиляцию / производительность, но, в свою очередь, предоставит дополнительную отладочную информацию в инструментах разработчика вашего браузера при использовании скомпилированных ресурсов:

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

Сопоставление стилей исходников

Webpack предлагает множество вариантов сопоставления стилей исходников. По умолчанию сопоставления стилей исходников Mix установлено как eval-source-map , что обеспечивает быстрое по времени перестроение. Если вы хотите изменить сопоставление, вы можете сделать это с помощью метода sourceMaps :

let productionSourceMaps = false; mix.js('resources/js/app.js', 'public/js') .sourceMaps(productionSourceMaps, 'source-map'); 

Работа с JavaScript

Mix содержит несколько функций, которые помогут вам работать с вашими файлами JavaScript, например, компиляция современного ECMAScript, объединение модулей, минификация и объединение простых файлов JavaScript. Более того, все это работает без проблем, не требуя ни унции специального конфигурирования:

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

Теперь, с помощью одной строчки кода вы можете воспользоваться следующими преимуществами:

• синтаксис современного EcmaScript.
• модули
• минификация для эксплуатационного режима.

Vue

Mix автоматически установит плагины Babel, необходимые для поддержки компиляции однофайловых компонентов Vue при использовании метода vue . Никакой дополнительной настройки не требуется:

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

После того как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:

head> script src="/js/app.js"> script> head> 

React

Mix автоматически установит плагины Babel, необходимые для поддержки React. Для начала добавьте вызов метода react :

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

За кулисами Mix загрузит и включит соответствующий плагин babel-preset-react Babel. После того как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:

head> script src="/js/app.js"> script> head> 

Извлечение сторонних библиотек

Одним из потенциальных недостатков объединения всего кода JavaScript для конкретного приложения со сторонними библиотеками, такими как React и Vue, является то, что это затрудняет долгосрочное кеширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все сторонние библиотеки, даже если они не изменились.

Если вы намереваетесь часто обновлять JavaScript своего приложения, вам следует рассмотреть возможность извлечения всех сторонних библиотек в их собственный файл. Таким образом, изменение кода вашего приложения не повлияет на кеширование вашего большого файла vendor.js . Метод extract Mix делает это проще простого:

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

Метод extract принимает массив всех библиотек или модулей, которые вы хотите извлечь в файл vendor.js . Используя приведенный выше фрагмент в качестве примера, Mix сгенерирует следующие файлы:

• public/js/manifest.js : The Webpack manifest runtime
• public/js/vendor.js : Your vendor libraries
• public/js/app.js : Your application code

Чтобы избежать ошибок JavaScript, обязательно загружайте эти файлы в правильном порядке:

script src="/js/manifest.js"> script> script src="/js/vendor.js"> script> script src="/js/app.js"> script> 

Пользовательская конфигурация Webpack

Иногда требуется дополнительные изменения базовой конфигурации Webpack. Например, у вас может быть специальный загрузчик или плагин, на который нужно сослаться.

Mix содержит полезный метод webpackConfig , который позволяет вам объединить небольшие переопределения конфигурации Webpack. Это особенно привлекательный вариант, поскольку он не требует от вас копирования и поддержки вашей собственной копии файла webpack.config.js . Метод webpackConfig принимает объект, содержащий любую специфичную для Webpack конфигурацию, которую вы хотите применить.

mix.webpackConfig(< resolve: < modules: [ path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js') ] > >); 

Версионирование / очистка кеша

Многие разработчики дополняют имена своих скомпилированных ресурсов меткой времени или уникальным токеном, чтобы заставить браузеры загружать свежие ресурсы вместо устаревших копий кода. Mix может автоматически обработать это за вас, используя метод version .

Метод version добавит уникальный хеш к именам файлов всех скомпилированных исходников, что сделает очистку кеша более удобной:

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

После создания файла версионирования вы не узнаете его точное имя. Итак, вы должны использовать глобальную функцию Laravel mix в вашем шаблоне для загрузки хэшированного ресурса. Глобальная функция mix фреймворка Laravel автоматически определит текущее имя хэшированного файла:

script src=">"> script> 

Поскольку файлы с поддержкой версий обычно нужны только в эксплуатационном окружении, вы можете указать, чтобы процесс управления версиями выполнялся только во время запуска npm run prod :

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

Корректировка базовых URL-адресов с помощью Mix

Если ваши скомпилированные ресурсы Mix развернуты в CDN отдельно от вашего приложения, то вам нужно будет изменить базовый URL-адрес, сгенерированный функцией mix . Вы можете сделать это, добавив параметр mix_url в конфигурационный файл config/app.php вашего приложения:

'mix_url' => env('MIX_ASSET_URL', null) 

После указания URL-адреса, функция mix будет подставлять указанный префикс при создании URL-адресов для ресурсов:

https://cdn.example.com/js/app.js?id=1964becbdd96414518cd 

Обновление контента с помощью Browsersync

BrowserSync может автоматически отслеживать изменения в ваших файлах и вносить изменения в браузер, не требуя обновления страницы вручную. Вы можете включить эту поддержку, вызвав метод mix.browserSync() :

mix.browserSync('laravel.test'); 

Параметры BrowserSync можно указать путем передачи объекта JavaScript в метод browserSync :

mix.browserSync(< proxy: 'laravel.test' >); 

Затем запустите сервер разработки Webpack с помощью команды npm run watch . Теперь, когда вы изменяете скрипт или файл PHP, вы можете наблюдать, как браузер мгновенно обновляет страницу, чтобы отразить ваши изменения.

Переменные окружения

Вы можете использовать переменные окружения в своем webpack.mix.js , добавив к одной из переменных префикс MIX_ в вашем файле .env :

MIX_SENTRY_DSN_PUBLIC=http://example.com 

После того как переменная была определена в вашем файле .env , вы можете получить к ней доступ через объект process.env . Однако, вам нужно будет перезапустить задание, если значение переменной среды изменится во время ее выполнения:

process.env.MIX_SENTRY_DSN_PUBLIC 

Уведомления

Когда доступно, Mix будет автоматически отображать уведомления ОС при компиляции, давая вам мгновенную информацию о том, была ли компиляция успешной или нет. Однако, могут быть случаи, когда вы предпочтете отключить эти уведомления. Одним из таких примеров может быть запуск Mix на вашем рабочем сервере. Уведомления можно отключить с помощью метода disableNotifications :

mix.disableNotifications(); 

Русскоязычное комьюнити

• Группа в VK
• Телеграм LaravelRUS
• Телеграм Laravel для новичков
• Телеграм LaravelPro

Обучающие ресурсы

• Laracasts
• Codecourse
• Курс Дмитрия Елисеева
• Adam Wathan

Блоги разработчиков

• Laravel News
• Freek Van der Herten
• Brent Roose
• Marcel Pociot