Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>HTML поддерживает два способа работы с JavaScript. Первый - код добавляется прямо на страницу и второй - код загружается из файла, указанного в теге <script>.</p>

2 <h2>Содержание</h2>

3 <ul><li><a>Инлайновые скрипты</a></li>

4 <li><a>Код в файлах</a></li>

5 <li><a>Модули в браузере</a></li>

6 <li><a>Сборщики фронтенда</a></li>

7 <li><a>Webpack</a></li>

8 </ul><h2>Инлайновые скрипты</h2>

9 <p>Первый способ:</p>

10 <p>Он работает только в самых простых ситуациях. Иногда им пользуются для добавления небольших интерактивных элементов - например, автокомплитов и переключателей табов.</p>

11 <h2>Код в файлах</h2>

12 <p>Современный фронтенд вышел далеко за пределы этих задач. Количество JavaScript-кода во многих проектах достигает десятков и сотен тысяч строк кода. Такую массу кода физически невозможно поддерживать внутри HTML. Потому он располагается в отдельных файлах, которых может быть довольно много. Для их подключения используется второй способ:</p>

13 <p>Тег <script> был добавлен в HTML очень давно, задолго до появления современной версии языка с модулями. В те времена не существовало Node.js, пакетного менеджера и понятия "зависимости" (dependencies). Весь код писался в одном файле. Даже если файлов было несколько, они никак не были связаны друг с другом. Если попытаться использовать модули вместе с обычным тегом <script>, то браузер выдаст ошибку:</p>

14 <p>Uncaught SyntaxError: Cannot use import statement outside a module</p>

15 <p>В теории, код можно писать и без использования системы модулей, но этот способ невероятно трудозатратный и основывается на том, что все определения в коде глобальны (а значит, можно легко что-нибудь сломать, перетерев существующие определения). Придётся руками указывать все существующие файлы и загружать их в HTML, причем в строго определённом порядке. Подобное сейчас встречается только на сайтах, где фронтенд - это jquery с небольшим числом интерактивных элементов.</p>

16 <p>Отсутствие модулей делает нормальную разработку невозможной. Нельзя работать с зависимостями, нельзя написать тесты, статический анализ кода отсутствует (невозможны переходы по определениям, подсказки).</p>

17 <h2>Модули в браузере</h2>

18 <p>Проблема отсутствия модулей в браузере настолько важная, что в HTML5 ввели поддержку JavaScript-модулей. Достаточно в теге <script> добавить type="module", как браузер начинает их понимать и загружать. Модули понимают практически все современные браузеры.</p>

19 <p>В HTML:</p>

20 <p>В JavaScript:</p>

21 <p>Модули в браузере кардинально всё меняют и позволяют работать с JavaScript так, как это нужно, если бы не одно серьёзное "но". Система модулей в браузере не умеет работать с зависимостями. Если мы решим установить, например, lodash, то попытка его импортировать завершится с ошибкой. Решить эту проблему на уровне браузеров невозможно. Браузер ничего не знает про файловую систему и того, что там происходит.</p>

22 Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".<h2>Сборщики фронтенда</h2>

23 <p>Эти проблемы полностью решают системы сборки. Кроме загрузки файлов, они решают множество других не менее важных задач. Фронтенд-разработка сильно опирается на различные пре- и пост-процессоры. Например, для современного JavaScript (и TypeScript) и многих фреймворков нужен Babel, который получает на вход исходный код проекта, преобразует его в код понятный браузеру. Только после этого его можно отдавать клиенту.</p>

24 <p>То же самое касается CSS. Всё больше разработчиков используют SASS, который нужно транслировать в чистый CSS.</p>

25 <p>Кроме этих задач, сборщики занимаются следующим:</p>

26 <ul><li>Предоставляют единую команду для полной сборки фронтенда, включая все его части</li>

27 <li>Автоматически пересобирают фронтенд во время разработки. Делают это очень быстро, благодаря использованию инкрементальной сборки (собирают только то, что поменялось)</li>

28 <li>Обеспечивают производительность. Минифицируют и сжимают код (в том числе, удаляя неиспользуемый). Разбивают его максимально удобным для кеширования способом</li>

29 <li>Выполняют любые преобразования, например, TypeScript => JavaScript. Позволяют подключать пре- и пост-процессоры, настроить порядок их применения к выбранным файлам</li>

30 </ul><p>Если выполнять эти задачи вручную, то подготовка кода к запуску в браузере станет занимать больше времени, чем сама разработка.</p>

31 <h2>Webpack</h2>

32 <p>Одним из первых сборщиков фронтенда стал Webpack. Сейчас он стандарт де-факто в среде фронтенда, хотя существуют и другие решения. Общий принцип работы вебпака такой: в проекте устанавливается сам вебпак и описывается его конфигурация. Эта конфигурация содержит все правила сборки: какие файлы брать, какие обработчики к ним применять и куда складывать результат. На выходе вебпак формирует файл или набор файлов, готовых для загрузки в браузер. Дальше он не участвует, использование этих файлов - задача программиста.</p>

33 <p>Webpack поставляется как npm-библиотека и устанавливается в проект, обычно, в dev-зависимости, а для работы удобно использовать cli-утилиту:</p>

34 <p>Теперь можно инициализировать новый вебпак-проект, который автоматически создаст все необходимые файлы и конфигурацию одной командой:</p>

35 <p>Она предложит перезаписать<em>package.json</em>, добавит в проект несколько зависимостей, создаст HTML и JS-файлы, а также создаст конфигурационный файл. Запуск этой же команды без флага --force откроет интерактивный режим, где можно более тонко настроить будущее приложение.</p>

36 <p>Проект готов и теперь его можно запустить:</p>

37 <p>Эта команда соберёт приложение в режиме разработки, откроет браузер и отобразит содержимое HTML-файла, а в консоль выведется сообщение из<em>src/index.js</em>.</p>

38 <p>Конфигурационный файл<em>webpack.config.js</em>будет содержать несколько плагинов, необходимых для работы с HTML. Всё готово, чтобы написать своё первое фронтенд-приложение, используя Webpack!</p>

39 <p>Лучший способ продолжить с ним работу - это читать<a>официальную документацию</a>и изучить<a>Webpack Boilerplate</a>, созданный Хекслетом.</p>