각도 컴파일러는 무엇을 "컴파일"합니까?

각도 컴파일러는 무엇을 "컴파일"합니까?

저는 오늘 그 질문을 받고 제대로 답을 하지 못했습니다.

타이프스크립트는 JS로 변환됩니다.그런 다음 배치 과정에서 트리 흔들기, "덜"(선택 사항) 및 기타 항목이 발생합니다.하지만 그와 같은 것은 "컴파일링"과는 아무런 관련이 없습니다.모든 것이 번들로 구성되어 있고 매우 최적화되어 있지만 실제로 컴파일된 것은 아니죠?

심지어 "미리 보는" 컴파일러도 있는데, 이것은 정말로 눈에 띄는 일을 합니다.뭐가 그리울까요?

자바스크립트 자체는 아직도 해석이 되는 거죠?

컴파일이란 소스 코드를 가져다가 기계 코드, 하위 코드 등을 생성하는 것을 의미한다고 가정합니다.하지만 컴파일은 사실 하나의 소스 코드를 가져다가 다른 소스 코드로 바꾸는 것을 의미합니다.따라서 Typescript를 가져다가 JavaScript를 제작하는 것은 컴파일의 한 형태라고 보는 것이 타당해 보입니다.예를 들어 c#이 IL 언어로 컴파일될 때 수행하는 작업과 다르지 않습니다.

그렇기는 하지만, 이것에 대해 더 좋은 말은 트랜스필링(Transpiling)입니다.Typescript 컴파일러가 Transpiler로 더 잘 묘사되는 것을 제안합니다.

그 차이는 미묘하고 트랜스필러는 컴파일러의 한 종류로 간주될 수 있습니다. 그러나 (순수한) 컴파일 언어는 C# 예와 같이 높은 수준의 언어를 낮은 수준의 언어(기계 코드에 가까운)로 바꾸는 것입니다.변환기는 상위 수준의 언어를 비슷한 수준의 추상화(추상화) 언어(또한 상위 수준)로 변환합니다.^*

컴파일된 코드의 결과는 일반적으로 직접 작성하는 언어가 아닙니다.트랜스필러의 결과는 또 다른 고급 언어입니다.이론적으로는 IL을 작성할 수 있지만 실제로 컴파일러에서 제작할 수 있도록 설계되어 있으며 이를 위한 도구나 지원은 없으며 C#/vb.net 만 컴파일하여 IL을 제작할 수 있습니다.반면에 자바스크립트는 그 자체로 사용 가능한(그리고 사용되는) 프로그래밍 언어입니다.

_{*이 단어들의 정의와 사용법이 상당히 모호하기 때문에 많은 주의가 필요합니다.}

당신은 세가지 질문을 하나로 하는 것 같습니다.

• 컴파일러와 트랜스필러의 차이점은 무엇입니까?
• Angular와 TypeScript는 컴파일러나 트랜스필러를 구현합니까?
• Angular 컴파일러가 따로 있습니까?그것은 무엇을 컴파일합니까?

컴파일러와 트랜스필러의 차이점은 무엇입니까?

@JörgWittag는 이 질문에 매우 좋은 답변을 제공했습니다.

Angular와 TypeScript는 컴파일러나 트랜스필러를 구현합니까?

TS와 Angular 모두 실제 컴파일러를 구현합니다.이들은 어셈블리 코드를 생성하는 C/C++ 컴파일러와 동일한 어휘 분석, 구문 분석, 의미 분석 및 코드 생성 단계를 따릅니다(최적화의 경우는 제외).클래스/폴더 이름이 Angular와 TS 모두 "compiler"로 지정된 것을 확인할 수 있습니다.

각도 컴파일러는 TypeScript 컴파일러와 실제로는 관련이 없습니다.이것들은 매우 다른 컴파일러들입니다.

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의 모듈과 일반적인 혼동 방지

타자기가 JS로 변환됩니다.그런 다음 배치 과정에서 트리 흔들기, "덜"(선택 사항) 및 기타 항목이 발생합니다.하지만 그와 같은 것은 "컴파일링"과는 아무런 관련이 없습니다.모든 것이 번들로 구성되어 있고 매우 최적화되어 있지만 실제로 컴파일된 것은 아니죠?

컴파일이란 A언어로 작성된 프로그램을 B언어로 작성된 의미론적으로 동등한 프로그램으로 변형시켜 B언어의 규칙에 따라 컴파일된 프로그램을 평가하는 것(예를 들어 B에 대해 통역사와 함께 해석하는 것)과 동일한 결과를 도출하고 원래의 프로그램 a를 평가하는 것과 동일한 부작용을 초래하는 것을 의미합니다.언어 A의 규칙에 따라(예를 들어, A에 대한 통역사와 함께 해석).

컴파일은 단순히 프로그램을 A 언어에서 B 언어로 번역하는 것을 의미합니다.그것이 의미하는 전부입니다. (또한 A와 B가 같은 언어일 가능성이 있다는 것에 유의하십시오.)

A와 B가 무엇인지, 컴파일러가 무엇을 하는지에 따라 특정한 종류의 컴파일러에 대해 더 전문화된 이름이 있는 경우도 있습니다.

• 만약 A가 어셈블리어로 인식되고 B가 기계어로 인식된다면, 우리는 그것을 어셈블리어라고 부릅니다.
• A가 기계어로 인식되고 B가 어셈블리어로 인식된다면, 우리는 그것을 분해자라고 부릅니다.
• 만약 A가 B보다 낮은 수준이라고 인식된다면, 우리는 그것을 디컴파일러라고 부릅니다.
• 만약 A와 B가 같은 언어이고, 결과적인 프로그램이 어떤 식으로든 더 빠르거나 더 가볍다면, 우리는 그것을 옵티마이저라고 부릅니다.
• 만약 A와 B가 같은 언어이고, 결과적인 프로그램이 더 작다면, 우리는 그것을 미니머라고 부릅니다.
• 만약 A와 B가 같은 언어이고, 결과적인 프로그램이 덜 가독성이 있다면, 우리는 그것을 난독화라고 부릅니다.
• 만약 A와 B가 대략 같은 수준의 추상화라고 인식된다면, 우리는 그것을 트랜스필러라고 부르고, 그리고
• A와 B가 대략 동일한 수준의 추상화로 인식되고 결과 프로그램이 원래 프로그램과 동일한 방식으로 결과 프로그램을 유지할 수 있도록 포맷, 코멘트, 프로그래머 의도를 보존한다면, 우리는 그것을 재공학 도구라고 부릅니다.

또한 오래된 소스에서는 "compiler"와 "compiler" 대신 "번역기"와 "번역기"라는 용어를 사용할 수도 있습니다.예를 들어, C는 "번역 단위"에 대해 이야기합니다.

"언어 프로세서"라는 용어를 우연히 발견할 수도 있습니다.이것은 정의에 따라 컴파일러, 인터프리터 또는 컴파일러와 인터프리터 둘 다를 의미할 수 있습니다.

자바스크립트 자체는 아직도 해석이 되는 거죠?

자바스크립트는 언어입니다.언어는 논리적 규칙과 제한의 집합입니다.언어는 해석되거나 컴파일되지 않습니다.언어는 그냥.

컴파일과 해석은 컴파일러나 인터프리터(duh!)의 특성입니다.모든 언어는 컴파일러로, 모든 언어는 인터프리터로 구현할 수 있습니다.많은 언어들은 컴파일러와 인터프리터를 둘 다 가지고 있습니다.많은 현대의 고성능 실행 엔진들은 적어도 하나의 컴파일러와 적어도 하나의 인터프리터를 모두 가지고 있습니다.

이 두 용어는 서로 다른 추상화 계층에 속합니다.만약 영어가 타자화된 언어라면, "해석 언어"는 타자 오류가 될 것입니다.

또한 일부 언어에는 인터프리터도 컴파일러도 없습니다.구현이 전혀 없는 언어들이 있습니다.그래도 그 언어들은 언어이고 프로그램을 작성할 수 있습니다.당신은 그들을 운영할 수 없습니다.

또한, 모든 것은 어떤 시점에서 해석된다는 것을 주목하세요: 여러분이 어떤 것을 실행하고 싶다면, 그것을 해석해야 합니다.컴파일은 한 언어에서 다른 언어로 코드를 번역할 뿐입니다.작동하지 않습니다.통역이 실행합니다. (때로는 하드웨어에서 인터프리터를 구현할 때 'CPU'라고 부르지만 그래도 인터프리터입니다.)

대표적인 예로, 현재 존재하는 모든 주류 자바스크립트 구현에는 컴파일러가 있습니다.

V8은 순수 컴파일러로 시작했는데 자바스크립트를 적절히 최적화된 네이티브 머신 코드로 바로 컴파일했습니다.나중에 두 번째 컴파일러가 추가되었습니다.이제 두 개의 컴파일러가 있습니다: 적당히 최적화된 코드를 생성하는 경량 컴파일러이지만 컴파일러 자체는 매우 빠르고 RAM을 거의 사용하지 않습니다.또한 이 컴파일러는 컴파일된 코드에 프로파일링 코드를 주입합니다.두 번째 컴파일러는 더 무겁고, 더 느리고, 더 비싼 컴파일러이지만 훨씬 더 촘촘하고, 훨씬 더 빠른 코드를 만들어냅니다.또한 첫 번째 컴파일러가 주입한 프로파일링 코드의 결과를 사용하여 동적 최적화 결정을 내립니다.또한, 두 번째 컴파일러를 사용하여 어떤 코드를 다시 컴파일할지는 그 프로파일링 정보를 기반으로 결정됩니다.통역사가 관련된 경우는 없습니다.V8은 절대 통역을 하지 않습니다. 항상 컴파일을 합니다.통역사도 포함되어 있지 않습니다. (사실 요즘은 그런 것 같은데, 처음 두 번의 반복을 설명하고 있습니다.)

SpiderMonkey는 자바스크립트를 SpiderMonkey 바이트코드로 컴파일한 다음 해석합니다.또한 인터프리터는 코드를 프로파일링하고, 가장 자주 실행되는 코드는 컴파일러에 의해 네이티브 머신 코드로 컴파일됩니다.따라서 스파이더몽키에는 자바스크립트에서 스파이더몽키 바이트코드로, 스파이더몽키 바이트코드에서 네이티브 머신코드로 두 개의 컴파일러가 포함되어 있습니다.

(V8을 제외한) 거의 모든 자바스크립트 실행 엔진은 자바스크립트를 바이트코드로 컴파일하는 AOT 컴파일러와 해당 바이트코드를 해석하고 컴파일하는 혼합 모드 엔진의 모델을 따릅니다.

댓글로 이렇게 적었네요.

저는 정말로 기계 코드가 어딘가에 관련되어 있다고 생각하고 있었습니다.

"기계 코드"가 무슨 뜻일까요?

한 사람의 기계어가 다른 사람의 중급어이고 그 반대의 경우는 무엇입니까?예를 들어, JVM 바이트코드를 네이티브로 실행할 수 있는 CPU가 있는데, 이러한 CPU에는 JVM 바이트코드가 네이티브 머신코드입니다.그리고 x86 머신 코드에 대한 인터프리터가 있는데, 그 x86 머신 코드를 실행하면 인터프리터 코드가 인터프리터됩니다.

자바로 작성된 JPC라는 x86 인터프리터가 있습니다.네이티브 JVM CPU에서 실행되는 JPC에서 x86 머신 코드를 실행하면 바이트 코드와 네이티브 코드는 무엇입니까?x86 머신 코드를 자바스크립트로 컴파일하고(네, 그렇게 할 수 있는 도구가 있습니다) 휴대폰의 브라우저(ARM CPU가 있음)에서 실행하면 바이트 코드이고 네이티브 머신 코드는 무엇입니까?만약 내가 컴파일하고 있는 프로그램이 SPARC 에뮬레이터이고, 그것을 사용하여 SPARC 코드를 실행하는 경우?

모든 언어는 추상적인 기계를 유도하며, 그 기계를 위한 기계어입니다.따라서 모든 언어(매우 높은 수준의 언어 포함)는 기본 기계 코드입니다.또한 모든 언어의 통역사를 쓸 수 있습니다.따라서 모든 언어(x86 머신 코드 포함)는 모국어가 아닙니다.

브라우저에서 실행하기 위해 작성한 코드를 얻는 데에는 다음 두 가지 사항이 포함됩니다.

1) Typescript를 JavaScript로 변환합니다.이것은 일종의 해결된 문제입니다.그냥 웹팩을 쓰는 것 같아요.

2) 각추상을 자바스크립트로 컴파일하는 중입니다.구성품, 파이프, 지침서, 템플릿 등을 의미합니다.앵글 코어 팀은 이렇게 작업을 합니다.

두 번째 비트인 앵귤러 컴파일러에 관심이 많으신 분은 AngularConnect 2016에서 컴파일러 저자 토비아스 보쉬가 앵귤러 컴파일러에 대해 설명하는 것을 보십시오.

번역과 컴파일 사이에 약간의 혼란이 있는 것 같습니다.그것은 어느 정도 중요하지 않고 개인적 취향의 문제입니다. 둘 다 코드 표현 사이의 변환일 뿐입니다.하지만 제가 개인적으로 사용하는 정의는 번역이 유사한 추상화 수준(예: 자바스크립트의 타이프스크립트)에서 두 개의 서로 다른 언어 사이에 존재하는 반면, 컴파일은 추상화 수준의 단계를 필요로 한다는 것입니다.템플릿, 구성 요소, 파이프, 지시문 등에서 단순한 자바스크립트로 이어지는 것이 추상화 사다리의 한 단계라고 생각합니다. 그래서 컴파일러라고 불립니다.

앵귤러 컴파일러

Angular 4에서 5로의 가장 중요한 변화 중 하나는 컴파일러가 더 빠르고 더 철저하게 다시 작성되었다는 것입니다.과거에 Angular 애플리케이션은 JIT(Just-in-Time) 컴파일이라고 하는 것을 사용했습니다. 애플리케이션은 실행 전 브라우저에서 런타임에 컴파일되었습니다.Angular 5의 컴파일러 업데이트는 AOT로의 이동을 앞당겼고, 이는 앱을 실행할 때 컴파일을 덜 수행하기 때문에 앱이 더 빨리 실행되도록 만들었습니다.AOT는 Angular CLI의 1.5 버전 이후로 모든 프로덕션 빌드에서 기본적으로 활성화됩니다.

배포를 위한 애플리케이션을 구축하고 다음 명령을 실행하려고 합니다.

ng build --prod

운영 버전, 최소화, 번들 자산, 파일 이름 해싱, 트리 흔들기, AOT... (예: aot= false를 사용하여 이를 활성화/플래그를 사용하여 이를 활성화/비활성화할 수 있습니다.간단히 말하면 prod 플래그는 ngc(Angular 컴파일러)를 사용하여 AOT 컴파일을 수행하여 브라우저에 준비된 최적화된 코드를 생성함으로써 애플리케이션의 최적화된 번들을 생성합니다(네, 템플릿을 미리 컴파일합니다).

타입스크립트 컴파일러

TypeScript 컴파일러인 tsc는 TypeScript 파일을 컴파일하는 역할을 합니다.정적 타입과 같은 TypeScript 기능의 구현을 담당하는 것은 컴파일러이며, 그 결과 TypeScript 키워드와 표현이 제거된 순수 자바스크립트가 됩니다.

TypeScript 컴파일러에는 두 가지 주요 기능이 있습니다: 그것은 트랜스필러와 타입 체커입니다.컴파일러는 타입스크립트를 자바스크립트로 변환합니다.소스 코드에 대해 다음과 같은 변환을 수행합니다.

• 모든 형식 주석을 제거합니다.
• 이전 버전의 자바스크립트에 대한 새로운 자바스크립트 기능을 컴파일합니다.
• 표준 자바스크립트가 아닌 TypeScript 기능을 컴파일합니다.

이를 호출하면 컴파일러는 tsconfig.json에 로드된 구성을 검색합니다(기본값과 함께 모든 컴파일러 옵션에 대한 자세한 목록은 여기에서 확인할 수 있습니다).

대부분의 면에서, TypeScript 컴파일러는 다른 컴파일러와 같이 작동합니다.그러나 한 가지 다른 점이 있습니다: 기본적으로 컴파일러는 오류가 발생하더라도 자바스크립트 코드를 계속 내보냅니다.다행히 이 동작은 다음과 같이 설정하여 비활성화할 수 있습니다.noEmitOnErrortsconfig.json 파일에서 true로 구성 설정.

참고: tsc와 ngc는 목적이 다르며 둘 중 하나를 선택하는 것이 아닙니다.이 답변이 흥미로울 수 있습니다.

이 답변은 다음 책의 내용을 바탕으로 작성되었습니다.

• 클로, M. (2018)"앵글 5 프로젝트: 70개 이상의 프로젝트를 사용하여 단일 페이지 웹 애플리케이션을 구축하는 법을 배웁니다."

• Dewey, B., Grossnicklaus, K., Japikse, P. (2017)."Visual Studio 2017을 통한 웹 애플리케이션 구축: Using.NET Core 및 현대 자바스크립트 프레임워크".

• 프리먼, A. (2019)"Essential Type Script:'초보에서 프로로'.

• 기야, P. (2018)"TypeScript Microservices".

• 이스칸다르, A., 치부쿨루, S. (2019)"앵귤러와 부트스트랩을 사용한 웹 개발 - 제3판"

• 헤네시, K., 아로라, C. (2018)"예에 의한 각 6".

• 얀센, R., 울프, I., 베인, V. (2016)"TypeScript:현대 자바스크립트 개발".

• 모하메드, Z. (2019)"앵글 프로젝트".

• Seshadri, S. (2018)."각도:업 앤 런닝(Up and Running)".

• 윌켄, J. (2018)"Angular in Action."

언급URL : https://stackoverflow.com/questions/46670430/what-does-the-angular-compiler-compile