angular - プロダクション用に Angular アプリをバンドルする方法

Question

稼働中の Web サーバーでの運用のために Angular (バージョン 2、4、6、...) をバンドルする最良の方法は何ですか。

Angular のバージョンを回答に含めてください。これにより、新しいリリースに移行したときに追跡できるようになります。

score 59 · Accepted Answer

`2.0.1 Final`Gulp を使用する (TypeScript - ターゲット: ES5)

ワンタイムセットアップ

npm install (direcory が projectFolder の場合、cmd で実行)

バンドル手順

npm run bundle (direcory が projectFolder の場合、cmd で実行)

バンドルはprojectFolder / bundles /に生成されます

出力

bundles/dependencies.bundle.js[サイズ: ~ 1 MB (できるだけ小さい)]
- フレームワーク全体ではなく、rxjs と angular の依存関係が含まれています
bundles/app.bundle.js[サイズ: プロジェクトによって異なります。私のサイズは~ 0.5 MB です]
- あなたのプロジェクトが含まれています

ファイル構造

projectFolder / app / (すべてのコンポーネント、ディレクティブ、テンプレートなど)
projectFolder / gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

gulp.task('inline-templates', function () {
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
    .pipe(tsc({
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    }))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

gulp.task('bundle-dependencies', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

projectFolder / package.json (クイックスタートガイドと同じ、バンドルに必要な devDependencies と npm-scripts のみを表示)

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  },
  "license": "ISC",
  "dependencies": {
    ***
  },
  "devDependencies": {
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  }
}

projectFolder / systemjs.config.js (クイックスタートガイドと同じですが、ここでは利用できなくなりました)

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  };

  // filterSystemConfig - index.asp's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

projetcFolder / dist-systemjs.config.js (systemjs.config.json との違いを示しただけ)

var map = {
    'app':                        'dist/app',
  };

projectFolder / index.html (本番) -スクリプトタグの順序は重要です。バンドルタグの後にタグを配置してdist-systemjs.config.jsもプログラムは実行できますが、依存関係バンドルは無視され、依存関係はnode_modulesフォルダーから読み込まれます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <base href="/"/>
  <title>Angular</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<my-app>
  loading...
</my-app>

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>

<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

projectFolder / app / boot.tsは、ブートストラップがある場所です。

私ができる最善のこと:)

score 16 · Accepted Answer

SystemJs ビルダーと gulp を使用した Angular 2 プロダクションワークフロー

Angular.io にはクイックスタートチュートリアルがあります。このチュートリアルをコピーし、すべてをdistフォルダーにバンドルするためのいくつかの簡単なgulpタスクで拡張しました。これは、サーバーにコピーして、そのように機能します。Jenkis CI でうまく動作するようにすべてを最適化しようとしたので、node_modules はキャッシュでき、コピーする必要はありません。

Github のサンプルアプリを使用したソースコード: https://github.com/Anjmao/angular2-production-workflow

製作までの流れ

typescripts でコンパイルされた js ファイルと dist フォルダーを消去する
app フォルダー内の typescript ファイルをコンパイルする
SystemJs バンドラーを使用して、ブラウザーキャッシュの更新用に生成されたハッシュを含むすべてを dist フォルダーにバンドルします。
gulp-html-replace を使用して index.html スクリプトをバンドルされたバージョンに置き換え、dist フォルダーにコピーします
assetsフォルダー内のすべてをdistフォルダーにコピーします

Node : いつでも独自のビルドプロセスを作成できますが、angular-cli を使用することを強くお勧めします。これには、必要なすべてのワークフローがあり、現在は完全に機能するためです。すでに本番環境で使用しており、angular-cli にはまったく問題はありません。

score 15 · Accepted Answer

Angular CLI 1.xx (Angular 4.xx、5.xx で動作)

これは以下をサポートします。

Angular 2.x および 4.x
最新の Webpack 2.x
Angular AoT コンパイラ
ルーティング (通常および遅延)
SCSS
カスタムファイルのバンドル (アセット)
追加の開発ツール (リンター、ユニット、およびエンドツーエンドのテストセットアップ)

初期設定

ng 新しいプロジェクト名 --routing

--style=scssSASS .scss サポートを追加できます。

--ng4Angular 2 の代わりに Angular 4 を使用するために追加できます。

プロジェクトを作成すると、CLI が自動的に実行npm installされます。代わりに Yarn を使用したい場合、またはインストールせずにプロジェクトのスケルトンを確認したい場合は、ここで方法を確認してください。

バンドルの手順

プロジェクトフォルダー内:

ng ビルド -prod

~~現在のバージョン--aotでは、開発モードで使用できるため、手動で指定する必要があります (ただし、速度が遅いため実用的ではありません)。~~

これは、さらに小さなバンドルに対しても AoT コンパイルを実行します (Angular コンパイラではなく、コンパイラ出力を生成します)。生成されるコードが小さいため、Angular 4 を使用する場合、バンドルは AoT ではるかに小さくなります。
開発モード (ソースマップ、縮小なし) で AoT を使用してアプリをテストし、を実行して AoT をテストできますng build --aot。

出力

./distで変更できますが、デフォルトの出力ディレクトリはです./angular-cli.json。

展開可能なファイル

ビルドステップの結果は次のとおりです。

(注:<content-hash>ファイルのコンテンツのハッシュ/フィンガープリントを指します。これは、キャッシュバスティングの方法であることを意図しています。これは、Webpack がscriptタグを単独で書き込むため可能です)

./dist/assets
からそのままコピーされたファイル./src/assets/**
./dist/index.html
から./src/index.html、webpackスクリプトを追加した後、
ソーステンプレートファイルはで構成可能です./angular-cli.json
./dist/inline.js
小さな webpack ローダー / ポリフィル
./dist/main.<content-hash>.bundle.js
生成/インポートされたすべての .js スクリプトを含むメインの .js ファイル
./dist/styles.<content-hash>.bundle.js
CLI の方法である CSS に Webpack ローダーを使用する場合、ここで JS を介してロードされます。

古いバージョンでは、サイズと.mapソースマップファイルをチェックするために gzip 圧縮されたバージョンも作成されましたが、人々がこれらを削除するよう求め続けたため、これはもはや行われません。

その他のファイル

その他の特定の状況では、他の不要なファイル/フォルダーが見つかる場合があります。

./out-tsc/
./src/tsconfig.jsonさんからoutDir
./out-tsc-e2e/
./e2e/tsconfig.jsonさんからoutDir
./dist/ngfactory/
AoT コンパイラから (ベータ 16 の時点で CLI をフォークしないと構成できません)

score 1 · Accepted Answer

ng serve は、開発目的でアプリケーションを提供するために機能します。制作に関してはどうですか？package.json ファイルを調べると、使用できるスクリプトがあることがわかります。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

ビルドスクリプトは、 --prod フラグを指定して Angular CLI の ng ビルドを使用します。それでは試してみましょう。次の 2 つの方法のいずれかで実行できます。

# npm スクリプトを使用

npm run build

# CLI を直接使用

ng build --prod

今回は、5 つではなく 4 つのファイルが与えられます。--prod フラグは、アプリケーションのサイズを大幅に小さくするよう Angular に指示します。

angular - プロダクション用に Angular アプリをバンドルする方法

12 に答える 12

2.0.1 FinalGulp を使用する (TypeScript - ターゲット: ES5)