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 のステートメント
bootstrapをAppComponent
クラス(main.ts内)で使用すると、Angularは<app-root>
でindex.html
を探し、それを見つけ、AppComponentのインスタンスをインスタンス化し、<app-root>
内でレンダリングします。鬼ごっこ。
ユーザーがアプリケーション内を移動すると、Angularはコンポーネントを作成、更新、および破棄します。
実行に関する質問
上記のステートメントでbootstrapプロセスを説明するためにmain.ts
が使用されていますが、angularアプリはJavascript .js
filesを使用してブートストラップまたは起動されていませんか?
上記のすべてのステートメントは、Javascript .js
filesを使用して実行時に行われませんか?
誰もがすべての部品がどのように深く組み合わされるかを知っていますか?
(私が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は、それを何らかの形で織り込みます。
(少し)より具体的にするには:
注意すべき重要な可能性の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を使用していると仮定します。
index.html
で、bootstrap
メソッドを呼び出すmain.js
を参照します。このメソッドには、トップレベルモジュールが渡されます。bootstrapメソッドは、ランタイムコンパイラを起動し、そのトップレベルモジュールへの参照を提供します。ランタイムコンパイラは、そのモジュール、そのモジュールによって参照されるすべてのサービス、コンポーネントなど、および関連するすべてのメタデータのクロールを開始し、アプリケーションを構築します。
ここでの利点は、コンパイル自体に必要な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つの大きなコンパイラと考えることができると思います。
誰もがすべての部品がどのように深さで一緒に収まるか知っていますか?
上記がこれを満足することを望みます。
承知しました。ルーティング、ビューの構築、変更の検出など、あらゆる種類の処理を行います。コンパイラーは、実際にビューの構築と変更検出のためにJavascriptを生成します。私はそれが単なる依存性注入だと言ったときに嘘をつきました。ただし、依存性注入はコアにあり、残りの答えを駆動するのに十分です。
おそらく多くの解析と字句解析を行い、その結果として間違いなく多くのコードを生成するので、それをコンパイラと呼ぶことができます。
一方、実際にコードを単に異なる表現に変換するわけではありません。代わりに、大量の異なるコードを取得し、それらをより大きなシステムの消耗品に織り込みます。 bootstrapプロセスは(必要に応じてコンパイル後に)それらのピースを取り、Angularコアにプラグインします。
最初から始めましょう。
私のアプリケーションでは、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
がロードされます。
与えられた情報が一部の人々の役に立つことを願っています。
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 になります。
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のドキュメントには詳細な説明がなく、それはそれほど素晴らしいものではありませんが、それを改善するために彼らが懸命に努力しているのを見てきました。