[MUSIC]
Dans le cours précédent sur Bootstrap 4,
, nous avons appris à utiliser soit les scripts NPM, soit Grunt ou
Gulp pour construire le dossier de distribution pour notre application web.
Nous avons donc vu comment le dossier de distribution est construit en prenant tous les fichiers HTML,
CSS et JavaScript.
Et puis en faisant la modification, l'uglification, la concaténation,
et diverses autres transformations sur ceux-ci pour construire des fichiers de distribution qui peuvent être
simplement copiés sur le serveur, puis rendre votre site web disponible pour les utilisateurs.
Maintenant, qu'en est-il de votre application Angular ?
Comment emballer notre application Angular pour la déployer sur un site Web ?
Maintenant que vous réalisez que votre application angulaire va également finalement être
déployée sur un site Web à partir duquel les gens accèderont à votre application Angular,
téléchargez l'application Angular sur le navigateur et
alors leur application angulaire prendra vie dans leurs navigateurs.
Nous examinerons également la façon angulaire de cibler les appareils mobiles
dans les deux prochains cours, dans cette spécialisation.
Donc, je ne parle pas spécifiquement de cela, en ce moment.
Mais ici, nous parlons de la façon de cibler une fenêtre de navigateur Web.
En utilisant votre code d'application Angular.
Alors en arrivant à la question de savoir comment emballer notre application Angular
pour le déploiement ?
Maintenant, nous pourrions utiliser les scripts Gulp et NPM pour le faire, si vous le souhaitez.
Mais il y a un nouveau gamin sur le bloc appelé webpack.
Webpack comme nous le comprendrions très bientôt est un module bundler.
Maintenant, nous allons regarder quelques détails dans les prochaines diapositives.
Donc, ce que webpack vous permet de faire est d'empaqueter votre application Angular d'une manière
qu'il est facile à déployer sur un site Web et
rendre votre application Angular disponible pour les utilisateurs.
Maintenant que nous utilisons Angular CLI pour construire notre application Angular,
Angular CLI tire déjà parti de webpack pour
faisant sa construction pour le dossier de distribution pour votre application Angular.
Nous n'avons donc pas besoin de faire explicitement de travail supplémentaire pour utiliser webpack.
Une fois que nous utilisons Angular CLI.
Parce que l'Angular CLI s'occupe de tous les levages lourds en notre nom.
Donc, mais avant de voir ce que la façon angulaire CLIs de construire votre distribution
plus facile.
Nous devons comprendre quelques concepts sur webpack et
comment webpack fonctionne dans un peu de détail afin
que lorsque Angular CLI produit le dossier de distribution, vous pouvez regarder et
voir ce qui est exactement construit par Angular CLI.
Donc, mon but de cette conférence
particulière est de vous donner un bref aperçu de webpack.
Cette conférence n'est pas une introduction à l'utilisation du webpack.
Cela dépasse le cadre de ce cours, mais
si vous êtes intéressé, le site webpacks
a beaucoup d'informations sur la façon dont webpack peut être utilisé pour d'autres applications.
Vous pouvez, en principe, utiliser webpack pour empaqueter votre application Bootstrap
que vous avez également développée dans le cours précédent.
Mais en ce moment, nous allons regarder comment nous utilisons webpack
dans le cadre de la façon angulaire de la CLI de construire notre interprétation angulaire.
Donc évidemment, la première question qui se pose dans votre esprit est,
qu'est-ce que webpack exactement ?
De quoi parlons-nous ?
Webpack, c'est la définition de la documentation de webpack elle-même.
Il dit que webpack est un module bundler pour les applications JavaScript modernes.
Votre application Angular sur laquelle vous avez travaillé si
loin est une application JavaScript moderne facile.
Maintenant, vous travaillez tous avec la pointe de la technologie Angular.
Et donc, évidemment, il se qualifie comme une application JavaScript moderne et
donc, l'utilisation de webpack est parfaitement logique.
Maintenant, ce que webpack est le meilleur,
il regarde toute la structure de votre application Angular.
Donc, il traverse récursivement votre code de votre application Angular
cherchant à voir comment regrouper
l'information dans ce qu'on appelle des paquets.
Lorsque webpack regarde votre code, il traite tous les fichiers que vous avez
dans votre application Angular, que ce soit un fichier JavaScript de Typescript,
qu'il s'agisse d'un fichier CSS, que ce soit un fichier SAS, qu'il s'agisse d'un fichier image.
Quoi qu'il en soit, il traite chacun d'eux comme des modules de son point de vue,
et puis il décide, quelle est la meilleure façon d'empaqueter ces modules
dans ce qu'on appelle des paquets qui peuvent être téléchargés à partir du.
Serveur à votre navigateur web d'une manière confortable et pratique.
Donc, quand nous parlons de webpack, nous devons évidemment clarifier ce qu'un bundle signifie.
Comme je l'ai brièvement indiqué dans la diapositive précédente, un bundle n'est rien d'autre que
un fichier JavaScript qui incorpore des actifs.
Maintenant, vous devez garder cela à l'esprit que webpack traite tout comme JavaScript.
Qu'il s'agisse de CSS ou d'un autre type de fichiers,
ils seront également traités comme JavaScript du point de vue de webpack.
Maintenant, ne vous inquiétez pas trop, webpack sait comment les emballer et
les traiter comme des paquets JavaScript où il prépare ces paquets.
Ou modules JavaScript où il prépare ces paquets.
Donc, un bundle est quelque chose qui regroupe des modules qui appartiennent ensemble.
Quand je parle du module, je n'implique pas le module Angular,
Je n'implique pas le module JavaScript.
Comme je l'ai dit et Webpack, chaque fichier est créé en tant que module.
Et donc il regroupe ces modules,
qui devraient être servis au client en une seule réponse à une demande.
Donc webpack lui-même prend la décision de dire quelles parties
devraient être réunies dans un paquet.
Et devrait être livré ensemble afin que le rendu de votre application web
soit effectué de la manière la plus efficace.
Maintenant, Angular CLI a déjà construit sa configuration de la meilleure façon d'empaqueter
les Assets Angular, de sorte qu'il est le plus commodément livré au navigateur.
Donc, nous n'avons pas besoin de nous inquiéter de la façon de faire cela nous-mêmes,
nous laisserons le soin de la logique angulaire CLI de prendre soin de toute cette configuration de
comment ce pack construit ses paquets en notre nom.
Alors ce que Webpack fait, c'est qu'il commence au plus haut niveau.
Dans votre application Angular, le niveau le plus élevé est les fichiers index.html et main.js,
comme nous l'avons appris dans la toute première leçon de ce cours.
Donc, il commence là, et ensuite il suit toutes les entrées
que vous utilisez dans ceux qui suivent le chemin et
met en place une organisation hiérarchique de toutes les différentes parties.
Donc ce qu'on appelle un graphe de dépendance est construit par webpack.
Maintenant en utilisant ce graphique de dépendance, Webpack décide alors comment faire un paquet
et que les images un ou plusieurs paquets car ils ont un sens
pour votre application particulière que webpack est bundle.
Et dans le processus de le faire, quand il gère des fichiers non-JavaScript,
comme CSS, HTML et un SAS ou Images et ainsi de suite.
Ensuite, il utilise des plugins qui vous permettent de pré-traiter et
modifier ces fichiers, ces fichiers non JavaScript,
de manière à ce qu'ils puissent être regroupés dans vos paquets webpack.
Si vous utilisez webpack à partir de zéro,
alors vous décrirez une partie de la configuration pour que votre webpack fonctionne.
Sur ces fichiers dans un fichier nommé
webpack.config.js que nous avons inclus dans le dossier racine de votre application.
Dans notre cas, puisque nous comptons sur Angular CLI pour le faire en notre nom
Angular CLI clique automatiquement ici lors de la construction de la configuration pour
webpack pour travailler avec.
Maintenant, quand nous parlons de webpack, il y a quatre concepts qui sont importants pour
de comprendre comment webpack fonctionne sur les photos.
Le premier est l'entrée.
Entry est le point à partir duquel le webpack doit commencer et
suivre pour construire le graphique de dépendance.
Ainsi, le fichier main.ts par exemple, est un point d'entrée.
Donc webpack peut commencer sa poursuite dans la construction du graphique de dépendance.
Directement à main.ts, puis allez à la poursuite de toutes les instructions d'importation à partir de là
à leurs autres fichiers, puis à partir de là, ils importent ces fichiers et
ainsi de suite jusqu'à ce qu'il construise le graphique de dépendance.
Maintenant, la deuxième partie est ce que nous appelons comme sortie.
Dans webpack, la sortie est l'ensemble des paquets que webpack prépare
en votre nom.
Le troisième est les chargeurs.
Maintenant webpack comme je l'ai dit ne comprend que JavaScript et
il ne sait que comment travailler avec JavaScript.
Mais comme je l'ai aussi mentionné, webpack traite chaque fichier comme un module.
Donc, ces fichiers qui ne sont pas JavaScript doivent être transformés
et ensuite mis dans vos paquets en utilisant
transformations appropriées et ensuite ils seront ajoutés dans votre graphique de dépendance.
C'est là que l'utilisation des différents plugins intervient.
Qu'est-ce que les plugins vous aident à faire ?
Les plugins vous aident à effectuer les différentes actions et fonctionnalités personnalisées
ou compilations que vous devez faire pour construire vos paquets.
Donc, cela vous aidera à transformer votre CSS en un moyen que je peux paquet
dans vos paquets JavaScript, et ainsi de suite.
C'est donc une introduction rapide à la façon dont webpack fonctionne réellement.
Maintenant, avec cette introduction rapide, dans le prochain exercice, vous verrez
que nous allons utiliser commodément une commande appelée ng
build pour construire notre dossier de distribution pour notre application Angular.
Ng build vous permet même de construire une version de développement ou une version de production
de votre application Angular.
Quand nous avons utilisé ng surf,
l'Angular CLI utilisait en effet webpack pour emballer les choses.
Donc, si vous revenez en arrière et
regardez toutes les choses qui étaient imprimées dans votre fenêtre de terminal,
vous commencerez à voir webpack travailler dans les coulisses pour faire les paquets.
Maintenant, dans le prochain exercice, vous allez construire leur dossier de distribution,
qui peut ensuite être copié sur votre site Web et ensuite déployer votre application Angular.
Maintenant, j'ai déjà fait une build
de l'application Angular que nous avons construite jusqu'à présent.
Alors, allons-y jeter un coup d'œil au dossier de distribution pour voir ce qu'il y a dans
avant de faire l'exercice.
Donc, une fois que vous avez terminé l'exercice, je vous conseille fortement d'aller et
regarder le dossier disque qui a été construit dans votre dossier de projet Angular applications.
Et puis regardez et voyez exactement les fichiers que je vais vous montrer en ce moment.
Droit dans le dossier de distribution.
En allant à notre application Angular dans Visual Studio ici,
vous voyez que j'ouvre maintenant le dossier de distribution.
Et dans le dossier de distribution, vous verrez tout un tas de fichiers ici.
Vous verrez un fichier nommé main une longue chaîne où
.bundle.js de votre connaissance de Gulp et Grunt du cours précédent,
vous commencerez à voir ce que signifie cette longue chaîne intermédiaire.
C'est ainsi que vous ajoutez cette version à votre application.
De même, vous voyez un autre fichier appelé styles.something.css.
Ensuite, vous voyez un vendor.bundle.js.
Et puis polyfills.js.
Ensuite, vous avez un fichier index.html, et
vous vous demandez ce qui est arrivé à tout votre code HTML ?
C'est dans un de ces paquets, d'accord.
Donc tous les modèles que vous avez écrits sont tous là dans un de ces paquets,
sauf la page index.html.
Vous avez besoin de la page index.html explicitement parce que,
lorsqu'un utilisateur tape l'URL pour
votre site Web dans la barre d'adresse du navigateur.
Ensuite, vous atterriez sur votre site Web et
les pages HTML point index où vous commencez tout et
vous en avez besoin pour amorcer votre application Angular, c'est pourquoi c'est là.
Et puis vous voyez aussi les fichiers fontawesome là qui sont nécessaires et
que dans l'actif vous voyez quelques images là, dans le dossier assets.
Donc, en regardant rapidement le fichier principal, vous verrez que c'est
comme vous pouvez le voir est un ensemble de fichiers concaténés compressés.
Maintenant, si vous essayez de lire ça, ce ne sera pas facile,
c'est un énorme fichier avec beaucoup de choses.
Ceci inclut également tout le code framework angulaire,
une main votre code que vous avez écrit.
Et le code qui vient de Angular Material, Flex Layout et
toutes les autres choses que vous avez incluses avec votre application Angular.
De même, vous avez des polyfills, puis des styles et
vous commencez à voir que toutes les choses que vous utilisez dans votre application Angular
ont été regroupées dans ces fichiers.
Donc avec cela, j'espère que vous avez un aperçu rapide de webpack.
Maintenant, il est temps pour nous d'aller à l'exercice, où nous allons simplement utiliser la commande
Angular CLI ng build pour construire ce dossier de distribution.
Et vous verrez comment vous pouvez déployer votre application Angular sur un site Web.
Juste après avoir terminé la construction.
[MUSIQUE]