Что компилирует угловой компилятор?

Вы предполагаете, что компиляция означает получение исходного кода и создание машинного кода, низкоуровневых кодов и т. д. Но на самом деле компиляция означает просто преобразование одного исходного кода в другой. Поэтому кажется разумным сказать, что использование Typescript и создание JavaScript — это форма компиляции. Это не отличается от того, что (например) делает С#, когда он скомпилирован в язык IL.

Тем не менее, я бы сказал, что для этого лучше использовать слово Транспиляция. Я бы предположил, что компилятор Typescript лучше описывается как Transpiler.

Разница тонкая, и транспилятор можно рассматривать как тип компилятора; но (чистый) скомпилированный язык (обычно) превращает язык высокого уровня в язык низкого уровня (более близкий к машинному коду), как пример C #. Транспилятор превращает язык высокого уровня в язык аналогичного уровня (абстракции) (также высокого уровня).^*

Результатом скомпилированного кода обычно является язык, который вы не написали бы сами. Результатом работы транспилятора является еще один язык высокого уровня. Теоретически вы можете написать IL (в качестве примера), но на самом деле он предназначен для создания компилятором, и для этого нет инструментов или поддержки, вы создаете IL, компилируя только C#/vb.net. Принимая во внимание, что Javascript сам по себе является удобным (и используемым) языком программирования.

_{* Много предостережений, поскольку определения этих слов и их использование довольно расплывчаты}

Кажется, вы задаете три вопроса в одном:

• В чем разница между компилятором и транспилером?
• Реализуют ли Angular и TypeScript компиляторы или транспиляторы?
• Есть ли отдельный компилятор Angular? Что он компилирует?

В чем разница между компилятором и транспилером?

@JörgWMittag дал очень хороший ответ на этот вопрос.

Реализуют ли Angular и TypeScript компиляторы или транспиляторы?

И в TS, и в Angular реализованы настоящие компиляторы. Они проходят те же этапы лексического анализа, синтаксического анализа, семантического анализа и генерации кода, что и компиляторы C/C++, которые создают ассемблерный код (за исключением, вероятно, оптимизации). Вы можете видеть, что класс/папка названы "compiler" в обоих Angular и TS.

Компилятор angular на самом деле не связан с компилятором TypeScript. Это очень разные компиляторы.

Есть ли отдельный компилятор Angular? Что он компилирует?

У Angular есть два компилятора:

• Посмотреть компилятор
• Компилятор модулей

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

Помимо преобразования шаблона, компилятор представления также компилирует различную информацию метаданных в виде декораторов, таких как @HostBinding, @ViewChild и т. д.

Предположим, вы определяете компонент и его шаблон следующим образом:

@Component({
  selector: 'a-comp',
  template: '<span>A Component</span>'
})
class AComponent {}

Используя эти данные, компилятор генерирует следующую слегка упрощенную фабрику компонентов:

function View_AComponent {
  return jit_viewDef1(0,[
      elementDef2(0,null,null,1,'span',...),
      jit_textDef3(null,['My name is ',...])
    ]

Он описывает структуру представления компонента и используется при создании экземпляра компонента. Первый узел — это определение элемента, а второй — определение текста. Вы можете видеть, что каждый узел получает необходимую ему информацию при создании экземпляра через список параметров. Задача компилятора — разрешить все необходимые зависимости и предоставить их во время выполнения.

Настоятельно рекомендую прочитать эти статьи:

• Здесь это то, что вам нужно знать о динамических компонентах в Angular
• Вот почему вы не найдете компоненты внутри Angular

Также см. ответ на вопрос В чем разница между компилятором Angular AOT и JIT.

Задача компилятора модуля состоит в создании фабрики модулей, которая в основном содержит объединенные определения провайдеров.

Для получения дополнительной информации прочитайте:

• Чтобы избежать путаницы с модулями в Angular

Typescript транслируется в JS. Затем идет встряхивание дерева, "менее" (необязательно) и что еще в процессе создания развертывания. Но ничего подобного (афаик) не имеет ничего общего с «компиляцией». Все объединяется и сильно оптимизируется, но на самом деле не компилируется, верно?

Компиляция означает преобразование программы, написанной на языке A, в семантически эквивалентную программу, написанную на языке B, так что оценка скомпилированной программы в соответствии с правилами языка B (например, интерпретация его с помощью интерпретатора для B) дает тот же результат и имеет те же побочные эффекты, что и оценка исходной программы в соответствии с правилами языка A (например, интерпретируя его с помощью интерпретатора для A).

Компиляция просто означает перевод программы с языка A на язык B. Это все, что это значит. (Также обратите внимание, что A и B могут быть одним и тем же языком.)

В некоторых случаях у нас есть более специализированные имена для определенных типов компиляторов, в зависимости от того, что такое A и B и что делает компилятор:

• если A воспринимается как язык ассемблера, а B — как машинный язык, то мы называем его ассемблером,
• если A воспринимается как машинный язык, а B — как язык ассемблера, тогда мы называем его дизассемблером,
• если A воспринимается как более низкий уровень, чем B, мы называем его декомпилятором,
• если A и B — один и тот же язык, а получившаяся программа в чем-то быстрее или легче, то мы называем ее оптимизатором,
• если A и B являются одними и теми же языками, а результирующая программа меньше, то мы называем ее минификатором,
• если A и B являются одними и теми же языками, а результирующая программа хуже читается, то мы называем ее обфускатором,
• если воспринимается, что A и B находятся примерно на одном уровне абстракции, мы называем это транспилером, и
• если A и B воспринимаются как находящиеся примерно на одном уровне абстракции, и полученная программа сохраняет форматирование, комментарии и намерения программиста, так что можно сохранить результирующий программу так же, как и исходную программу, мы называем ее инструментом реинжиниринга.

Также обратите внимание, что в старых источниках могут использоваться термины «перевод» и «переводчик» вместо «компиляция» и «компилятор». Например, C говорит о «единицах перевода».

Вы также можете наткнуться на термин «языковой процессор». Это может означать компилятор, интерпретатор или оба компилятора и интерпретатора в зависимости от определения.

Сам Javascript все еще интерпретируется, верно?

JavaScript — это язык. Языки — это набор логических правил и ограничений. Языки не интерпретируются и не компилируются. Языки просто есть.

Компиляция и интерпретация - это черты компилятора или интерпретатора (да!). Каждый язык может быть реализован с помощью компилятора, и каждый язык может быть реализован с помощью интерпретатора. Многие языки имеют как компиляторы, так и интерпретаторы. Многие современные высокопроизводительные механизмы выполнения имеют по крайней мере один компилятор и по крайней мере один интерпретатор.

Эти два термина принадлежат разным уровням абстракции. Если бы английский был типизированным языком, «интерпретируемый язык» был бы ошибкой типа.

Обратите также внимание на то, что некоторые языки не имеют ни интерпретатора, ни компилятора. Есть языки, которые вообще не имеют реализации. Тем не менее, это языки, и на них можно писать программы. Вы просто не можете запустить их.

Также обратите внимание, что все интерпретируется в некоторый момент: если вы хотите что-то выполнить, вы должны это интерпретировать. Компиляция просто переводит код с одного языка на другой. Это не работает. Интерпретация запускает его. (Иногда, когда интерпретатор реализован аппаратно, мы называем его «ЦП», но это все равно интерпретатор.)

Показательный пример: каждая существующая в настоящее время основная реализация JavaScript имеет компилятор.

V8 начинался как чистый компилятор: он компилировал JavaScript прямо в умеренно оптимизированный собственный машинный код. Позже был добавлен второй компилятор. Теперь есть два компилятора: легкий компилятор, который производит умеренно оптимизированный код, но сам компилятор очень быстрый и использует мало оперативной памяти. Этот компилятор также внедряет код профилирования в скомпилированный код. Второй компилятор является более тяжелым, медленным и более дорогим компилятором, который, тем не менее, производит гораздо более компактный и гораздо более быстрый код. Он также использует результаты кода профилирования, введенного первым компилятором, для принятия решений по динамической оптимизации. Кроме того, решение о том, какой код перекомпилировать с помощью второго компилятора, принимается на основе этой информации профилирования. Обратите внимание, что переводчик никогда не участвует. V8 никогда не интерпретирует, он всегда компилируется. Он даже не содержит интерпретатора. (На самом деле, я считаю, что в настоящее время это так, я описываю первые две итерации.)

SpiderMonkey компилирует JavaScript в байт-код SpiderMonkey, который затем интерпретирует. Интерпретатор также профилирует код, а затем код, который чаще всего выполняется, компилируется компилятором в собственный машинный код. Таким образом, SpiderMonkey содержит два компилятора: один из JavaScript в байт-код SpiderMonkey, а другой — из байт-кода SpiderMonkey в собственный машинный код.

Почти все механизмы выполнения JavaScript (за исключением V8) следуют этой модели компилятора AOT, который компилирует JavaScript в байт-код, и механизма смешанного режима, который переключается между интерпретацией и компиляцией этого байт-кода.

Вы написали в комментарии:

Я действительно думал, что где-то задействован машинный код.

Что вообще означает «машинный код»?

Что для одного человека машинный язык является промежуточным языком для другого и наоборот? Например, есть ЦП, которые могут выполнять байт-код JVM по умолчанию, на таком ЦП байт-код JVM является собственным машинным кодом. И есть интерпретаторы для машинного кода x86, когда вы запускаете этот машинный код x86, является интерпретируемым байт-кодом.

Существует интерпретатор x86 под названием JPC, написанный на Java. Если я запускаю машинный код x86 на JPC, работающем на родном ЦП JVM…, какой байт-код и какой собственный код? Если я компилирую машинный код x86 в JavaScript (да, есть инструменты, которые могут это сделать) и запускаю его в браузере на своем телефоне (у которого есть процессор ARM), какой байт-код и какой собственный машинный код? Что, если программа, которую я компилирую, является эмулятором SPARC, и я использую его для запуска кода SPARC?

Обратите внимание, что каждый язык порождает абстрактную машину и является машинным языком для этой машины. Таким образом, каждый язык (включая языки очень высокого уровня) является родным машинным кодом. Кроме того, вы можете написать интерпретатор для каждого языка. Таким образом, каждый язык (включая машинный код x86) не является родным.

Получение кода, который вы написали для запуска в браузере, включает в себя две вещи:

1) Преобразование Typescript в JavaScript. Это своего рода решаемая проблема. Я думаю, что они просто используют веб-пакет.

2) Компиляция угловых абстракций в JavaScript. Я имею в виду такие вещи, как компоненты, каналы, директивы, шаблоны и т. д. Это то, над чем работает основная команда angular.

Если вас действительно интересует вторая часть, компилятор angular, посмотрите, как автор компилятора Тобиас Бош объясняет Компилятор Angular на AngularConnect 2016.

Я думаю, что здесь происходит небольшая путаница между транспилированием и компиляцией. Это как бы не имеет значения и зависит от личного вкуса, они оба просто преобразуются между представлениями кода. Но определение, которое я лично использую, заключается в том, что транспиляция находится между двумя разными языками с одинаковым уровнем абстракции (например, между машинописью и javascript), тогда как компиляция требует более низкого уровня абстракции. Я думаю, что от шаблонов, компонентов, каналов, директив и т. д. до простого javascript — это шаг вниз по лестнице абстракции, и именно поэтому он называется компилятором.

угловой компилятор

Одним из наиболее важных изменений по сравнению с Angular 4 и 5 является то, что компилятор был переписан быстрее и тщательнее. В прошлом приложения Angular использовали то, что мы называем компиляцией Just-in-Time (JIT), когда приложение компилировалось во время выполнения в браузере перед запуском. Обновления компилятора в Angular 5 ускорили переход к AOT, что позволило ускорить работу приложения, так как оно выполняет меньше компиляции при запуске приложения. AOT включается по умолчанию в любой производственной сборке, начиная с версии 1.5 Angular CLI.

Допустим, мы хотим создать приложение для развертывания и выполнить следующую команду:

ng build --prod

Происходит несколько вещей: производственная версия, минимизация, связывание ресурсов, хеширование имени файла, встряхивание дерева, AOT... (мы можем включить/отключить это с помощью флагов, например, aot=false). Короче говоря, флаг prod создает оптимизированный пакет приложения, выполняя компиляцию AOT с использованием ngc (компилятор Angular) для создания оптимизированного кода, готового для браузера (Да, он предварительно компилирует шаблоны).

Компилятор TypeScript

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

Компилятор TypeScript имеет две основные функции: это транспилятор и средство проверки типов. Компилятор транспилирует TypeScript в JavaScript. Он выполняет следующие преобразования исходного кода:

• Удалите все аннотации типов.
• Скомпилируйте новые функции JavaScript для старых версий JavaScript.
• Скомпилируйте функции TypeScript, которые не являются стандартным JavaScript.

Вызывая его, компилятор ищет конфигурации, загруженные в tsconfig.json (подробный список всех параметров компилятора вместе со значениями по умолчанию можно найти здесь).

В большинстве случаев компилятор TypeScript работает как любой компилятор. Но есть одно отличие, которое может подловить неосторожных: по умолчанию компилятор продолжает выдавать код JavaScript даже при обнаружении ошибки. К счастью, это поведение можно отключить, задав для параметра конфигурации noEmitOnError значение true в файле tsconfig.json.

Примечание: tsc и ngc имеют разные цели, и речь не идет о выборе одного над другим. Этот ответ может представлять интерес.

Этот ответ составлен на основе содержания следующих книг

• Хлоя, М. (2018). «Проекты Angular 5: научитесь создавать одностраничные веб-приложения, используя более 70 проектов».

• Дьюи Б., Гроссниклаус К., Джапикс П. (2017). «Создание веб-приложений с помощью Visual Studio 2017: использование .NET Core и современных фреймворков JavaScript».

• Фриман, А. (2019). «Основной TypeScript: от новичка до профессионала».

• Гия, П. (2018). «Микросервисы TypeScript».

• Искандар, А., Чивукулу, С. (2019). «Веб-разработка с Angular и Bootstrap — третье издание».

• Хеннесси, К., Арора, К. (2018). «Угловой 6 на примере».

• Янсен Р., Вольф И., Вейн В. (2016). «TypeScript: современная разработка JavaScript».

• Мохаммед, З. (2019). «Угловые проекты».

• Сешадри, С. (2018). «Angular: вверх и вниз».

• Уилкен, Дж. (2018). «Угловой в действии».