web-dev-qa-db-ja.com

Angularの構築および実行方法

Angularが舞台裏でどのように構築され実行されるかを知りたいですか？

以下は、私がこれまでに理解したことです。何かを見逃したかどうか知りたい。

Angularのビルド方法

TypeScriptを使用してangularアプリをコーディングした後、Angular CLIコマンドを使用してアプリをビルドします。

ng buildコマンドはアプリケーションを出力ディレクトリにコンパイルし、ビルドアーティファクトはdist/ディレクトリに保存されます。

内部プロセス

1。Angular CLIは、Webpackを実行して、すべてのJavaScriptおよびCSSコードをビルドおよびバンドルします。

2。次に、WebpackがTypeScriptローダーを呼び出して、angularプロジェクト内のすべての.tsファイルをフェッチし、それらをJavaScriptに、つまり.jsファイルに変換します。理解することができます。

これ 投稿には、Angularに2つのコンパイラーがあることが示されています。

  • コンパイラを表示

  • モジュールコンパイラ

ビルドに関する質問

ビルドプロセスを呼び出すシーケンスは何ですか？

Angular CLIは、最初にTypeScriptで記述されたangular組み込みコンパイラを呼び出し、次にTypeScript Transpilerを呼び出し、次にWebpackを呼び出してdist/ディレクトリにバンドルして保存します。

Angularの実行方法

ビルドが完了すると、アプリのすべてのコンポーネント、サービス、モジュールなどが、ブラウザーでangularアプリケーションを実行するために使用されるJavascript .jsファイルに変換されます。

Angular Docs のステートメント

  1. bootstrapをAppComponentクラス（main.ts内）で使用すると、Angularは<app-root>でindex.htmlを探し、それを見つけ、AppComponentのインスタンスをインスタンス化し、<app-root>内でレンダリングします。鬼ごっこ。

  2. ユーザーがアプリケーション内を移動すると、Angularはコンポーネントを作成、更新、および破棄します。

実行に関する質問

上記のステートメントでbootstrapプロセスを説明するためにmain.tsが使用されていますが、angularアプリはJavascript .jsfilesを使用してブートストラップまたは起動されていませんか？

上記のすべてのステートメントは、Javascript .jsfilesを使用して実行時に行われませんか？

誰もがすべての部品がどのように深く組み合わされるかを知っていますか？

angulartypescriptbuildangular-cli
57
stom

（私がAngularと言うときはAngular 2+を意味し、angular 1に言及している場合は、angular-jsと明示的に言います）。

プレリュード：わかりにくい

角度、そしておそらくより正確には、angular-cliは、ビルドプロセスに関与するJavascriptの多くのトレンドツールを統合しました。少し混乱を招きます。

混乱を助長するために、compileという用語は、テンプレートの擬似HTMLを取得してDOM要素に変換するプロセスを指すために、angular-jsでよく使用されていました。これはコンパイラーが行うことの一部ですが、小さな部分の1つです。

まず、Angularを実行するためにTypeScript、angular-cli、またはWebpackを使用する必要はありません。あなたの質問に答えるために。 「Angularとは」という簡単な質問を見てください。

角度：それは何をしますか？

このセクションは議論の余地があるかもしれません。 その中核となるAngularが提供するサービスは、Javascript、HTML、およびCSSで機能する依存性注入メカニズムです。すべての小さな部分を個別に記述し、各小さな部分で、他の部分を参照するためのAngularのルールに従います。 Angularは、それを何らかの形で織り込みます。

（少し）より具体的にするには：

  • テンプレートを使用すると、HTMLをJavascriptコンポーネントに配線できます。これにより、DOM自体へのユーザー入力（ボタンのクリックなど）がJavascriptコンポーネントにフィードされ、Javascriptコンポーネントの変数がDOMの構造と値を制御できるようになります。
  • Javascriptクラス（Javascriptコンポーネントを含む）は、依存している他のJavascriptクラスのインスタンスにアクセスできる必要があります（たとえば、古典的な依存性注入）。 BookListComponentにはBookListServiceのインスタンスが必要です。BookListServiceには、BookListPolicyなどのインスタンスが必要になる場合があります。これらの各クラスには異なるライフタイムがあります（たとえば、サービスは通常シングルトンであり、コンポーネントは通常シングルトンではありません）Angularは、これらすべてのライフタイム、コンポーネントの作成、および依存関係の配線を管理する必要があります。
  • CSSルールは、DOMのサブセットにのみ適用されるようにロードする必要がありました（コンポーネントのスタイルはそのコンポーネントに対してローカルです）。

注意すべき重要な可能性の1つは、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＃は属性を使用してメタデータを表現します。

Javascriptには、このメタデータを組み込みで公開するための優れたメカニズムがありません。 angle-jsは試みを試みましたが、悪くはありませんでしたが、簡単にチェックできず、少し混乱するルールがたくさんありました。 Angularでは、メタデータを指定する2つのサポートされた方法があります。純粋なJavascriptを記述してメタデータを手動で指定することができます。これは、angular-jsに似ており、ルールに従って追加のボイラープレートコードを記述するだけです。あるいは、メタデータを表現するために使用されるデコレータ（@シンボル）を備えたTypeScriptに切り替えることもできます。

これが最終的にコンパイラーに到達できる場所です。コンパイラの仕事は、そのメタデータを取得し、アプリケーションである作業ピースのシステムを作成することです。すべての部分とすべてのメタデータに焦点を当てると、コンパイラは1つの大きな相互接続されたアプリケーションを構築します。

コンパイラはどのようにそれを行いますか？

コンパイラーの動作には、実行時と事前処理の2つの方法があります。ここから、TypeScriptを使用していると仮定します。

  • Runtime：TypeScriptコンパイラーは、実行時にすべてのデコレーター情報を取得し、装飾されたクラス、メソッド、およびフィールドに添付されたJavascriptコードに押し込みます。 index.htmlで、bootstrapメソッドを呼び出すmain.jsを参照します。このメソッドには、トップレベルモジュールが渡されます。

bootstrapメソッドは、ランタイムコンパイラを起動し、そのトップレベルモジュールへの参照を提供します。ランタイムコンパイラは、そのモジュール、そのモジュールによって参照されるすべてのサービス、コンポーネントなど、および関連するすべてのメタデータのクロールを開始し、アプリケーションを構築します。

  • AOT：実行時にすべての作業を行うのではなく、Angularはビルド時にほとんどの作業を行うためのメカニズムを提供します。ほとんどの場合、これは webpackプラグイン を使用して行われます（これは、最も人気がありながら、あまり知られていないnpmパッケージの1つでなければなりません）。 TypeScriptコンパイルの実行後に実行されるため、実行時コンパイラと本質的に同じ入力が表示されます。 AOTコンパイラは、ランタイムコンパイラと同じようにアプリケーションを構築しますが、Javascriptに保存し直します。

ここでの利点は、コンパイル自体に必要なCPU時間を節約できるだけでなく、アプリケーションのサイズを削減できることです。

具体的な回答

Angular CLIは、最初にTypeScriptで記述されたangularコンパイラーを呼び出します=>次にTypeScript Transpilerを呼び出します=> Webpackを呼び出してdist /ディレクトリーにバンドルして保存します。

いいえ。Angular CLIはWebpackを呼び出します（Angular CLIの実際のサービスはwebpackを設定しています。ng buildを実行すると、Webpackを起動するプロキシ以上のものではありません）。 Webpackは、最初にTypeScriptコンパイラーを呼び出し、次にangularコンパイラー（AOTを想定）を呼び出しますが、すべて同時にコードをバンドルします。

上記のステートメントでbootstrapプロセスを説明するためにmain.tsが使用されていますが、angularアプリはJavascript .jsファイルを使用してブートストラップまたは起動されませんか？

ここであなたが何を求めているのか、私には完全には定かではありません。 main.tsはJavascriptに変換されます。そのJavascriptには、Angularへのエントリポイントであるbootstrapへの呼び出しが含まれます。 bootstrapが完了すると、完全なAngularアプリケーションが実行されます。

この投稿では、Angularには2つのコンパイラーがあります。

コンパイラを表示

モジュールコンパイラ

正直に言うと、ここで無知を主張します。私たちのレベルでは、すべてを1つの大きなコンパイラと考えることができると思います。

誰もがすべての部品がどのように深さで一緒に収まるか知っていますか？

上記がこれを満足することを望みます。

@ Meをしないでください：Angularは依存性注入以上のことを行います

承知しました。ルーティング、ビューの構築、変更の検出など、あらゆる種類の処理を行います。コンパイラーは、実際にビューの構築と変更検出のためにJavascriptを生成します。私はそれが単なる依存性注入だと言ったときに嘘をつきました。ただし、依存性注入はコアにあり、残りの答えを駆動するのに十分です。

コンパイラと呼ぶべきでしょうか？

おそらく多くの解析と字句解析を行い、その結果として間違いなく多くのコードを生成するので、それをコンパイラと呼ぶことができます。

一方、実際にコードを単に異なる表現に変換するわけではありません。代わりに、大量の異なるコードを取得し、それらをより大きなシステムの消耗品に織り込みます。 bootstrapプロセスは（必要に応じてコンパイル後に）それらのピースを取り、Angularコアにプラグインします。

60
Pace

最初から始めましょう。

私のアプリケーションでは、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ファイルとマップファイルに変換します。

コンパイルエラーなしで実行すると、Webpack出力セクションで宣言した名前のbundle.jsファイルが作成されます。

次に、ローダーを使用する理由を説明します。

awesome-TypeScript-loader、angular2-template-loaderこれらのローダーを使用して、tsconfig.jsonファイルとangle2-template-loader検索で宣言されたベースのTypeScriptファイルをコンパイルしますAngular 2コンポーネントメタデータ内のtemplateUrlおよびstyleUrls宣言の場合は、対応する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ファイルと一緒にバンドルするために使用されます。

最後にwebpack-dev-server --inlineを実行すると、独自のサーバーが作成され、宛先フォルダーとエントリに言及したweb-pack.config.jsファイルで言及されたパスとしてアプリケーションが起動します。ポイント。

ほとんどのアプリケーションのAngular 2エントリポイントはmain.tsです。ここで、最初のbootstrapモジュール（app.module）について言及します。このモジュールには、すべてのディレクティブ、サービスなどの完全なアプリケーション情報が含まれます、モジュール、コンポーネント、およびアプリケーション全体のルーティング実装。

注：多くの人々は、index.htmlがアプリケーションを起動する理由に疑問を抱いています。答えは、Webpack serveコマンドを実行すると独自のサーブが作成され、デフォルトページに言及していない場合はデフォルトでindex.htmlがロードされます。

与えられた情報が一部の人々の役に立つことを願っています。

8
Arun

Angularはどのようにビルドしますか？

Angular CLIはWebpackを呼び出し、Webpackが.tsファイルにヒットすると、TypeScriptをコンパイルする出力トランスフォーマーを備えたAngularコンパイラーに渡します。テンプレート

ビルドシーケンスは次のとおりです。

Angular CLI => Webpack => TypeScriptコンパイラー=> TypeScriptコンパイラーは、コンパイル時にAngularコンパイラーを呼び出します。

Angularの実行方法？

Angularは、Javascriptファイルを使用してブートストラップおよび実行します。

実際、bootstrapプロセスはランタイムであり、ブラウザを開く前に発生します。これにより、次の質問に進みます。

bootstrapプロセスがJavascriptファイルで発生する場合、なぜAngular Docsはbootstrapプロセスを説明するためにmain.ts TypeScriptファイルを使用するのですか？

Angularドキュメントはソースであるため、.tsファイルについて説明しているだけです。

これは簡単な答えです。誰でも詳細に回答できるかどうかを評価してください。

クレジットはチャットで質問に答えるために@ Toxicable になります。

3
stom

bootstrapプロセスがJavascriptファイルで発生する場合、なぜAngular Docsはmain.ts TypeScriptファイルを使用してbootstrapプロセスを説明するのですか？

これは、ng buildによって出力されるmain.tsの変換された.jsバージョンの一部であり、まだu化および縮小されていません。初心者がこのコードを理解するにはどうすればよいでしょうか？ずっと複雑に見えませんか？

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); });

また、コードを最適化するためにコードをu化および縮小する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ファイルは人間が判読可能で明快であるため、angle.ioはmain.tsを使用してbootstrapアプリケーションのangularプロセスを説明します。 Angular：Why TypeScript ？ これとは別に、このような素晴らしいフレームワークの作成者であった場合、フレームワークを人気がありユーザーフレンドリーにするためにどのようなアプローチを使用したでしょうか？複雑な説明ではなく、明確で簡潔な説明を求めませんか？ angular.ioのドキュメントには詳細な説明がなく、それはそれほど素晴らしいものではありませんが、それを改善するために彼らが懸命に努力しているのを見てきました。

1
Vikas