みなさんこんにちは！
最新のAngularフロントエンドアプリケーションには、次の機能が含まれている必要があります。
- 型付きJSを使用する機能-Typescript
- HMR （ホットモジュール交換）を使用して開発の利便性と生産性を確保します。
- アプリケーションのモジュール性とモジュールの遅延ロードの可能性（遅延ロード）;
- AoT-アプリケーションのパフォーマンスを改善するモード（事前）。
これらの問題を解決する多くのビルドオプションがあります（angular cli、A2シードなど）。 通常、それらは複雑な構造を持ち、調整/拡張が不十分で、変更できないモノリスです。
この記事では、Angular 2+とwebpackを組み合わせて、アセンブリ/開発のすべての段階に対処する方法を説明します。
驚くほど簡単です。
最終アプリケーション 。
微妙なポイントを最大限に強調してみます。 行きましょう。
1）プロジェクトを作成する
誰も推測しないようにプロジェクトフォルダーを作成します。これを
angle-projectと呼びましょう。
（私は
Webstormを使用していますが、エディターでも同じことができます）
2）環境
node.jsをインストールします（デフォルトではバンドルに
npm ）。
package.jsonを作成します。もちろん、プロジェクトに接続されているモジュールの数は無限になる可能性がありますが、本格的な開発に必要なものだけを残します。 多くのモジュールがありますが、それらがなぜ必要なのかを正当化しようとします。
package.json{ "name": "angular-project", "version": "1.0.0", "description": "angular scaffolding", "author": "maxim1006", "license": "MIT", "dependencies": {
3）モジュールのインストール
ターミナルから、package.jsonがあるフォルダーに移動し、
npm iコマンドを入力します。
4）グローバルモジュールのインストール
ターミナルでは
rimraf、webpackおよび
webpack-dev-serverコマンドを使用するため、
npm i rimraf webpack webpack-dev-server -gコマンドを使用してPCにそれらを説明する必要があります。
これらの操作の後、プロジェクトに
node_modulesフォルダーが
追加されました。
5）README.md
README.mdを作成します。この記事へのリンクに加えて、プロジェクト開発の機能を追加できます。
6）リンター
tslint.jsonを作成しますが、
特効薬がないのでここでやめません。
tslint.json { "rules": { "no-unused-variable": true, "curly": true, "no-console": [ true, "log", "error", "debug", "info" ], "no-debugger": true, "no-duplicate-variable": true, "no-eval": true, "no-invalid-this": true, "no-shadowed-variable": true, "no-unsafe-finally": true, "no-var-keyword": true, "triple-equals": [ true, "allow-null-check", "allow-undefined-check" ], "semicolon": [ true, "always", "ignore-interfaces" ], "variable-name": [ true, "ban-keywords", "check-format", "allow-leading-underscore" ] } }
7）PostCss
スタイルプレフィックスを記述しないように
postcss.config.jsを作成します
postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers: [ 'last 2 versions' ], cascade: true }) ] };
もう少し複雑な操作はさらに進みますので、注意してください。
8）Typescript tsconfig.jsonのセットアップ
私の意見では、A2 +の開発は
typescriptなしでは不可能なので、設定する必要があります。 設定は正常ですが、質問がある場合はコメントで質問してください。
9）Webpackセットアップ
最も難しいのは、webpackに、私たちが望むものを理解させることです。 これを行うには、パニックなしで
webpack.conf.jsを作成し、すべてを説明しようとします
10）src構造
srcフォルダーを除いて、プロジェクトは次のようになります。
srcフォルダーに構造を作成します。
いくつかのコメント：
アプリフォルダーには角度アプリケーションがあり、
アセットフォルダーには補助ファイル、
index.htmlがsrcに配置されています。 アセットでは、テーマをサポートし、フォルダーを分割して、フォント、画像、スタイルを簡単に操作できます。
私たちの会社では、私たちの意見では、少し修正され、より最適な
BEM方法論を使用しています。
base.less-ベーステーマの集約.lessファイル：
base.less // Common @import "themes/base/styles/common/normalize"; @import "themes/base/styles/common/colors"; @import "themes/base/styles/common/common"; @import "themes/base/styles/common/fonts"; @import "themes/base/styles/common/vars"; // Blocks // (please, add new blocks in alphabetical order) @import "themes/base/styles/blocks/app-component";
私たちの意見では、アプリケーションの機能部分とスタイル部分を区別する必要があることに注意してください。これにより、アセンブリとプロジェクトの両方のサポートの多くの問題が解決されます。 BEMと1つのブロックというパラダイムを使用すると、ファイルが1つ少なくなり、アプローチに問題はありません。 ただし、多くの選択肢があります。 この投稿の付録で、資産をさらに詳しく掘り下げることができます。 記事へのコメントで質問してください。
11）index.hml
index.html -A2 +アプリケーションで非常にシンプルになりました
index.html <!DOCTYPE html> <html> <head> <base href="/"> // A2+ routing <meta charset="utf-8"> <title>Landing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="/img/favicon.ico"> </head> <body> <app-component>Loading...</app-component> <script type="text/javascript" src="./ng-app.js"></script> </body> </html>
12）角度アプリ
深呼吸してください、私たちはすでにすべての複雑なことをしました、今フレームワーク自体は残ります）
appフォルダーに構造を作成します。
一見-リバス。
ただし、少なくとも
Angular 2+チュートリアルを完了している場合は、これらすべてがすでによく知られています。 残りの短いコメント：アプリケーション全体がモジュールに分割され、フレームワークはそのようなエンティティ-モジュールを提供します。 メインモジュール-app.module.tsがあり、アプリケーションの機能を拡張する追加モジュールがあります。 ほとんどのアプリケーションには、ホームモジュール、遅延モジュール、共有モジュールがあります。 モジュールの名前はもちろんオプションですが、命名規則に従えば、アプリケーションの拡張性に問題はありません。
フレームワーク自体についてはあまり触れません。優れた
ドキュメントがあり
ます 。 微妙な点に焦点を当てる：
ng-main.ts
それはすべて彼から始まります
ng-main.ts import './ng-polyfills'; // ie 9+ import … // webpack , if (process.env.STATIC) { //console.log("******************You are in Dev mode******************"); platformBrowserDynamic().bootstrapModule(AppModule).then(():any => {}); } else if (process.env.HMR) { // hmr Angular //console.log("******************You are in HMR mode******************"); bootloader(main); } export function main() { return platformBrowserDynamic() .bootstrapModule(AppModule) }
AoTのng-main-aot.ts
AoT （Ahead-of-Time Compilation）モードの場合、別のメインファイルng-main-aot.tsを作成します。
ng-main-aot.ts import … console.log("******************You are in prod mode******************"); enableProdMode(); platformBrowser() .bootstrapModuleFactory(<any>AppModuleNgFactory) .catch(error=>console.log(error));
Hmr、スタイル、hammerjs
HMR、アプリケーションのスタイル（念のため、画像を接続する例を残しました）、およびモバイル開発用のhammerjs設定は、この方法で
app.module.tsに接続されます。
app.module.ts require("style-loader!../assets/base.less"); // webpack import … // hammer.js export class MyHammerConfig extends HammerGestureConfig { overrides = <any>{ 'swipe': {velocity: 0.4, threshold: 20} } } @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, HomeModule, NgRoutingModule ], providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { constructor(public appRef: ApplicationRef) {} hmrOnInit(store) { if (!store || !store.state) return; if ('restoreInputValues' in store) { store.restoreInputValues(); } this.appRef.tick(); delete store.state; delete store.restoreInputValues; } hmrOnDestroy(store) { let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement); store.disposeOldHosts = createNewHosts(cmpLocation); store.state = {data: 'yolo'}; store.restoreInputValues = createInputTransfer(); removeNgStyles(); } hmrAfterDestroy(store) { store.disposeOldHosts(); delete store.disposeOldHosts; } }
遅延読み込み
遅延読み込みモジュールは
ng-routing.module.tsにプラグインします
ng-routing.module.ts import … const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, // lazy , .js webpack {path: 'lazy', loadChildren: './modules/lazy/lazy.module#LazyModule'}, {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class NgRoutingModule { }
ルーターで遅延モジュールを接続した後、遅延をロードするモジュールで（lazy.module.tsの例を使用して）次のことが必要です。
lazy.module.ts import … const routes: Routes = [ {path: '', component: LazyComponent}, ]; @NgModule({ imports: [SharedModule, RouterModule.forChild(routes)], exports: [LazyComponent], declarations: [LazyComponent] }) export class LazyModule {}
うーん...まあ、それは基本的にそれです。 この投稿の
アプリケーション内のアプリフォルダーを掘り下げることができます。
エディターでコードを変更するたびにページをリロードする開発では、package.jsonのフォルダーにあるターミナルに書き込みます：
npm run serve同じですが、ページをリロードせずに：
npm run hmrAoTでprodをビルドする：
npm run prodprodを監視するために静的サーバーを起動します：
npm run prodServer./distフォルダーのクリーン：
npm run cleanほんの数ステップで動作します：
Angular 4、AoT、HMR、Lazy loadingを使用したwebpackビルド 。 テンプレートやスタイルなど、すべてがきちんとバンドルに入れられ、最適化されます。
もちろん、この構成は拡張、改善、変更できますが、私の意見では、Angular 2+で安全に開発を開始するには十分です。
PS
AoTの小さな広告：Angular SPAアプリケーションのパフォーマンスを大幅に向上させます。
ご清聴ありがとうございました。