РУКОВОДСТВО ДЛЯ НАЧИНАЮЩИХ ПО МОДУЛЯМ JAVASCRIPT И WEBPACK

Представьте, что вы только что прибыли в Лагос в Нигерии и хотите добраться до отеля из аэропорта, чтобы расслабиться после долгой поездки. Сейчас Лагос — большой город, состоящий из множества других районов. Чтобы добраться до отеля, вам нужно сначала определить город, в котором находится отель, а также улицу и номер дома отеля. Если бы Лагос не был разделен на разные части, состоящие из городов, улиц и нумерации зданий, было бы довольно сложно перемещаться по городу. Эта структура является МОДУЛЬНОЙ по своей природе (т.е. состоит из различных частей, которые могут быть соединены для создания чего-либо).

Модули JavaScript — это стиль программирования, основанный на концепции модульного программирования. Модульное программирование — это концепция, которая, если ее понять, может действительно облегчить жизнь разработчикам. Webpack — это инструмент, который помогает вам управлять модулями JavaScript и объединяет эти модули в один файл JavaScript. Базовое понимание модулей является обязательным условием для понимания того, что такое веб-пакет и что он может сделать для вас как разработчика, и это то, что я намереваюсь сделать в этой статье (дать вам базовое введение в модули JavaScript). Итак, приступим!

Модульное программирование — это концепция, согласно которой вы разбиваете свой код на несколько частей (известных как МОДУЛИ), которые можно использовать в другой части вашего кода. Таким образом, вместо одного большого файла JavaScript, содержащего весь код для вашего проекта, у вас есть фрагменты (модули) кода, которые играют разные роли в вашем проекте и могут быть ИМПОРТИРОВАНЫ в другие модули, которым они нужны для работы. Итак, идея состоит в том, что вы импортируете модули в другие модули, которые от них зависят, а также делаете модули экспортируемыми, чтобы их можно было импортировать в любые модули, которые в них нуждаются. Ключевое слово здесь ИМПОРТ и ЭКСПОРТ.

Теперь, что такое модули JavaScript?

Модули JavaScript — это просто разные фрагменты кода JavaScript, которые выполняют разные функции и при необходимости могут быть импортированы в другие модули.

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

ПОЧЕМУ МНЕ НУЖНО НАПИСАТЬ МОДУЛЬНЫЕ КОДЫ?

Модульное программирование делает отладку менее напряженной.
Модульное программирование помогает создавать повторно используемые фрагменты кода, которые можно использовать в будущих проектах без необходимости повторного написания этого кода или копирования его из предыдущего проекта.
Модульное программирование делает рефакторинг кода очень простым! (просто представьте рефакторинг одного JS-файла с кодовой базой выше 1000 LOC!!!!)
Модульное программирование избавляет вас от беспокойства о области видимости функции и пространстве имен. Потому что имена и область действия функций становятся уникальными для модуля, к которому они принадлежат.

Это основы того, что такое модульное программирование и JavaScript и что они могут сделать для вас.

ВЕБ-ПАК

Теперь у вас есть общее представление о том, что такое модули JavaScript и почему они важны, но как вы управляете этими модулями? Вот где на сцену выходит webpack.

webpack по своей сути является просто сборщиком модулей.
Объединение модулей включает в себя веб-пакет, который получает все ваши модули JavaScript и помещает их в один файл JavaScript (это процесс объединения!).

Webpack делает это, создавая граф зависимостей для вашего проекта. График зависимостей отслеживает модули вашего проекта (разные части) и их различные зависимости (другая часть кода вашего проекта) и объединяет их в один файл (обычно с именем bundle.js). Таким образом, webpack может легко отслеживать модули вашего проекта и управлять ими для вас.

webpack имеет несколько других интересных функций, помимо связывания ваших модулей JavaScript. Webpack также помогает вам использовать новейшие функции JavaScript, даже если они не поддерживаются браузерами (это достигается за счет интеграции загрузчиков babel в файл конфигурации webpack). Вот что такое веб-пакет, но для использования веб-пакета в проекте вам необходимо понимать некоторые основные концепции веб-пакета.

ОСНОВНЫЕ ПОНЯТИЯ WEBPACK

Это не заменяет исходные основные концепции веб-пакета, которые можно найти в документации веб-пакета. Так что не забудьте проверить это.

ВХОД

Вход — это просто точка (первый модуль JavaScript), где webpack начинает связывать ваши модули. Рассматривайте вход как главную дверь в дом, в доме есть и другие двери, но чтобы войти в дом, вы должны использовать главную дверь.

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

ВЫХОД

Выход — это путь к файлу, в который webpack закидывает все связанные модули.

Было бы хорошо, если бы вы знали, что связанные модули — это то, что обслуживается браузером, и это то, что вы должны добавить в свой html-файл.

bundle.js должен быть включен в тег script вашего html-файла.

ПОГРУЗЧИКИ

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

загрузчики сообщают веб-пакету, как обрабатывать или взаимодействовать с файлами, которые не являются JavaScript. Webpack построен на JavaScript и понимает только JavaScript, но наш проект содержит другие файлы, не являющиеся JavaScript! загрузчики существуют, чтобы решить эту проблему. Ниже приведен список того, что загрузчики могут помочь вам сделать с веб-пакетом;

loaders преобразует файлы, которые не являются JavaScript, в JavaScript.
загрузчики (style-loaders) позволяют вам импортировать ваши стили css в ваш файл JavaScript, что обычно невозможно.
загрузчики также помогают вам относиться к этим файлам JavaScript как к модулям. css-loaders позволяет вам писать модульные css для частей вашего html файла. Теперь вместо одного большого файла css вы можете иметь несколько модульных файлов css для определенных частей вашего html-кода, а также вместо того, чтобы связывать ссылку css с вашим html-файлом, загрузчики стилей позволяют импортировать эти стили в ваш основной. js (файл входа webpack).
Загрузчики также позволяют использовать обновленные языковые функции, которые не поддерживаются в веб-браузерах. Babel-loaders дает вам свободу использовать ключевое слово импорта и экспорта ES6 (которое поддерживает модульное программирование в JavaScript), которое еще не поддерживается в старой версии браузера, такой как IE, chrome версии 50 ниже.

ПЛАГИНЫ

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

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

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