Angular의 빌드 및 실행 방법

Angular의 빌드 및 실행 방법

---

Angular백그라운드에서 빌드하고 실행 하는 방법을 배우고 싶었 습니까?

아래는 내가 지금까지 이해 한 것입니다. 내가 뭔가를 놓쳤는 지 알고 싶어요.

Angular가 만드는 방법

사용하여 우리의 각 응용 프로그램을 코딩 한 후 TypeScript, 우리는 사용하는 Angular CLI응용 프로그램을 구축하는 명령.

ng build명령은 애플리케이션을 디렉토리로 이동하고 빌드하고 아티팩트는 dist/디렉토리에 저장 합니다.

내부 프로세스

1. 모든 자바 스크립트 및 코드 를 빌드하고 번들링하기 위해 Angular CLI실행 Webpack됩니다 CSS.

2. 차례로 앵귤러 프로젝트의 모든 파일을 가져온 다음 브라우저가 이해할 수 있는 파일 로 CHAPTER 2 Webpack하는 TypeScript로더를 호출합니다 ..tsJavaScript.js

이 게시물 Angular에는 두 개의 컴파일러가 있습니다.

• 컴파일러보기

• 모듈 컴파일러

빌드에 대한 질문

빌드 프로세스를 호출하는 순서는 무엇입니까?

Angular CLI 먼저 Typescript =>로 내부 angular 내장 컴파일러를 호출 한 다음 Typescript Transpiler =>를 호출 한 다음 Webpack을 호출하여 dist/에로 저장합니다 .

Angular가 실행되는 방법

빌드가 완료되면 모든 앱의 구성 요소, 서비스, 모듈 등이 Javascript .js브라우저에서 앵귤러 애플리케이션을 실행하는 데 사용되는 파일 로 트랜스 파일이됩니다.

Angular 문서의 문

1. AppComponent클래스 (main.ts)로 부트 스트랩하면 각도는에서 <app-root>를 index.html찾고, 찾아서 AppComponent의 인스턴스를 인스턴스화하고, <app-root>태그 내부에 렌더링합니다 .

2. Angular는 사용자가 응용 프로그램을 설치할 때 구성 요소를 생성, 업데이트 및 파괴합니다.

달리기에 대한 질문

main.ts부트하는 프로세스를 설명하기 위해 위의 문에서 사용하는 것이 앵귤러 앱이 부트 Javascript .js파일을 사용하여 시작되지 않는 것이 있습니까?

위의 모든 명령문이 Javascript .js파일을 사용하여 실행에 수행하지 않는 것이 있습니까?

모든 부품이 어떻게 깊이 결합 가능한 아는 사람이 있습니까?

---

(내가 Angular라고 말하면 Angular 2+를 의미하며 angular 1을 참조하면 명시 적으로 angular-js라고 말할 것입니다).

전주곡 : 혼란스러워

Angular, 아마도 더 정확하게 angular-cli는 빌드 프로세스에 관련된 Javascript의 여러 새 도구를 병합했습니다. 그것은 약간의 혼란으로 이어집니다.

혼란을 더욱 심화하기 위해 사용되는 용어 compile는 angular-js에서 템플릿의 pseudo-html을 가져 오기 DOM 요소로 바꾸는 프로세스를 도입하는 데 자주 사용됩니다. 그것은 컴파일러가하는 일의 일부이지만 작은 부분 중 하나입니다.

우선 Angular를 실행하기 위해 TypeScript, angular-cli 또는 Webpack을 사용할 수 없습니다. 귀하의 질문에 답하십시오. "Angular 란 무엇입니까?"라는 간단한 질문을 보겠습니다.

Angular : 무엇을 가지고 있습니까?

이 섹션은 논란의 여지가 있습니다. Angular가 제공하는 서비스의 핵심은 Javascript, HTML 및 CSS에서 작동하는 일련의 과정입니다. 모든 작은 조각과 조각을 고유하게 작성하고 각 조각에서 다른 조각을 참조하는 Angular의 규칙을 참조합니다. 그런 다음 Angular는 어떻게 그것을 사용합니까?

(약간) 더 시체로 말하면 :

• 템플릿을 사용하면 HTML을 Javascript 구성 요소에 강화할 수 있습니다. DOM을 통해 자체에 대한 사용자 입력을 (예 : 버튼 클릭)이 Javascript 구성 요소에 공급되고 Javascript 구성 요소의 변수가 DOM의 구조와 값을 제어 할 수 있습니다.
• Javascript 클래스 (Javascript 구성 요소 포함)는 존재하는 다른 Javascript의 인스턴스에 액세스 할 수 있어야합니다 (예 : 클래식 필수). BookListComponent에는 BookListPolicy 또는 이와 동일한 인스턴스가 필요합니다. BookListService의 인스턴스가 필요합니다. 각 클래스는 서로 다른 수명을 가지고 있습니다 (예 : 서비스는 일반적으로 단일 항목이고 구성 요소는 일반적으로 단일 항목이 아님). Angular는 모든 수명, 구성 요소 생성 및 모든 연결을 관리해야합니다.
• CSS 규칙은 DOM의 하위 집합에만 적용되는 방식으로로드되어야합니다 (구성 요소의 스타일은 해당 구성 요소에 국한 됨).

주목해야 할 중요한 사항 중 하나는 Angular가 Javascript 파일이 다른 Javascript 파일 (예 : import키워드)을 참조하는 방법에 대해 책임을지지 않는다는 것 입니다. 이것은 Webpack에서 처리합니다.

컴파일러는 무엇을 가지고 있습니까?

이제 Angular가 무슨 일인지 알았으니 컴파일러가하는 일에 대해 이야기 할 수 있습니다. 나는 주로 내가 무지하기 때문에 너무 처음부터 인 것을 피할 것입니다. 그러나, 의존성 주입 시스템에 당신은 일반적으로 메타 데이터의 어떤 종류 (예를 들어, 어떻게 수행하는 클래스 말과 의존성을 표현해야한다 I can be injected, My lifetime is blah또는 You can think of me as a Component type of instance). Java에서 Spring은 원래 XML 파일 로이 작업을 수행했습니다. Java는 나중에 주석을 채택하고 메타 데이터를 표현하는 데 선호되는 방법이 있습니다. C #은 특성을 사용하여 메타 데이터를 표현합니다.

자바 펼쳐에는이 메타 데이터를 노출하는 능숙하지 않습니다. angular-js가 시도하고 나쁘지는 쉽게 확인할 수없고 약간의 혼란스러운 규칙이 많았습니다. Angular는 메타 데이터를 지정하는 두 가지 지원되는 방법이 있습니다. 순수 자바 펼쳐보기를 작성하고 angular-js와 다소 유사하게 수동으로 메타 데이터를 수행하고 규칙을 계속 수행하고 추가 상용구 코드를 사용할 수 있습니다. 또는 @메타 데이터를 표현하는 데 사용되는 데코레이터 ( 자장)가있는 TypeScript로 전환 할 수 있습니다 .

그래서 여기에서 마침내 컴파일러에 도달 할 수 있습니다. 컴파일러의 역할은 해당 메타 데이터를 가져와 애플리케이션에 맞는 작업 시스템을 만드는 것입니다. 모든 부분과 모든 메타 데이터에 집중하면 컴파일러가 하나의 큰 상호 애플리케이션을 빌드합니다.

컴파일러는 어떻게합니까?

컴파일러가 작동 할 수있는 방법에 작동과 미리 두 가지가 있습니다. 여기서부터는 TypeScript를 사용하고 가정합니다.

• 실행 : 모든 데코레이터 컴파일러가 실행될 때 모든 데코레이터 정보를 가져와 데 코팅 된 클래스, 메소드 및 필드에 첨부 된 자바 펼쳐 코드로 밀어 넣습니다. 당신은 index.html당신의 참조 방법 main.js을 호출합니다 bootstrap. 이 메서드는 최상위 모듈에 전달됩니다.

부트 가능한 메소드는 실행 컴파일러를 실행하고 최상위 모듈에 대한 참조를 제공합니다. 그런 다음 런타임 컴파일러는 해당 모듈, 해당 모듈이 참조하는 모든 서비스, 구성 요소 등을 크롤링하고 모든 관련 메타 데이터를 크롤링하고 애플리케이션을 빌드합니다.

• AOT : 실행에 모든 작업을 수행하는 대신 Angular는 빌드 시간에 대부분의 작업을 수행하는 반복을 제공했습니다. 작업은 거의이 항상 웹팩 플러그인을 사용하여 수행됩니다 (가장 널리 사용되지만 가장 알려지지 않은 NPM 패키지 중 하나 여야 함). typescript 실행 된 실행 된 실행 실행 컴파일러와 동일한 입력이 실행됩니다. AOT 컴파일러는 구동과 애플리케이션을 빌드하지만 Javascript에 다시 저장합니다.

여기서의 장점은 준비 자체에 필요한 CPU 시간을 절약 할 수있을뿐 아니라 응용 프로그램의 크기도 수 있습니다.

구체적인 답변

Angular CLI 먼저 Typescript =>로 컴파일러에 내장 된 angular를 호출 한 다음 Typescript Transpiler =>를 호출 한 다음 Webpack을 호출하여 dist / 그때에 저장합니다.

아니요. Angular CLI는 Webpack을 호출합니다 (Angular CLI의 실제 서비스는 웹팩을 구성하는 것입니다. 때 ng buildWebpack을 시작하는 프록시에 지나지 언어를 호출합니다). Webpack은 먼저 스크립트 컴파일러를 호출 한 다음 각 컴파일러 (AOT 가정)를 호출하고 동시에 코드를 실행합니다.

main.ts는 부트되지 않는 프로세스를 설명하기 위해 위의 문에서 사용하는 각도 앱이 부트되어있는 Javascript .js 파일을 사용하여 시작되지 않습니다.

나는 당신이 여기서 무엇을 요구하고 확실하지 않습니다. main.tsJavascript로 변환됩니다. 해당 Javascript에는 bootstrapAngular의 진입 점 인 호출이 포함 됩니다. bootstrap완료 되면 전체 Angular 애플리케이션이 실행됩니다.

이 게시물은 Angular에 두 개의 유효성이 검증됩니다.

컴파일러보기

모듈 컴파일러

솔직히 말해서 여기서 무지를 주장 할 것입니다. 저는 우리 수준에서 모든 것을 하나의 큰 컴파일러로 생각할 수 있다고 생각합니다.

누구든지 모든 부품이 깊이로 어떻게 결합 할 수 있습니까?

위의 내용이 만족했으면합니다.

Do n't @ Me : Angular는 의존성이 높은 역할을합니다.

확실합니다. 라우팅, 뷰 빌딩, 변경 감지 및 기타 모든 작업을 수행합니다. 컴파일러는 실제로 뷰 빌드 및 변경 감지를 위해 Javascript를 생성합니다. 나는 그것이 거짓말을했을 때 거짓말이라고 말했어. 그러나 나머지 의존성은 핵심이며, 나머지 대답을 선택합니다.

컴파일러라고 불러야할까요?

많은 파싱을 수행하고 결과적으로 많은 코드를 생성 할 수 있습니다.

반면에 코드를 다른 표현으로 변환하는 것은 아닙니다. 대신 여러 가지 코드를 가져 오기 더 큰 시스템의 소모성 조각으로 짜는 것입니다. 그런 다음 부트 신뢰할 수있는 프로세스 (필요한 경우에 설치 후)는 해당 조각을 가져옵니다.

---

처음부터 시작하겠습니다.

내 응용 프로그램에서 Webpack.

애플리케이션을 빌드하고 실행하기 위해 webpack --progress 및 webpack-dev-server --inline 명령을 사용합니다. 다음과 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파일과 맵 파일 로 CHAPTER 2 합니다.

오류없이 실행 컴파일 bundle.js되면 Webpack출력 섹션 에서 선언 한 이름으로 파일을 생성 합니다 .

이제 로더를 사용하는 이유를 설명하겠습니다.

멋진-타이프 라이터 로더, angular2 템플릿 로더는 우리는 컴파일이 로더를 사용 Typescript에 선언 된베이스 파일 tsconfig.json파일 angular2 템플릿 로더를 검색 templateUrl하고 styleUrls각이 구성 요소의 메타 데이터 선언의 내부와 해당로 경로를 대체 요구 사항.

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.

마지막에 webpack-dev-server --inline 을 실행하면 자체 서버가 생성되고 web-pack.config.js대상 폴더와 진입 점을 언급 한 파일에 언급 된 경로로 응용 프로그램이 부팅 됩니다.

에서 Angular대부분의 응용 프로그램이 진입 점입니다 main.ts우리가 예 (app.module)의 초기 부트 스트랩 모듈을 언급 곳이 모듈은 모든 지시, 서비스, 모듈, 구성 요소와 전체 응용 프로그램의 라우팅 구현으로 완벽한 애플리케이션 정보가 포함되어 있습니다.

참고 : 많은 사람들은 index.html어디에도 언급하지 않았지만 응용 프로그램을 부팅 만하는 이유를 의심합니다 . 대답은 Webpackserve 명령이 실행될 때 자체 서브를 생성 index.html하고 기본 페이지를 언급하지 않은 경우 기본적으로로드 하는 것입니다.

주어진 정보가 어떤 사람들에게 도움이되기를 바랍니다.

---

Angular는 어떻게 구축합니까?

Angular CLI전화 Webpack, 때 Webpack명중 .ts이로를 통과하는 파일을 TypeScript컴파일 A 출력 변압기가 컴파일러 Angular템플릿

따라서 빌드 순서는 다음과 같습니다.

Angular CLI=> Webpack=> TypeScript컴파일러 => 컴파일러는 컴파일 시간에 TypeScript컴파일러를 호출합니다 Angular.

Angular는 어떻게 실행됩니까?

AngularJavascript파일을 사용하여 부트 스트랩 및 실행 됩니다.

실제로 부트 스트랩 프로세스는 런타임이며 브라우저를 열기 전에 발생합니다. 다음 질문으로 넘어갑니다.

그래서 부트 스트랩 프로세스가 Javascript파일에서 발생 한다면 왜 Angular문서는 main.ts부트 스트랩 프로세스를 설명하기 위해 TypeScript 파일을 사용 합니까?

Angular문서 .ts는 소스이기 때문에 파일 에 대해 이야기 합니다.

이것은 간단한 대답입니다. 누구든지 깊이 대답 할 수 있는지 감사합니다.

크레딧은 채팅에서 내 질문에 답한 @ Toxicable 로 이동합니다 .

---

그래서 부트 스트랩 프로세스가 Javascript 파일에서 발생한다면 Angular Docs는 왜 부트 스트랩 프로세스를 설명하기 위해 main.ts TypeScript 파일을 사용합니까?

이것은 ng build아직 생성되지 않은 main.ts 의 변형 된 .js 버전의 일부입니다 . 초보자가이 코드를 어떻게 이해하기를 기대합니까? 훨씬 복잡해 보이지 않습니까?

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순서 uglifies 및 축소하고 코드가 최적화되는, 생성 된 번들은 컴팩트하고 비트 읽을 수없는 형식입니다.

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를 사용하여 각도 응용 프로그램의 부트 스트랩 프로세스를 설명합니다. Angular : 왜 TypeScript인가? 이 외에도 훌륭한 프레임 워크의 작성자라면 프레임 워크를 대중적이고 사용자 친화적으로 만들기 위해 어떤 접근 방식을 사용했을까요? 복잡한 설명보다는 명확하고 간결한 설명을 하시겠어요? angular.io 문서에 자세한 설명이 부족하고 그다지 좋지는 않지만 지금까지 그들이 더 좋게 만들기 위해 열심히 노력하고 있음에 동의합니다.

참고 URL : https://stackoverflow.com/questions/48942691/how-angular-builds-and-runs