Привет, друзья!
Вам когда-нибудь хотелось узнать, как работают сборщики модулей (module bundlers) JavaScript типа Webpack или Parcel, что называется, под капотом. Если хотелось, тогда эта статья для вас.
В данном туториале мы разработаем простой сборщик модулей на Node.js, который будет компилировать все модули приложения в один минифицированный файл с кодом, соответствующим стандарту ES5.
Введение
Как правило, сборщики компилируют небольшие части кода в один большой файл, который доставляется в браузер для выполнения. Эти небольшие части кода - просто JS-файлы, зависимости между которыми представлены в виде системы модулей.
Сборщики используют концепцию входного (entry) файла. Вместо того, чтобы подключать несколько скриптов в разметке для их выполнения браузером, мы сообщаем сборщику о том, какой файл является входной точкой (entrypoint) приложения, т.е. о том, какой файл является главным или основным файлом приложения. В этом файле происходит формирование (bootstrap) кода всего приложения.
Сборщик начинает с основного файла и пытается определить, от каких файлов он зависит. Затем он пытается "понять", на каких файлах основаны зависимые файлы. Так продолжается до тех пор, пока сборщик не вычислит все модули приложения, а также связи между ними. Данный процесс называется формированием графа зависимостей (dependency graph).
Мы создадим граф зависимостей и используем его для упаковки (package) всех модулей в одну сборку (bundle).
Обратите внимание: наш сборщик будет очень простым. Это означает, что при его разработке мы оставим без внимания такие важные вещи, как предотвращение циклических зависимостей (cyclic dependencies), кеширование экспорта модулей, однократный разбор (parsing) каждого модуля и т.д.