[MUSIC]
Im vorherigen Kurs auf Bootstrap 4
haben wir gelernt, wie man entweder NPM-Skripte oder Grunt oder
Gulp benutzt, um den Distributionsordner für unsere Webanwendung zu erstellen.
So haben wir gesehen, wie der Distributionsordner erstellt wird, indem alle HTML-,
CSS- und JavaScript-Dateien verwendet werden.
Und dann machen Sie Modifikation, Hässlichkeit, Verkettung
und verschiedene andere Transformationen auf diesen, um Distributionsdateien zu erstellen, die
einfach auf den Server kopiert werden können und dann Ihre Website für Benutzer zur Verfügung zu stellen.
Was ist mit Ihrer Angular-Anwendung?
Wie verpacken wir unsere Angular-Anwendung, um sie auf einer Website bereitzustellen?
Jetzt, wie Sie erkennen, Ihre eckige Anwendung wird letztlich auch auf
einer Website bereitgestellt werden, von der aus Menschen auf Ihre Angular-Anwendung zugreifen,
laden Sie die Angular-Anwendung in den Browser und
dann wird ihre eckige Anwendung zum Leben in ihren Browsern erwecken.
Wir werden, auch auf die eckige Art und Weise der Ausrichtung auf
mobile Geräte in den nächsten zwei Kursen, in dieser Spezialisierung.
Deshalb spreche ich im Moment nicht speziell darüber.
Aber hier sprechen wir darüber, wie man ein Webbrowser-Fenster anvisiert.
Verwenden Sie Ihren Angular-Anwendungscode.
Kommen Sie also zu der Frage, wie verpacken wir unsere
Angular-Anwendung für die Bereitstellung?
Jetzt könnten wir die großen Gulp- und NPM-Skripte verwenden, wenn Sie sich dafür entscheiden.
Aber es gibt ein neues Kind auf dem Block namens Webpack.
Webpack, wie wir ziemlich bald verstehen würden, ist ein Modul-Bundler.
Jetzt werden wir uns einige Details in den nächsten Folien ansehen.
Also, was Webpack Sie tun können, ist, Ihre Angular-Anwendung so zu verpacken
, dass es einfach ist, auf einer Website bereitzustellen und
Ihre Angular-Anwendung für Benutzer verfügbar zu machen.
Jetzt, da wir Angular CLI zum Erstellen unserer Angular-Anwendung verwenden,
nutzt Angular CLI bereits Webpack für die
Erstellung des Distributionsordners für Ihre Angular-Anwendung.
Wir müssen also keine zusätzliche Arbeit explizit machen, um Webpack zu nutzen.
Sobald wir Angular CLI verwenden.
Denn die Angular CLI kümmert sich um all das schwere Heben in unserem Namen.
Also, bevor wir sehen, was die Angular CLIs Art, Ihre
Distribution zu bauen weiter zu erleichtern.
Wir müssen ein paar Konzepte über Webpack und
wie Webpack in ein wenig Detail funktioniert verstehen
, so dass, wenn Angular CLI den Distributionsordner erzeugt, Sie
sehen können, was genau von Angular CLI erstellt wird.
Mein Ziel dieser
Vorlesung ist es, Ihnen nur einen kurzen Überblick über webpack zu geben.
Dieser Vortrag ist keine Einführung in die Verwendung von Webpack.
Das geht über den Rahmen dieses Kurses hinaus, aber
wenn Sie interessiert sind,
hat die Webpacks-Website viele Informationen darüber, wie Webpack für andere Anwendungen verwendet werden kann.
Sie können im Prinzip webpack verwenden, um Ihre
Bootstrap-Anwendung, die Sie im vorherigen Kurs entwickelt haben, auch zu verpacken.
Aber in diesem Moment werden wir uns ansehen, wie wir Webpack
als Teil der Angular CLI-Methode nutzen, um unsere eckige Interpretation zu erstellen.
Also offensichtlich ist die erste Frage, die sich in Ihrem Kopf stellt,
was genau ist Webpack?
Wovon reden wir?
Webpack, dies ist die Definition aus der Webpack-Dokumentation selbst.
Es sagt, webpack ist ein Modul-Bundler für moderne JavaScript-Anwendungen.
Ihre Angular-Anwendung, an der Sie
bisher gearbeitet haben, ist eine einfache moderne JavaScript-Anwendung.
Jetzt arbeiten Sie alle mit dem neuesten Stand der Angular Technologie.
Und so, offensichtlich qualifiziert es sich als eine moderne JavaScript-Anwendung und
daher ist die Verwendung von Webpack durchaus sinnvoll.
Was Webpack am besten ist,
betrachtet es die gesamte Struktur Ihrer Angular-Anwendung.
Es durchläuft also rekursiv Ihren Code Ihrer
Angular-Anwendung, um zu sehen, wie Sie
die Informationen am besten in das bündeln, was als Bundles bezeichnet wird.
Wenn Webpack Ihren Code anschaut, behandelt es jede Datei, die Sie
in Ihrer Angular-Anwendung haben, sei es ein JavaScript der Typescript-Datei,
sei es eine CSS-Datei, sei es eine SAS-Datei, sei es eine Bilddatei.
Was auch immer, es behandelt jeden von ihnen als Module aus seiner Perspektive,
und dann entscheidet es, was der beste Weg ist, diese
Module in das zu verpacken, was als Bundles bezeichnet werden, die von der heruntergeladen werden können.
Server zu Ihrem Web-Browser in einer komfortablen und bequemen Weise.
Wenn wir also über Webpack sprechen, müssen wir natürlich klären, was ein Bündel bedeutet.
Wie ich in der vorherigen Folie kurz erwähnt habe, ist ein Bundle nichts anderes als
eine JavaScript-Datei, die Assets enthält.
Nun müssen Sie dies im Hinterkopf behalten, dass Webpack alles als JavaScript behandelt.
Um es, ob es sich um CSS oder eine der anderen Arten von Dateien handelt,
werden sie auch aus der Perspektive von Webpack als JavaScript behandelt. Machen Sie sich
jetzt nicht zu besorgt, webpack weiß, wie man sie packt und
sie als JavaScript-Bundles behandelt, wo es diese Bundles vorbereitet.
Oder JavaScript-Module, in denen es diese Bundles vorbereitet.
Ein Bundle ist also etwas, das Module zusammenfasst, die zusammengehören.
Wenn ich über Modul spreche, impliziere ich kein Angular-Modul,
ich impliziere kein JavaScript-Modul.
Wie gesagt und Webpack, jede Datei wird als Modul erstellt.
Und so bündelt es diese Module zusammen,
die dem Client in einer einzigen Antwort auf eine Anfrage serviert werden sollten.
So trifft webpack selbst eine Entscheidung darüber, welche
Teile zu einem Bündel zusammengefügt werden sollen.
Und sollte zusammen geliefert werden, so dass das Rendering Ihrer
Web-Anwendung in der effektivsten Weise durchgeführt wird.
Nun hat Angular CLI bereits seine Konfiguration erstellt, wie man
die Angular Assets am besten verpacken kann, so dass es am bequemsten an den Browser geliefert wird.
Wir müssen uns also keine Gedanken darüber machen, wie wir das selbst machen,
wir überlassen es der eckigen CLI-Logik, um sich um all diese Konfiguration zu kümmern
, wie dieses Pack seine Bundles in unserem Namen erstellt.
Was Webpack also tut, ist, es beginnt auf der obersten Ebene.
In Ihrer Angular-Anwendung ist die oberste Ebene index.html und main.js Dateien,
wie wir in der allerersten Lektion dieses Kurses gelernt haben.
Es beginnt also dort, und dann folgt es allen Eingaben
, die Sie in den Pfad verwenden, und
bringt eine hierarchische Organisation aller verschiedenen Teile auf.
Was also ein Abhängigkeitsdiagramm genannt wird, wird von Webpack erstellt.
Mit diesem Abhängigkeitsdiagramm entscheidet Webpack dann, wie
seine Bundles gepackt werden sollen und dass ein oder mehrere Bundles abbildet, da sie
für Ihre bestimmte Anwendung sinnvoll sind, dass Webpack Bundle ist.
Und dabei, wenn es Nicht-JavaScript-Dateien
wie CSS, HTML und ein SAS oder Images behandelt und so weiter.
Dann verwendet es Plugins, die es Ihnen ermöglichen,
diese Dateien, diese Nicht-JavaScript-Dateien, vorzuverarbeiten und zu modifizieren,
so dass sie in Ihre Webpack-Bundles gebündelt werden können.
Wenn Sie webpack von Grund auf verwenden,
würden Sie einige der Konfiguration beschreiben, damit Ihr Webpack funktioniert.
Auf diesen Dateien in einer Datei namens
webpack.config.js, die wir in den Stammordner Ihrer Anwendung aufgenommen.
In unserem Fall, da wir uns auf Angular CLI verlassen, um dies in unserem Namen zu tun,
klickt Angular CLI automatisch hier auf die Konfiguration für
Webpack zu erstellen, mit der Webpack zu arbeiten.
Wenn wir nun über Webpack sprechen, gibt es vier Konzepte, die für
uns wichtig sind, um zu verstehen, wie Webpack auf Bildern funktioniert.
Der erste ist der Eintrag.
Eintrag ist der Punkt, an dem das Webpack beginnen und
folgen soll, um das Abhängigkeitsdiagramm zu erstellen.
So ist die Datei main.ts zum Beispiel ein Einstiegspunkt.
So kann Webpack seine Jagd beim Erstellen des Abhängigkeitsdiagramms beginnen.
Direkt bei main.ts und dann gehen Sie nach allen Importanweisungen von dort in
ihre anderen Dateien und dann importieren sie diese Dateien und
so weiter bis zum Aufbau des Abhängigkeitsdiagramms.
Nun, der zweite Teil ist, was wir als Ausgabe nennen würden.
In webpack ist die Ausgabe der Satz von Bundles, die webpack in
Ihrem Namen vorbereitet.
Der dritte ist Lader.
Jetzt versteht Webpack, wie ich sagte, nur JavaScript und
es weiß nur, wie man mit JavaScript arbeitet.
Aber wie ich auch erwähnt habe, behandelt webpack jede Datei als Modul.
Also diese Dateien, die nicht JavaScript sind, müssen
transformiert und dann mit
entsprechenden Transformationen in Ihre Bundles gesetzt werden und dann werden sie in Ihrem Abhängigkeitsdiagramm hinzugefügt.
Hier kommt die Verwendung der verschiedenen Plugins ins Spiel.
Was helfen Plugins Ihnen dabei?
Die Plugins helfen Ihnen, die verschiedenen Aktionen und benutzerdefinierten Funktionalitäten
oder Kompilierungen auszuführen, die Sie für den Aufbau Ihrer Bundles tun müssen.
So wird es Ihnen helfen, Ihr CSS in eine Weise zu verwandeln, die ich
in Ihre JavaScript-Bundles verpacken kann, und so weiter.
Das ist also eine kurze Einführung, wie Webpack tatsächlich funktioniert.
Nun, mit dieser schnellen Einführung, werden Sie in der nächsten Übung
sehen, dass wir bequem einen Befehl namens ng
build verwenden, um unseren Distributionsordner für unsere Angular-Anwendung zu erstellen.
Ng build ermöglicht es Ihnen, sogar eine Entwicklungsversion oder
Produktionsversion Ihrer Angular-Anwendung zu erstellen.
Als wir ng surfen,
nutzte die Angular CLI tatsächlich Webpack, um Dinge zu packen.
Wenn Sie also zurückgehen und
sich all die Dinge ansehen, die in Ihrem Terminal-Fenster gedruckt wurden,
werden Sie beginnen, Webpack hinter den Kulissen zu sehen, um die Bundles zu machen.
Jetzt erstellen Sie in der nächsten Übung ihren Distributionsordner
, der dann auf Ihre Website kopiert werden kann und dann Ihre Angular-Anwendung bereitstellen kann.
Jetzt habe ich bereits einen Build
der Angular-Anwendung gemacht, die wir bisher gebaut haben.
Lassen Sie uns also einen kurzen Blick auf den Distributionsordner werfen, um zu sehen, was sich
dort befindet, bevor Sie tatsächlich die Übung machen.
Sobald Sie die Übung abgeschlossen haben, würde ich Ihnen dringend empfehlen, sich
den Festplattenordner anzusehen, der in Ihrem Projektordner für Angular-Anwendungen erstellt wurde.
Und dann sehen Sie genau die Dateien, die ich Ihnen jetzt zeigen werde.
Direkt im Distributionsordner. Wenn Sie
hier zu unserer Angular-Anwendung im Visual Studio gehen,
sehen Sie, dass ich jetzt den Distributionsordner öffne.
Und im Distributionsordner sehen Sie hier eine ganze Reihe von Dateien.
Sie werden eine Datei mit dem Namen main eine lange Zeichenfolge sehen, wo
.bundle.js von Ihrem Wissen über Gulp und Grunt aus dem vorherigen Kurs,
Sie werden beginnen zu sehen, was diese mittlere lange Zeichenfolge bedeutet.
Auf diese Weise fügen Sie diese Versionierung Ihrer Anwendung hinzu.
Ähnlich sehen Sie eine andere Datei namens styles.something.css.
Dann sehen Sie eine vendor.bundle.js.
Und dann polyfills.js.
Dann haben Sie eine Datei index.html, und
Sie fragen sich, was mit all Ihrem HTML-Code passiert ist?
Es ist in einem dieser Bündel da, okay.
Also alle Vorlagen, die Sie geschrieben haben, sind alle in einem dieser Bundles vorhanden,
außer der Seite index.html.
Sie benötigen die Seite index.html explizit, weil,
wenn ein Benutzer die URL für
Ihre Website in die Adressleiste des Browsers eingibt.
Dann würden Sie auf Ihrer Website und
den Indexpunkt-HTML-Seiten landen, auf denen
Sie alles starten und das brauchen, um Ihre Angular-Anwendung zu booten, so dass das da ist.
Und dann sehen Sie auch die Fontawesome-Dateien dort, die notwendig sind und
dass innerhalb des Assets Sie einige Bilder dort sehen, im Assets-Ordner.
Wenn Sie also einen kurzen Blick auf die Hauptdatei werfen, werden Sie sehen, dass dies ist,
wie Sie sehen können, ist eine Menge komprimierter verketteter Satz von Dateien.
Nun, wenn Sie versuchen, das zu lesen, wird es nicht einfach sein,
es ist eine riesige Datei mit vielen Dingen.
Dies ist auch alle Angular Frameworks Code,
eine Hand Ihren Code, den Sie geschrieben haben.
Und der Code, der von Angular Material, Flex Layout und
jeder anderen Sache kommt, die Sie in Ihrer Angular-Anwendung enthalten haben.
In ähnlicher Weise haben Sie Polyfills und dann Stile und
Sie beginnen zu sehen, dass alle Dinge, die Sie in Ihrer
Angular-Anwendung verwenden, in diesen Dateien gebündelt wurden.
So hoffe ich, dass Sie einen schnellen Überblick über webpack bekommen.
Jetzt ist es Zeit für uns, zu der Übung zu gehen, wo wir einfach den
Angular CLI ng build Befehl verwenden, um diesen Distributionsordner zu erstellen.
Und Sie werden sehen, wie Sie Ihre Angular-Anwendung auf einer Website bereitstellen können.
Direkt nachdem Sie den Build abgeschlossen haben.
( MUSIK)