Модулността е функция, която днес се радва на почти всеки разработчик на JavaScript.
Модулността се отнася до разделянето на вашия код на множество файлове и импортирането им според изискванията. Но тази статия не е за модулност и модули.
Обсъждаме Bundlers, за да бъдем по-конкретни как работи един bundler.
С прости думи пакетните програми генерират графика на зависимостта и събират всички модули в един единствен файл. Пакетите могат да се използват за минимизиране, оптимизиране, транспилиране на ECMAScript към всеки общ js.
Достатъчно въведение. Да започнем и да се учим в процеса.
Това ще бъде нашата структура на папките за този пример.
Ако начертаем графика на зависимостта за тези модули
Това ще бъде резултатът, при който entry.js зависи от SUM.js, а SUM.js зависи от Num1.js и Num2.js.
Да започваме
И така, как ще приложим групирането
1. Прочетете съдържанието на файла 📄.
2. Генерирайте AST (абстрактно синтактично дърво).
3. Обходете дървото и потърсете importDeclarations и генерирайте графика на зависимост от тях.
4. С помощта на графиката на зависимости генерирайте кода
И така, тук разгледахме основната идея на процеса, а сега нека създадем групов код.
Целият този код ще бъде в Bundler.js
Стъпка 1: засега ще се съсредоточим върху четенето на съдържанието на файл и ще генерираме AST форма на това съдържание и ще създадем активи (възли) за графика на зависимостите.
Дефинирайте функция, която генерира актив за нас, нека я наречем „AssetBuilder“
Всичко, което правим тук, е да четем съдържанието на файла, чието име на файл е предадено в аргументи, след което анализираме кода на потребителя до AST 🌳. След това обикаляме дървото, за да съберем източника на зависимости, от които зависи текущият файл, и накрая генерираме общ js код. Тази функция ще върне обект, съдържащ стойности
ID: за уникална идентификация на актива
Име на файл: Име на файла, чийто актив е създаден
Зависимости: масив от източници на зависимости (относителен файлов път на зависимостта)
Код: MultiBrowser код, който е преведен от кода на потребителя.
Ето как ще изглежда един актив.
Сега можем да изградим нашите активи, време е да генерираме графика.
И така, както видяхме как модулите зависят един от друг в (Фигура 6) по-горе и в нашия актив, ние носим свойство „зависимости“, които носят източника на неговите модули, от които зависи.
Така че, използвайки това свойство „зависимости“, можем да генерираме връзка между различни активи.
Ние използваме опашка за внедряване на дърво. Функциите „CreateGraph“ приемат входна точка (главен файл), наречена „entry“. Функцията генерира актив от файл, добавя го в опашката, чете неговите зависимости от абсолютния път и започва да създава техните активи. Това е като генериране на графика на зависимост на ниво.
Можете да забележите, че към актива е добавено ново свойство, наречено „mapping“, което съдържа двойка ключова стойност (източник на зависимост, идентификатор на актив). Това ще ви бъде полезно по-късно.
Ето как изглежда графиката на зависимостта във формата на масив
Сега вече разполагаме с нашата графика, време е ⌚ да ги обединим.
Функцията Bundler връща низ. Този низ съдържа целия код на модулите. Този низ от код ще бъде съхранен във файл.
Низът носи код на самоизвикваща се функция с аргумент, наречен „модули“ (низ от обект с код на всеки модул).
Забележка: всеки модул може да носи своя собствена променлива с локален обхват, поради което всеки модул е написан под формата на функция, връщаща техния експорт.
Напишете върнатия кодов низ във файл (тук output.js)
Ето как изглежда крайният изход на bundler.js. Всички модули са обобщени в един файл и кодът е транспилиран в общ JavaScript.
Готови сме 🥳🎊
Всичко, което остава, е да копирате този код и да го поставите в конзолата и да натиснете enter ↩️.
Но ах!! ние сме разработчици, ние правим неща по наш собствен начин (начинът на кода), така че нека изпълним команда за изпълнение на файла Output.js.
Ще използваме функцията exec на модула „child process“ за повече посещения: https://nodejs.org/docs/latest-v15.x/api/child_process.html
Сега всичко, което трябва да направим, е да стартираме bundler.js
Страхотно, получихме резултат 😎🥳🎊
