Bündeln einer Angular-App für die Produktion

1. Verwenden Sie die Angular-CLI, um eine Angular-App für die Produktion zu bündeln
2. Verwenden Sie Webpack, um eine Angular-App für die Produktion zu bündeln
3. Verwenden Sie Gulp, um eine Angular-App für die Produktion zu bündeln
4. Fazit

Dieser Artikel zeigt verschiedene Methoden zum Erstellen einer Angular-Anwendung für die Bereitstellung nach dem erfolgreichen Erstellen der App.

Bevor wir fortfahren und die App erstellen, ist es ideal, die App mit ng serve --prod auszuführen; Wir fahren dann mit dieser URL fort: http://localhost:4200/, um zu sehen, wie die App ausgeführt wird, und von hier aus können wir das Verhalten der Anwendung in Aktion beobachten.

Sehen wir uns nun verschiedene Methoden zum Bündeln einer Angular-Anwendung an.

Verwenden Sie die Angular-CLI, um eine Angular-App für die Produktion zu bündeln

Diese Methode ist die am weitesten verbreitete Methode zum Bündeln einer Angular-Anwendung, da sie in allen Versionen von Angular funktioniert. CLI bereitet dem Entwickler während des Build-Prozesses weniger Kopfzerbrechen.

Die CLI-Methode ist die beste Wahl für einen Entwickler, der das Projekt anpassen möchte, um die Ahead-of-Time-Kompilierung zu verwenden.

Zuerst muss CLI in unserer Angular-Anwendung installiert werden; Wir öffnen unser Terminal, geben npm install -g @angular/cli ein und drücken die Eingabetaste.

Nachdem diese vollständig installiert wurde, gehen wir zu einem neuen Ordner und erstellen eine neue Anwendung, indem wir ng new newApp eingeben. Also fahren wir mit diesem Ordner fort, um mit dem Erstellen unserer App zu beginnen.

Sobald wir unsere App entwickelt haben, bündeln wir die App, indem wir ng build eingeben.

Es ist normalerweise ideal zum Komprimieren gebündelter Apps, da die App dadurch schneller geladen wird und im Allgemeinen effizient arbeitet.

Wir können mit der Brotli-Komprimierung komprimieren. Wir öffnen das Terminal und geben ein: for i in dist/*/*; mach brotli $i.

Dann sind wir damit fertig, unser Angular mit Angular CLI zu bündeln.

Verwenden Sie Webpack, um eine Angular-App für die Produktion zu bündeln

Die Webpack-Methode wird oft als leistungsstarker Modul-Bündler angesehen. Es überwacht die Quellcodes der gebauten Apps und sucht nach den import-Anweisungen.

Es entwickelt zwei Abhängigkeitsgraphen und veröffentlicht dann zwei Bundle-Dateien für die Anwendung. Eine ist die Datei app.js, die nur den Anwendungscode enthält, und die andere heißt vendor.js-Datei, die alle Herstellerabhängigkeiten enthält.

Um das Webpack zu installieren, erstellen wir zuerst einen neuen Projektordner namens angular-webpack, wir cd in diese Datei, erstellen eine Datei namens package.json und kopieren die folgenden Codes hinein.

Code-Snippet (package.json):

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

Als nächstes öffnen wir ein Terminal und installieren diese Pakete mit npm install. Wir führen den Befehl ng build aus, wenn das Projekt abgeschlossen ist.

Verwenden Sie Gulp, um eine Angular-App für die Produktion zu bündeln

Gulp ist ein weiteres leistungsstarkes Tool zum Bündeln von Angular-Anwendungen auf dem Angular 2-Framework, da es effizienter zum Erstellen komplexer, größerer Projekte ist. Außerdem gibt es Teile des Gulp-Build-Prozesses, die automatisiert werden können, wodurch der Arbeitsablauf weniger umständlich wird.

Zuerst erstellen wir ein neues Projekt; Wir gehen in den Ordner und installieren Gulp vom Terminal aus mit $npm install gulp.

Wir erstellen eine Datei gulpfile.js im Projektordner und kopieren alle HTML-Dateien aus dem Ordner app/views in den Ordner dist. Dann führen wir im Terminal $gulp copy-html-files aus.

Entwickler müssen nicht alle Aufgaben ausführen, die mit dem Gulp-Build verbunden sind; man muss $npm install gulp-run-sequence installieren. Es ermöglicht, dass mehrere Aufgaben in der gulpfile.js vom Terminal aus ausgeführt werden.

Wir führen den $gulp build aus, wenn unser Projekt vollständig fertig ist.

In Fällen, in denen wir einige Inhalte aus dem Ordner dist entfernen möchten, vielleicht vor der Versionierung, oder der Entwickler vorherige Dateien löschen und neue Dateien einfügen möchte, muss nur Folgendes eingegeben werden: npm install gulp-clean im Endgerät.

In Anbetracht der Tatsache, dass die erforderlichen Schritte zum Erstellen einer Angular-App mit Gulp ziemlich langwierig sind, können wir diesen Prozess automatisieren. Wir installieren npm install gulp-watch; Dadurch werden jedes Mal, wenn wir unsere Dateien ändern, alle in der Ausführungssequenz definierten Befehle erneut ausgeführt.

Fazit

Es gibt verschiedene Möglichkeiten, eine App optimal auf Angular zu bauen; Die angewandte Methode hängt hauptsächlich von der Art des Projekts, das wir aufbauen möchten, der Zeit und der Erfahrung ab.