Angular 빌드 및 실행 방법
Angular가 어떻게 뒤에서 빌드하고 실행하는지 알고 싶으십니까?
제가 지금까지 이해한 것은 아래와 같습니다.제가 놓친 게 있는지 알고 싶습니다.
Angular 빌드 방법
TypeScript를 사용하여 Angular 앱을 코딩한 후 Angular CLI 명령을 사용하여 앱을 빌드합니다.
ng build는 응용 아티팩트는 명어는응출을력컴빌는아에 됩니다.dist/디렉토리입니다.
내부 프로세스
Angular CLI는 웹 팩을 실행하여 모든 JavaScript 및 CSS 코드를 빌드하고 번들합니다.
차례로 Webpack은 모든 것을 가져오는 TypeScript 로더를 호출합니다..ts즉 Angular 프로의파변자환로합다로 합니다..js브라우저가 이해할 수 있는 파일입니다.
이 게시물에 따르면 Angular에는 두 개의 컴파일러가 있습니다.
컴파일러 보기
모듈 컴파일러
빌드에 대한 질문
빌드 프로세스를 호출하는 순서는 무엇입니까?
TypeScript =로된 Angular =>를하여 Angular CLI에 및하도록 웹 합니다. TypeScript => Angular 장 다러 음 TypeScript Transpiler => 를 호 하출 고다니합 장저및여하링들출을팩웹호는 TypeScript번먼내저로호를출작한성일컴파된script▁angular▁transer>pil및저번들합장니다링▁the▁in▁written여dist/디렉토리입니다.
Angular 실행 방법
빌드가 완료되면 우리 앱의 모든 구성 요소, 서비스, 모듈 등이 다음으로 전송됩니다.JavaScript .js브라우저에서 Angular 응용 프로그램을 실행하는 데 사용되는 파일입니다.
Angular Docs의 문
부때할랩트로 을 할 때
AppComponent는 ".ts", "main"을 찾습니다.<app-root>에 시대에index.html이를 AppComponent 한 후 를 AppComponent 파일 내부에 .<app-root>꼬리표를 달다Angular는 사용자가 응용프로그램을 이동할 때 구성요소를 생성, 업데이트 및 삭제합니다.
런에 대한 질문
비록 ~일지라도main.ts프로세스를 하기 위해 Isn't은 JavaScript를 됩니다. Is Angular app은 부트스트랩되거나 JavaScript를 사용하여 시작됩니다..js 파일?
자바스크립트를 요?.js 파일?
모든 부품이 어떻게 깊이 들어맞는지 아는 사람?
(내가 Angular라고 말할 때 나는 Angular 2+를 의미하며 내가 Angular 1을 언급하고 있다면 명시적으로 Angular-js라고 말할 것입니다.)
전주곡:혼란스럽습니다.
Angular, 그리고 아마도 더 정확하게는 Angular-cli는 빌드 프로세스와 관련된 Javascript의 여러 추세 도구를 병합했습니다.그것은 약간의 혼란을 초래합니다.
혼란을 가중시키기 위해, 그 용어는compile을 가리키는 . angular-js는 html을 사용합니다. angular-js는 html을 사용합니다.그것은 컴파일러가 하는 일의 일부이지만 작은 부분 중 하나입니다.
우선 TypeScript, Angular-cli 또는 Webpack을 사용하여 Angular를 실행할 필요가 없습니다.당신의 질문에 답하기 위해.간단한 질문을 살펴봐야 합니다. "Angular란 무엇입니까?"
각도:그것은 무엇을 합니까?
이 부분은 논란의 여지가 있을 수 있습니다. 두고 봅시다.Angular가 제공하는 서비스의 핵심은 Javascript, HTML 및 CSS에서 작동하는 종속성 주입 메커니즘입니다.모든 작은 조각과 조각을 개별적으로 작성하고 각 작은 조각에서 다른 조각을 참조하기 위한 Angular의 규칙을 따릅니다.앵귤러는 어떻게든 그것을 엮습니다.
좀 더 구체적으로 말하면,
- 템플릿을 사용하면 HTML을 Javascript 구성 요소에 연결할 수 있습니다.이를 통해 DOM 자체에 대한 사용자 입력(예: 버튼 클릭)이 Javascript 구성 요소에 입력될 수 있으며 Javascript 구성 요소의 변수가 DOM의 구조와 값을 제어할 수도 있습니다.
- Javascript 클래스(Javascript 구성 요소 포함)는 종속된 다른 Javascript 클래스의 인스턴스(예: 고전적 종속성 주입)에 액세스할 수 있어야 합니다.BookList 구성 요소에는 BookListPolicy 등의 인스턴스가 필요할 수 있는 BookListService 인스턴스가 필요합니다.각 클래스는 서로 다른 수명(예: 서비스는 일반적으로 싱글톤, 구성요소는 일반적으로 싱글톤이 아님)을 가지며 Angular는 이러한 수명, 구성요소 생성 및 종속성 배선을 모두 관리해야 합니다.
- CSS 규칙은 DOM의 하위 집합에만 적용되는 방식으로 로드되어야 했습니다(구성 요소의 스타일은 해당 구성 요소에 로컬임).
파일을 Angular)에 을 지지 입니다.import합니다.그것은 웹팩에 의해 처리됩니다.
컴파일러는 무엇을 합니까?
이제 Angular가 무엇인지 알았으니 컴파일러가 무엇을 하는지에 대해 이야기해 보겠습니다.저는 주로 제가 무지하기 때문에 너무 기술적인 것은 피하겠습니다.가 " " " " " " " " " " " " (예를 들어, " " " " " " " ( " " " " " ( " " " " " " " " " " " " " " " " " " 은 일반적으로 " " " " 은 " " " 은 " 은 " " 은 " " 은 " " 은 " 은 " 은 " 은 " " 은 " 은 " " " 은 " 은 " 은 " 은 " 은 " 은 " 은 " " 은 " 은 " 은 " 은 " " " " " " " " " " " " " " " " " " " " " " "I can be injected,My lifetime is blah또는You can think of me as a Component type of instanceJava에서 Spring은 원래 XML 파일로 이 작업을 수행했습니다.Java는 나중에 주석을 채택했으며 메타데이터를 표현하는 선호되는 방법이 되었습니다.C#은 속성을 사용하여 메타데이터를 표현합니다.
Javascript는 이 메타데이터를 노출하기 위한 좋은 메커니즘을 가지고 있지 않습니다. angular-js는 시도를 했고 나쁘지는 않았지만 쉽게 확인할 수 없고 약간 혼란스러운 규칙들이 많았습니다.Angular를 사용하면 메타데이터를 지정하는 두 가지 방법이 지원됩니다.순수한 자바스크립트를 작성하고 메타데이터를 수동으로 지정할 수 있습니다. 각도-js와 다소 유사하며 규칙을 계속 따르고 추가적인 보일러 플래티 코드를 작성하기만 하면 됩니다.할 수 .@메타데이터를 표현하는 데 사용됩니다.
이것이 우리가 마침내 컴파일러에 접근할 수 있는 부분입니다.컴파일러의 일은 메타데이터를 가져와서 응용 프로그램인 작업 조각의 시스템을 만드는 것입니다.당신은 모든 부분과 모든 메타데이터에 집중하고 컴파일러는 상호 연결된 하나의 큰 애플리케이션을 구축합니다.
컴파일러는 그것을 어떻게 합니까?
컴파일러가 작동할 수 있는 방법은 런타임과 사전 실행 두 가지가 있습니다.이제부터 당신이 TypeScript를 사용하고 있다고 가정하겠습니다.
- 런타임:타이프스크립트 컴파일러가 실행되면 모든 데코레이터 정보를 가져와서 장식된 클래스, 메소드 및 필드에 첨부된 Javascript 코드로 밀어넣습니다.당신의
index.html당신은 당신의main.js그것은 그것을 부릅니다.bootstrap방법.이 메서드는 최상위 모듈을 통과합니다.
부트스트랩 메서드는 런타임 컴파일러를 실행하고 해당 최상위 수준 모듈에 대한 참조를 제공합니다.그런 다음 런타임 컴파일러는 해당 모듈, 해당 모듈에서 참조하는 모든 서비스, 구성 요소 등 및 모든 관련 메타데이터를 탐색하기 시작하고 응용 프로그램을 빌드합니다.
- AOT: Angular는 런타임에 모든 작업을 수행하는 대신 빌드 시간에 대부분의 작업을 수행할 수 있는 메커니즘을 제공했습니다.이 작업은 거의 항상 웹 팩 플러그인을 사용하여 수행됩니다(가장 많이 사용되지만 가장 잘 알려지지 않은 npm 패키지 중 하나여야 함).형식 스크립트 컴파일이 실행된 후에 실행되므로 런타임 컴파일러와 기본적으로 동일한 입력이 표시됩니다.AOT 컴파일러는 런타임 컴파일러와 마찬가지로 응용 프로그램을 빌드한 다음 자바스크립트에 다시 저장합니다.
여기서의 이점은 컴파일 자체에 필요한 CPU 시간을 절약할 수 있을 뿐만 아니라 애플리케이션의 크기를 줄일 수 있다는 것입니다.
구체적인 경우
Angular CLI 먼저 Typescript =>로 작성된 Angular built in 컴파일러를 호출한 다음 Typescript Transpiler =>를 호출하여 웹 팩을 번들링하고 dist/ 디렉토리에 저장합니다.
아니요. Angular CLI는 웹 팩을 호출합니다(Angular CLI의 실제 서비스는 웹 팩을 구성하는 것입니다).실행할 때ng build웹팩을 시작하기 위한 프록시에 불과합니다.Webpack은 먼저 Typescript 컴파일러를 호출한 다음 각 컴파일러(AOT로 가정)를 호출하여 코드를 동시에 번들링합니다.
위의 문장에서 부트스트랩 프로세스를 설명하기 위해 main.ts를 사용하지만, 각진 앱은 자바스크립트.js 파일을 사용하여 부트스트랩되거나 시작되지 않습니까?
저는 당신이 여기서 무엇을 요구하는지 완전히 확신할 수 없습니다.main.tsJavascript로 변환됩니다.해당 Javascript에는 다음에 대한 호출이 포함됩니다.bootstrapAngular의 진입점입니다.언제bootstrap완료되면 전체 Angular 응용 프로그램이 실행됩니다.
이 게시물에 따르면 Angular에는 두 개의 컴파일러가 있습니다.
컴파일러 보기
모듈 컴파일러
솔직히 말해서 저는 여기서 무지하다고 주장할 것입니다.우리 수준에서는 하나의 큰 컴파일러라고 생각하면 될 것 같습니다.
모든 부품이 어떻게 깊이 들어맞는지 아는 사람이 있습니까?
위의 내용이 만족스러웠으면 좋겠습니다.
Don @ Me: Angular는 의존성 주입 이상의 일을 합니다.
물론이죠. 라우팅, 빌딩 보기, 변경 감지 및 기타 모든 종류의 작업을 수행합니다.컴파일러는 실제로 뷰 빌드 및 변경 감지를 위한 Javascript를 생성합니다.저는 단지 의존성 주사라고 말했을 때 거짓말을 했습니다.그러나 의존성 주입이 핵심이며 나머지 답을 이끌어내기에 충분합니다.
우리는 그것을 컴파일러라고 불러야 하나요?
그것은 아마도 많은 파싱과 렉싱을 할 것이고 결과적으로 많은 코드를 생성할 것이기 때문에 당신은 그것을 컴파일러라고 부를 수 있습니다.
반면에, 그것은 당신의 코드를 단지 다른 표현으로 변환하는 것이 아닙니다.대신 여러 코드 조각을 사용하여 더 큰 시스템의 소모품 조각으로 엮습니다.그런 다음 (필요한 경우 컴파일 후) 부트스트랩 프로세스가 이러한 조각을 가져와 Angular 코어에 연결합니다.
처음부터 시작하겠습니다.
애플리케이션에서 애플리케이션을 직접 실행합니다.Webpack.
응용 프로그램을 빌드하고 실행하기 위해 webpack --progress 및 webpack-dev-server -- 인라인 명령을 사용합니다.package.json하기와 같이
"scripts": {
"serve": "webpack-dev-server --inline ",
"build": "webpack --progress"
}
우리가 달릴 때webpack --progress그것이 읽기 시작하도록 명령합니다.webpack.config.js아래와 같이 진입점을 찾는 파일입니다.
module.exports = {
devtool: 'source-map',
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
},
/* Embed files. */
{
test: /\.(html|css)$/,
loader: 'raw-loader',
exclude: /\.async\.(html|css)$/
},
/* Async loading. */
{
test: /\.async\.(html|css)$/,
loaders: ['file?name=[name].[hash].[ext]', 'extract']
},
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
그리고 그것은 전부 읽힙니다.Typescript파일 및 컴파일은 에서 선언된 규칙을 기반으로 합니다.tsconfig.json각각의 파일과 변환합니다..js파일과 지도 파일입니다.
컴파일 오류 없이 실행되면 생성됩니다.bundle.js우리가 선언한 대로 이름이 있는 파일.Webpack출력 섹션.
이제 로더를 사용하는 이유를 설명하겠습니다.
awesome-type 스크립트-로더, 각진 2-템플릿-로더 우리는 이 로더를 사용하여 컴파일합니다.Typescript에서 선언된 베이스에 있는 파일tsconfig.json파일 및 각도 2-제곱-제곱 검색templateUrl그리고.styleUrls선언은 Angular 2 Component 메타데이터의 내부에 있으며 경로를 해당 require 문으로 바꿉니다.
resolve: {
extensions: ['.ts', '.js']
}
위의 해결 섹션을 사용하여 다음과 같이 설명합니다.Webpack개종하기 위해Typescript로.JavaScript파일
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
플러그인 섹션은 타사 프레임워크 또는 파일을 주입하는 데 사용됩니다.내 코드에서 나는 이것을 주사하기 위해 사용하고 있습니다.index.html대상 폴더입니다.
devtool: 'source-map',
위의 선은 다음을 확인하는 데 사용됩니다.Typescript브라우저에 파일을 저장하고 디버그합니다. 주로 개발자 코드에 사용됩니다.
loader: 'raw-loader'
위의 것raw-loader로드에 사용됩니다..html그리고..css그것들을 파일로 묶어서 함께 묶습니다.Typescript파일
마지막에 웹팩-dev-server를 실행하면 인라인으로 자체 서버를 만들고 에 언급된 경로로 응용 프로그램을 부팅합니다.web-pack.config.js대상 폴더와 진입점을 언급한 파일입니다.
Angular의 2 은 대부분애이션의케은 2플점입입니다.main.ts여기서 우리는 초기 부트스트랩 모듈을 언급합니다. 예를 들어, (app.module) 이 모듈은 전체 애플리케이션의 모든 지시, 서비스, 구성 요소, 라우팅 구현과 같은 완전한 애플리케이션 정보를 포함합니다.
참고: 많은 사람들이 그 이유를 의심하고 있습니다.index.html어디에 대해서는 언급하지 않았지만 애플리케이션만 부팅합니다.답은 다음과 같습니다.Webpack은 자체 으로 load server를 실행합니다.index.html기본 페이지에 대해 언급하지 않은 경우.
저는 주어진 정보가 어떤 사람들의 정보에 도움이 되기를 바랍니다.
Angular 빌드 방법
그Angular CLI 출들Webpack,time,t제Webpack에 부딪치다.ts파일을 작성하여 에 전달합니다.TypeScript컴일는출변있컴는파러일가기를 컴파일하는 Angular
빌드 순서는 다음과 같습니다.
Angular CLI=>Webpack=>TypeScript=> 컴파일러 =>TypeScript컴파일러는 다음을 호출합니다.Angular컴파일러를 컴파일할 수 있습니다.
Angular 실행 방법
Angular은 부트실방트를 하여 실행됩니다.Javascriptjava.
실제로 부트스트랩 프로세스는 런타임이며 브라우저를 열기 전에 발생합니다.다음 질문으로 넘어가겠습니다.
따라서 부트스트랩 프로세스가 다음과 같이 발생할 경우Javascript파일을 작성한 다음 이유Angular는 문서사를 합니다.main.ts부트스트랩 프로세스를 설명할 스크립트 파일을 입력하시겠습니까?
Angular의사들은 단지 그것에 대해 이야기합니다..ts파일들은 소스이기 때문에.
이것은 간단한 대답입니다.누구든 깊이 있게 답변해주시면 감사하겠습니다.
채팅에서 제 질문에 대한 답변은 @Toxicable에 크레딧이 부여됩니다.
이 답변에 늦었을 수도 있지만, 초보자의 관점에서 시작하여 깊이 있게 진행되는 이 주제에 대해 최근에 정말 좋은 이야기가 있었습니다.제 말로 이 스레드에서 잘못된 정보를 요약하거나 지적하는 대신 카라 에릭슨의 비디오를 연결하겠습니다. Angular 작동 방식.
그녀는 Angular 프레임워크의 기술 리드이며, 다음과 같은 사항에 대해 매우 훌륭한 프레젠테이션을 하고 있습니다.
- Angular 프레임워크의 주요 부분은 무엇입니까?
- 컴파일러는 어떻게 작동하고 무엇을 생성합니까?
- "구성요소 정의"란 무엇입니까?
- 애플리케이션 부트스트랩이란 무엇이며 어떻게 작동합니까?
그렇다면 부트스트랩 프로세스가 Javascript 파일에서 발생한다면 AngularDocs는 부트스트랩 프로세스를 설명하기 위해 main.ts TypeScript 파일을 사용하는 이유는 무엇입니까?
.ts의 .js 의환변일부다니입전버이것된은의▁by에 의해 방출된 main된 .입니다.ng build아직 미완성이고 축소되지 않은, 초보자가 이 코드를 어떻게 이해하기를 기대하십니까?너무 복잡해 보이지 않나요?
Object(__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_2__app_app_module__["a" /* AppModule */])
.catch(function (err) { return console.log(err); });
와께함과 함께ng build --prod --build-optimizer코드를 최적화하기 위해 코드를 확대하고 축소하는 기능으로 생성된 번들은 소형이며 비트 변환 가능한 형식입니다.
webpackJsonp([1],{0:function(t,e,n){t.exports=n("cDNt")},"1j/l":function(t,e,n){"use strict";n.d(e,"a",function(){return r});var r=Array.isArray||function(t){return t&&"number"==typeof t.length}},"2kLc
main.ts 파일이 사람이 읽을 수 있고 명확한 반면에, 그것이 angular.io 이 각 애플리케이션의 부트스트랩 프로세스를 설명하기 위해 main.ts를 사용하는 이유입니다.각도: 왜 TypeScript입니까? 만약 당신이 그렇게 훌륭한 프레임워크의 저자였다면 당신의 프레임워크를 대중적이고 사용자 친화적으로 만들기 위해 어떤 접근법을 사용했을 것입니까? 당신은 복잡한 것보다 명확하고 간결한 설명을 추구하지 않을까요?저는 angular.io 문서에 대한 상세한 설명이 부족하다는 것에 동의합니다. 하지만 제가 본 바로는 그들은 더 나은 것을 만들기 위해 열심히 노력하고 있습니다.
Angular 9+는 AOT(Ahead of Time Compilation)를 사용하므로 구성 요소(.ts + .html + .css), 모듈(.ts) 등 다양한 파일에 분산된 모든 비트를 가져오고 런타임에 브라우저에서 다운로드하여 실행하는 브라우저 이해 가능한 JavaScript를 구성합니다.
Angular 9 이전에는 JIT(Just in time Compilation)로 브라우저에서 요구하는 대로 코드를 컴파일했습니다.
자세한 내용은 Angular AOT Documentaiton을 참조하십시오.
언급URL : https://stackoverflow.com/questions/48942691/how-angular-builds-and-runs
'programing' 카테고리의 다른 글
| 루프에 대한 JavaScript ES6 약속 (0) | 2023.07.25 |
|---|---|
| C에서 문자열 반전 (0) | 2023.07.25 |
| 이벤트 루프 이해 (0) | 2023.07.25 |
| C에서 가장 높은 순서 비트 찾기 (0) | 2023.07.20 |
| Firebase에서 확인 이메일을 보내는 방법은 무엇입니까? (0) | 2023.07.20 |