Компиляция - это основной процесс преобразования вашего кода в машинно-понятный код. Большинству языков нужен соответствующий компилятор. На этом занятии мы узнаем об Angular Compiler. мы также узнаем о различиях между файлами .d.ts и .ts и, наконец, узнаем о возможностях компилятора, которые он предлагает. Итак, начнем:

Что такое Angular Compiler?
Основная задача Angular Compiler - преобразовать декларативный код, который мы пишем, в императивный код, понятный браузеру. По сути, в angular мы создаем компоненты, привязываем к ним данные и пишем много декларативного синтаксиса, но по умолчанию он не понимается браузером, нам нужно заставить их понять, преобразовав его. Для этого Angular использует два типа компиляторов:
1. Компиляция точно в срок (JIT)
2. Компиляция с опережением времени (AOT).

JIT (Just In Time)
Just in time компилятор используется для режима разработки. Когда мы пишем код angular, мы не только пишем синтаксис машинописного текста, но и интегрируем его с angular ex. мы добавляем декораторы к классам, чтобы их можно было идентифицировать как угловую особенность. Теперь, когда мы создаем это приложение с помощью JIT-компилятора, мы загружаем этот код в TypeScript Compiler, который в конце преобразует его в Java-скрипт. Теперь декораторы, написанные в коде angular, после компиляции напрямую включаются в файлы javascript. Когда эти декораторы запускаются в браузере, они вызывают компилятор angular, и выполняется время выполнения.

AOT (опережая время)
Это еще один метод компиляции, в котором для компиляции кода используется Angular Compiler вместо компилятора машинописного текста. Этот компилятор также делает то же самое, что и компилятор Typescript, но он предварительно компилирует декораторы angular и функции, которые мы написали, чтобы мы могли снизить затраты на его компиляцию во время выполнения.

Как работает компилятор Angular?

Как показано на диаграмме выше, компилятор Typescript выполняет 3 важных шага для компиляции кода машинописного текста в код javascript.
1. Создание программы
2. Проверка типа
3. Выдача

В то время как компилятор Angular построен поверх этого компилятора Typescript. Он использует все фазы компилятора машинописного текста, но также добавляет два своих важных шага, а именно Анализ и Разрешение, как показано на диаграмме ниже:

Давайте поймем важность каждого этапа:

Создание программы:
Это самый первый шаг процесса компиляции. В котором Typescript обнаруживает все файлы из вашего исходного кода. Это важно, потому что машинописный текст должен понимать все файлы, чтобы его можно было скомпилировать. Этот процесс поиска файлов начинается с файла tsconfig.json. В этом случае Typescript находит исходный набор файлов вашей программы и снова считывает их импортированные файлы, чтобы снова найти их ссылки. Таким образом он снова и снова обнаруживает файлы машинописного текста из приложения.

Анализ:
Это вторая фаза процесса компиляции, и она выполняется компилятором angular, поскольку Angular добавляет эту фазу в процесс компиляции. На этом этапе angular берет полный набор файлов из программы и ищет определенные классы. Затем пытается найти те, которые украшены угловатыми декораторами. он делает это только для того, чтобы понять, каковы различные части приложения, такие как компоненты, директивы, каналы, службы и т. д. Итак, если это компонент, он начинает синтаксический анализ файлов его шаблонов. Этот процесс выполняется только для понимания отдельных функций.

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

Проверка типа:
Это второй последний этап компиляции программы, на котором Angular просит машинописный текст проверить на наличие ошибок в коде, а также в шаблонах angular, чтобы их можно было отследить.

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

Давайте поймем разницу между файлами .d.ts и .ts.
Когда файл с расширением .ts компилируется, он преобразуется в файл .js, который понимает браузер. Эти сгенерированные скомпилированные файлы не содержат информации о типе исходных файлов. Они просто содержат императивный код, который готов к выполнению в браузере. Итак, кто же тогда хранит эту информацию о типе? Ответ - файлы с расширением .d.ts. когда компилятор компилирует исходные файлы, он также создает файлы .d.ts, чтобы обрабатывать форму типов, объявленных в исходном файле. Почему это так важно? Обычно, когда мы устанавливаем новые библиотеки из машинописного текста NPM, необходимо знать их типы, чтобы его можно было правильно реализовать.

Возможности компилятора:
1. ngModule Scope.
2. Частичная оценка.

ngModule Scope:
Когда мы используем компоненты angular, мы также подключаем / связываем их, чтобы это помогло нам в общении между ними.

Как уже говорилось, мы связали домашний компонент с компонентом приложения с помощью подписи @Input во время компиляции.

  1. компилятору становится очень сложно определить класс компонента, связанный с элементом ‹app-home›.
  2. Причина в том, что мы никогда не добавляем импорт для этого компонента.
  3. Итак, с помощью модулей в angular мы можем разобраться с этой проблемой.
  4. На этапе компиляции вызываются все компоненты, объявленные в модуле, и происходит относительная ассоциация класса компонента.
  5. Теперь становится очень сложно, если домашний компонент объявлен в другом модуле с именем home Module, который затем экспортируется, чтобы его можно было использовать в основном модуле, как показано на диаграмме ниже:

  1. Как видите, компонент Home экспортируется из модуля Home (известного как область экспорта), и этот модуль импортируется в модуль приложения.
  2. Теперь во время компиляции компонента приложения он учитывает все компоненты, объявленные в его области действия (область компиляции), а также экспортируемые элементы импортированного модуля (область экспорта).
  3. Таким образом, компилятор может определить, что app-home - это только ссылка на компонент Home, который мы получили из области экспорта, и компилирует его.

Это оптимизация, которую делает компилятор для помощи шейкеру деревьев. очень скоро опубликую рассказ о Tree shaker.

Частичная оценка:
Компилятор Angular содержит интерпретаторы Typescript, поэтому во время сборки он должен знать фактические значения определенных выражений, которые мы записали в декораторы angular.

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

Таким образом, компилятор Angular работает под капотом.

Поделитесь своими мыслями по поводу этой статьи…