Comprendre les modules JavaScript/ES

1. Intro: Bonjour et bienvenue dans mon cours sur les modules ES6, comment les utiliser et comment les créer. Les modules Es6 sont le nouveau standard pour chargement de modules en JavaScript, qui est pris en charge dans tous les navigateurs modernes. Il possède une nouvelle syntaxe et des mots-clés supplémentaires pour l'importation et l'exportation. Presque tous les navigateurs modernes peuvent l'utiliser. Ils ont des chargeurs de modules intégrés et aucun jazz dans sa dernière version ne le prend en charge. Ensuite, chaque transpiler et Bundler moderne ainsi que TypeScript le prend en charge. Les nouveaux projets qui démarrent utilisent le nouveau système de modules et de plus plus de projets existants sont mis à jour pour le prendre en charge. Et cela aide également à secouer les arbres et à minimiser la taille des paquets. Ainsi, si vous utilisez des modules ES6, vous êtes sur la bonne voie pour développer des applications Web modernes et maintenables. Dans ce cours, vous apprendrez comment utiliser les instructions Export et Import et comment intégrer modules dans votre page HTML, comment utiliser les importations dynamiques et comment utiliser la syntaxe. J'espère que vous apprécierez le cours et que vous vous retrouverez dans la première vidéo. 2. Importation et exportation: Bonjour et bienvenue dans cette vidéo. Je vais expliquer dans cette vidéo comment utiliser les modules ES6, comment les saisir, comment les créer et comment les intégrer dans votre code HTML. abord, parlons brièvement de mon environnement de développement. J'ai des vidéos à recoder en tant qu'IDE. Tu peux aussi t'en servir. C'est une excellente idée de Microsoft. C'est gratuit. Vous pouvez le télécharger pour mes filles, pour Windows, pour Linux. Mais vous pouvez également utiliser autre chose. Vous pouvez utiliser votre éditeur de texte préféré, peu importe. Ça n'a pas vraiment d'importance. Et j'utilise un VGS en tant que serveur sourd, qui transmet du code à la volée. Mais tu n'es pas obligée de l'utiliser. Tu peux utiliser n'importe quoi d'autre. Vous pouvez utiliser un serveur normal, un webpack, un serveur de développement, tout ce que vous voulez. Commençons donc. Et chaque page Web et chaque application de représentation commence en HTML, dans ce cas, index.html. Et c'est ici. C'est très simple. Il a l'onglet VII parce que j' utilise create VT pour créer un projet. J'ai donc cette div ici, qui ne contient que de petits textes. Donc ça n'a pas d'importance. Mais ici, nous avons le premier tag important. C'est la balise de script, bien sûr, parce que c'est elle qui charge un script. Dans ce cas, c'est le JS principal de la sauce, qui se trouve ici. Nous vérifions tout de suite. Main JS, pour le moment c'est vide, mais je vais y mettre du code. Vous pouvez donc également mettre code ici dans la balise de script , puis omettre la source. Il est également possible que vous sachiez déjà qu'il s'agit d'une balise de script normale. Elle fonctionne comme une balise de script normale. seule différence est que vous avez ici un module de type. Et ce qui est important si vous voulez utiliser des mots-clés, ce sont des instructions telles que import et export. Dans le script, vous devez utiliser le type module ici. Il y a aussi une autre possibilité. Effectuez des importations dynamiques. Vous pouvez utiliser la fonction d'importation et importer des modules, des modules ES6 avec cela. Mais la méthode standard pour les référencer statiquement est la balise de script et le module type. C'est donc la chose la plus importante, tapez module. Et vous pouvez écrire votre code ici à l'intérieur, ou vous pouvez utiliser l' attribut source et pointer vers votre code JavaScript. Voyons donc si c' est vraiment chargé. J'ai donc mis un journal d'un an, Just main JS, et vérifions la sortie de la console. Ok, nous l'avons ici. Cela fonctionne vraiment. Notre script, notre module, est donc chargé. Et pour le moment, il n'est pas visible qu'il s'agit d'un module. Mais nous allons mettre ici du code spécifique à certains modules. Donc pour le moment où nous avons ce journal, nous pouvons le laisser ici. Mais qu'est-ce qui est important dans ce module ? C'est que le module peut exporter quelque chose ou que vous pouvez importer quelque chose ou les deux. Bien sûr, je fais ici d'abord l'importation, bien sûr, parce que l'exportation ici n'a aucun sens. Parce que je charge ça via la balise de script ici. Et je ne peux pas utiliser d'export ici. Nous devons donc d' abord utiliser un peu d'import. Je mets donc une déclaration d'importation ici. C'est le nouveau truc. Il s'agit de l'instruction d'importation du module ES6. Et maintenant, nous devons écrire quelque chose d'import. Et puis après cela, vous pouvez lire cela comme importer quelque chose que nous spécifions plus tard à partir du fichier, qui est spécifié ici, qui est que j'ai créé le mod un. C'est donc mod one dot js. Veuillez utiliser l'extension ici. Je pourrais également omettre l'extension ici, mais c'est parce que j'utilise VHS comme serveur sourd et qu'il peut également résoudre les modules sans aucune extension. Mais je pense que c'est bonne pratique de mettre l'extension ici. Cela peut aussi être quelque chose comme JSX ou vous pouvez également, si votre environnement le prend en charge, vous pouvez également utiliser, vous pouvez également importer du CSS. Mais pour cela, vous avez besoin d'une sorte de bundler, ou dans ce cas, les jazz deaths ont également pris en charge l'importation CSS. Mais normalement, vous importez un fichier js point js. Nous sommes donc en train d'importer à partir de ce fichier. Et ici, nous devons indiquer au moteur JavaScript ce qu'il faut importer. Nous pouvons importer différentes choses. Nous pouvons importer des exportations spécifiques, des exportations uniques. Ou nous pouvons importer une exportation par défaut, une exportation par défaut, ou nous pouvons importer le module complet, ce que je fais ici avec cet astérisque. Ensuite, je dois leur mettre un identifiant. Je peux complètement inventer ça. J'utilise donc le mod un. Peu importe quel est l'identifiant. Je peux référencer le module avec cet identifiant. Donc je peux écrire ici quelque chose de mod one dot. Il est vide pour le moment, donc je n'ai rien ici. Donc je suis juste en train d'écrire le mod un. Mais l'important ici, c'est l'astérisque. Comme mod un signifie j'importe le module complet en tant qu'objet, et je le nomme mod un. Il s'agit donc de mon identifiant pour le module, le module complet. Passons au module Mod One. Pour le moment, il est complètement vide, donc il n'y a rien à importer en fait, mais nous avons mis quelque chose ici. Nous importons quelque chose. Je dois donc exporter quelque chose dans ce module. Et c'est là que nous utilisons le mot clé export. Et après l'exportation, nous devons spécifier ce que nous voulons exporter. Et j'exporte une fonction ici. Et je ne peux pas, je ne peux pas exporter une fonction anonyme, je dois la nommer ici. Nous le nommons, le faisons parce qu'il fait simplement quelque chose, quelque chose comme ce journal de console. Je ne fais que me connecter. Fais-le. Ok, nous exportons donc cette fonction dans le JS principal. Je peux l'importer et je saisis le module complet. Donc je devrais être capable de faire quelque chose comme mod one dot, faites-le, et appelez-le ici. Allons voir si ça fonctionne. Bonjour les modules, c'est notre div, peu importe. L'important est ici dans la console. Allons-y. C'est ce que nous, ce que nous connectons, dans la fonction export at. Et puis nous avons les principaux js. Regardons le code. Oui, nous appelons donc la fonction d'exportation, faites-le. Et dans cette fonction, nous faisons le journal de la console. Et après cela, nous faisons le journal de console principal JS. Cela a donc déjà fonctionné. Donc c'est très bien. Exportons la deuxième fonction. Donc on copie celui-ci et on le nomme, on le fait aussi. Nous l'avons verrouillé sur la console. Ce que nous devrions faire ici, ce que nous devrions être capables de faire ici, c'est le faire. Faites-le aussi depuis le module mod one. Et il me suggère déjà de le faire aussi. Et voyons si ça marche. Fais-le, fais-le aussi. Cela fonctionne. OK, nous l'exportons vers les fonctions ici. Fonction d'exportation, fais-le. La fonction d'exportation en raison de la syntaxe est simple. Il suffit de placer l'instruction export avant la fonction ici. Vous pouvez également exporter des variables comme liger, const, par exemple. C'est une constante. Je l'exporte ici. Mod un point. C'est une constante. Et je peux simplement l'enregistrer sur console ici. Et voyons si ça fonctionne. Oui, donc ça sort ici. Donc ça marche. Nous pouvons exporter des fonctions, nous pouvons exporter des variables. Voyons donc si nous pouvons importer une fonction spécifique ou une exportation spécifique. Nous avons donc ici aussi la syntaxe. Importez le module complet et référencez-le comme identifiant mod 1. Je pourrais renommer le mod un en mod, par exemple, je peux l'appeler comme ça. Mais maintenant, si je veux importer une exportation spécifique, je dois utiliser une syntaxe différente. La syntaxe ici est les accolades, qui sont également utilisées pour la structuration et qui est un peu similaire. Je mets donc ici ces accolades et je reçois les exportations ici comme suggestions d'importation. Je dois donc le faire, et c'est une constante car les exportations de ce module mod one dot js. Importons, faisons-le. Et nous sommes en train de commenter cela pour le moment. Et maintenant j'ai importé le faire. Je dois donc le supprimer parce que je dois le faire maintenant en tant qu'identifiant. Et je peux l'appeler en tant que fonction parce que c' est exporté ici dans le mod un. Et j'importe juste celle-ci, exporte, cette fonction ici. Et il s'appelle de la même manière qu'il est exporté ici, faites-le. Et c'est moi qui l'appelle. Alors voyons voir. Maintenant, ça fonctionne. Je pourrais faire la même chose avec une actrice tout kowtow pourrait également importer le const. Donc, en ce moment, j' importe complètement chaque exportation ici séparément. Je pourrais l'appeler à un journal de console d'icônes. C'est une constante. Et nous devrions avoir la même sortie qu'avant. Il est dû 22. Jusqu'ici tout va bien. Nous pouvons donc importer le module complet. Vous pouvez importer des exportations uniques ou vous pouvez les importer séparément ici, comme je l'ai fait ici. Et si tu veux l'appeler ? Supposons que vous ayez déjà une fonction appelée pour le faire. Vous ne voulez pas changer le nom parce que vous voulez l'utiliser ici. Et celui-ci ne fait que faire le journal de la console. Et nous allons afficher Local. Fais-le. Donc maintenant nous avons un problème parce que nous définissons ici cette fonction, faites-le, et c'est le même identifiant que cette importation. Mais comment pouvons-nous l'importer et le renommer en un identifiant différent ? Cela est possible avec la même syntaxe qu' auparavant avec l'étoile. Il en va de même, comme, disons, importé. Fais-le. Avec cette syntaxe. Nous avons renommé l'exportation en cet identifiant importé, faites-le. Voyons si nous pouvons changer celui-ci pour l'importer, le faire et voir quelle est la sortie. Alors allons-y. Fais-le à deux et à un mec du coin. C'est ce à quoi nous nous attendions. Parce qu'ici, il s'agit bien entendu de cette déclaration de fonction. Cela le fait et l'exporté le font depuis ce module. Nous l'avons renommé pour l'importer. Et vous pouvez le faire la même année si vous le souhaitez, le faire à l'importation. Donc si vous avez déjà et identifiez dans portée de votre module qui est identique à une exportation d'un module. Vous pouvez utiliser cette syntaxe pour renommer l'importation. Allons voir si ça fonctionne toujours. Oui, ça fonctionne. C'est ainsi que vous importez les exportations séparément. Et c'est important parce que vous pouvez également importer le tout avec toujours une étoile et un module complet important. Mais c'est un problème parce que vous ne dites pas au bundler ou au programme que vous utilisez pour regrouper votre JavaScript et minifier et autres choses de ce genre. Vous ne dites pas à ce système ce que vous utilisez réellement dans ce module. Si vous faites cela et que vous voulez juste l'avoir, disons que vous vouliez simplement le faire. Donc je suis en train de commenter ça. Si tu veux juste en avoir, fais-le aussi important pour lui. Le bundler, s'il utilise, par exemple, c'est quelque chose comme trois arbres qui tremblent. Le bundler sait que vous n'utilisez que cette fonction à partir de ce module. Donc théoriquement si personne d'autre ne l'utilise, aucun autre utilisateur de module ne le fait aussi, ou cette constante, le bundler pourrait simplement effacer ce code. Et réduisez ainsi la taille de votre lot. C'est l'avantage de cette syntaxe : vous n'importez qu'une seule exportation. Vous devriez donc préférer cette syntaxe. Vous pouvez également, bien sûr, si vous utilisez le module complet , presque toutes les fonctions ou les exports dans le module. Vous pouvez bien entendu utiliser cette syntaxe. Donc, mais si vous, disons que vous avez quelque chose comme un tiret bas, qui contient comme 3030 exports ou quelque chose comme ça. Et vous n'avez besoin que d'une seule fonction. Il serait sage de simplement importer cette fonction. Parce que votre Bundler effacerait alors toutes les autres fonctions. Vous avez une taille de lot beaucoup plus petite. Je vais donc y revenir. Maintenant. Passons directement à une syntaxe différente ou à un style d'importation différent. Appelons-le comme ça. Ce que nous pouvons également faire, c'est définir une exportation par défaut, une exportation par défaut, une exportation par défaut après l'exportation. Et je dis au système de modules qu'il s'agit de mon exportation par défaut. Bien sûr. Que puis-je faire ici pour importer l'exportation par défaut ? Disons donc que c'est ma fonction principale ici. C'est là que, disons, 80 % des utilisateurs du module veulent utiliser. Ou c'est peut-être aussi la seule fonction. Allons-y, faisons-le comme ça. C'est la seule fonction qui est la seule exportation. Donc vous pouvez, vous pouvez dire que la fonction d'exportation par défaut le faire. Et ce que vous pouvez faire ici c'est que vous pouvez simplement l' écrire comme ceci. Nous allons le changer pour le faire. Et je vais effacer celui-ci. Vérifions dans le navigateur s'il fonctionne. Fais-le. Cela fonctionne. Donc, si vous conduisez l'exportation par défaut, vous pouvez importer cette valeur par défaut. De cette façon. Il suffit d'écrire import, puis toute identification, je pourrais utiliser un identifiant différent ici que je pourrais utiliser importé. Fais-le. Peu importe, car cette syntaxe sert à importer l'exportation par défaut. Je peux donc le nommer comme je veux. Je travaille toujours. Il n'est pas nécessaire que l'exportation soit un nom. Je pourrais donc l'appeler n'importe quoi semblable parce que je ne précise pas. Je n'ai pas à spécifier ce que je veux importer car cette syntaxe sert à importer la valeur par défaut. Bien entendu, vous devez avoir une valeur par défaut dans l'autre module. Donc si j'efface ça, ça ne devrait plus fonctionner, j'obtiens une erreur de syntaxe. Le modèle demandé ne fournit pas d'exportation nommée par défaut. Ok ? Cela ne fonctionne donc pas. Bien entendu, je dois marquer l'exportation comme valeur par défaut pour l'importer par défaut. Donc, ici, vous pouvez en mettre, n'importe quel identifiant, vous aimeriez importer l'exportation par défaut ici. Et je peux avoir une deuxième exportation, ce qui n'est pas le cas par défaut. Bien entendu, vous ne pouvez avoir qu'une seule valeur par défaut. Mais je peux en avoir un deuxième. Ce n'est pas un problème. Alors, comment est-ce que je peux importer cela, bien sûr. Droit d'importer des relevés. La première consiste à importer la valeur par défaut, et la seconde à importer. Fais-le aussi. C'est tout à fait possible. Alors je l'appelle ici, faites-le aussi. Et cela devrait également fonctionner. Je pense que je n'ai pas modifié le journal de la console ici. Alors maintenant fais-le et fais-le aussi. Bon, c'est ainsi que vous utilisez l'importation avec une exportation par défaut. Vous pouvez également, vous pouvez également combiner cela. La syntaxe est donc également possible. Donc, si vous voulez importer explicitement dans ces accolades, dans ces accolades, vous pouvez également dire explicitement, Je veux importer par défaut, nommez-le important de le faire. Vous devez bien entendu fournir un identifiant, car cela ne fonctionne pas, car vous avez besoin d'un identifiant ici. Donc tu peux le faire. Ainsi, dès que vous aurez mis une valeur par défaut avant la fonction, vous devrez en tenir compte ici et l'importer comme valeur par défaut , puis un identifiant. Ou bien sûr, vous pouvez utiliser l'expression beaucoup plus courte et l' importer comme ça. Bien sûr, c'est le double maintenant. Je devrais donc commenter ceci, ou simplement supprimer celui-là. La valeur par défaut est importante pour elle. Donc c'est très bien. Allons le vérifier. Ok, ça fonctionne. Ok. C'est ainsi que vous importez, et c'est ainsi que vous exportez. Et dans la vidéo suivante, nous parlerons de l'importation dynamique, qui est Oui, c'est juste une fonction que vous pouvez utiliser pour importer des modules. Et vous pouvez l'utiliser pour retarder le chargement d' un module, par exemple. Ce sera la prochaine vidéo et j'espère vous y voir. Au revoir. 3. Importation dynamique: Bonjour, Bienvenue dans cette vidéo. Nous expliquons ici comment utiliser les importations dynamiques. Supposons que nous voulions charger un module, mais pas au début du temps de chargement sur la page. Mais nous voulons le charger plus tard. Peut-être n'importe où composant d'interface utilisateur, qui est assez gros, autant de dépendances. Nous ne voulons donc pas le charger au début. Au début du chargement de la page. Nous voulons retarder le chargement du module. À un moment ultérieur. L'utilisateur accède, par exemple, à une nouvelle page. À ce moment, le module sera chargé et non au début. Nous pouvons simuler cela. Comme nous n'avons pas d'interaction utilisateur ici notre page Web pour le moment, nous pouvons simuler cela en utilisant un setTimeout avec un délai d'une seconde. Et ici nous pouvons essayer de charger le module. Soyons naïfs et essayons ça. Efface ça ici. Nous n'en avons plus besoin. Il suffit de mettre l'instruction import ici dans cette fonction. Cela ne fonctionne donc pas. C'est déjà marqué comme une erreur. On a quand même essayé. Et voyez ce que dit le navigateur. Erreur de syntaxe non interceptée, inspectez le jeton inattendu. Ok ? C'est donc le message d'erreur qui n'est pas tout à fait, pas tout à fait explicatif, mais je vais l'expliquer. Il s'agit de l'instruction d'importation statique. Et stable signifie qu'il doit être en haut du module. Il doit donc être ici. Et vous aussi, normalement, vous n'êtes pas autorisé à le faire par exemple. Cela fonctionne donc ici. Mais je pense que dans la spécification, il est dit que rien d'autre ne doit précéder la première instruction d'entrée. Rien entre les deux. Vous devez donc placer vos entrées, vos importations statiques en haut du fichier, en haut du module. Nous avons donc essayé cela. Ça ne fonctionne pas. Mais il y a une autre possibilité. Et c'est la fonction d'importation, la fonction d'importation dynamique, également appelée Import. C'est une fonction que nous pouvons appeler. Et nous pouvons donner des paramètres. Et les paramètres, bien sûr, le formulaire. Alors, d'où trouver ce module. Nous prenons donc le même chemin, le même module que pour une importation statique et vérifions le résultat. y a donc rien d' imprimé ici. Ce qui n'est pas très surprenant car nous ne faisons rien ici. Donc, si ce module est uniquement chargé, il n'y a aucun code à exécuter ici. Seules les déclarations de fonction pour do it et do it too. Cela semble donc fonctionner. Nous pouvons également écrire un journal de console ici pour voir qu'il est réellement chargé et l'exécuter réellement ici. Après 1 seconde, modifiez un. Rechargeons la page. Après 1 seconde, nous voyons le mod 1 imprimé ici. Ok, ça semble fonctionner. Mais bon, alors comment obtenir notre module ou les exportations du module ? Nous pouvons essayer quelque chose comme ça et mettre une instruction de débogueur ici pour le vérifier dans le débogueur. Ok, donc ça s'arrête là et on vérifie ce qui est renvoyé par la fonction d'importation. D'accord, ce n'est pas le module, comme on peut le voir. C'est une promesse, une soi-disant promesse. Si tu ne sais pas ce que sont les promesses, je vais t'expliquer tout de suite. Mais ce n'est pas ce à quoi nous nous attendions ici. On pourrait penser que, d'accord, il est si important de renvoyer le module, le module important. Mais ce n'est pas le cas. Au lieu de cela, il renvoie une promesse. Et la promesse est quelque chose pour les tâches asynchrones. L'import consiste donc à charger un fichier depuis le serveur, qui est naturellement asynchrone. Il doit donc accéder au serveur. Et le serveur doit envoyer le code du module. Ensuite, le moteur JavaScript doit exécuter le code. C'est donc quelque chose qui bloquerait le moteur JavaScript. C'est pourquoi il est asynchrone. Et pour les processus asynchrones, nous avons l'API Promise. Si vous n'êtes pas familier avec l'API Promise, nous pouvons vérifier quelles sont les propriétés de la promesse renvoyée. Cela suggère déjà d' attraper enfin, puis l' important est fait ici. Ensuite, il y a une méthode sur la promesse. Et ça prend une fonction. Et elle aussi, cette fonction possède un paramètre. Dans ce cas, il s'agit du module. Je devrais donc appeler ça une promesse. Nous avons donc une promesse et nous avons la méthode. Et puis la méthode obtient un, vous pouvez l'appeler une méthode de rappel, une fonction de rappel. Et cette fonction de rappel est appelée si la promesse est résolue. Et dans ce cas, la promesse est résolue lors du chargement du module. Et le paramètre de la fonction sera le module. Nous pouvons vérifier cela si vous mettez un débogueur ici et supprimez celui-ci, nous pouvons vérifier quel est le mod. Et si mon hypothèse est vraie, il suffit de recharger la page nafta 1 seconde. Nous arrivons vraiment à ce débogueur et nous vérifierons le module. Et oui, cela ressemble à un module. Il est également appelé module ici. Et nous avons l'exportation par défaut ici dans la propriété default. Et nous devons le faire. La fonction par défaut a été appelée pour le faire, mais c'est le cas, vous pouvez la trouver ici par défaut. Le nom réel n'est donc pas utilisé comme nom de propriété par défaut est utilisé ici. Et la deuxième exportation était de le faire aussi, qui est accessible par le même nom. Avec cela, nous avons le module. Ici, on peut l' utiliser. Allons-y. Et des suggestions déjà là, par défaut ou faites-le aussi. Nous utilisons donc d'abord la valeur par défaut. Ensuite, nous pouvons utiliser deux ou deux et vérifier ce qui est imprimé. Nous avons donc le mod un, qui est imprimé au début du module, du module chargé. Ensuite, nous devons le faire et le faire aussi. C'est donc ce à quoi nous nous attendions et cela fonctionne. Ce n'est pas une très belle syntaxe que vous pouvez l'écrire d'une meilleure façon. Et pour cela, nous pouvons utiliser le mécanisme async await ou la syntaxe async wait. Si vous avez une promesse, une valeur de retour avec une promesse similaire à celle que vous avez avec l'importation. Vous pouvez appeler ou écrire un poids. Cela signifie que nous attendons. Nous attendons la résolution de la promesse. C'est donc la même chose qu'ici dans cette fonction de rappel. Sauf que ce n'est pas une fonction de rappel, mais c'est un peu du code normal pendant que vous l'écrivez. Dans des situations normales, synchrones, les seules différences que nous avons ce mot clé wait. Je pourrais donc écrire quelque chose comme constant mod égal ou se voit attribuer une importation de poids. Donc cela attend, attend la résolution de la promesse. Et la valeur de retour. Ou, dans ce cas, le module sera la valeur de cette expression. Et je l'assigne au mod. Et puis je peux appeler do it et default. Et à cause de ça, ça devrait marcher sauf que j'ai oublié quelque chose. Et c'est le mot clé async ici. Donc, si vous utilisez un poids, vous devez utiliser async dans la fonction dans laquelle vous utilisez le poids. Ces deux-là vont de pair. Si vous avez un poids, utilisez toujours async. Devant la fonction. Sauf que vous pouvez également l' utiliser au niveau supérieur ici. Ensuite, vous n'utilisez pas l'async parce que vous n'avez pas de fonction. Mais dès que vous avez une fonction, nous en avons une parce que nous utilisons setTimeout. Vous devez utiliser l'async avant. Avant la fonction. Vous pouvez également utiliser une fonction normale comme celle-ci. Et avant le mot-clé function, vous devez utiliser async ou avant que la fonction d'erreur 40 soit une syntaxe plus courte pour cela. Et si vous utilisez l'async, vous pouvez également utiliser l'wait. Await peut être utilisé partout où vous avez la valeur de retour d'une promesse ou d'une promesse. Vous pouvez donc attendre la résolution de la promesse. Il existe également une fonction dans le navigateur appelée fetch, et il renvoie également une promesse et vous pouvez également utiliser wait avec cela. Par exemple, ce sera quelque chose comme ça. Attendez et vous mettrez ici l'URL. Eh bien, en fait, nous pouvons l'utiliser. Nous pouvons consulter le mod one dot js. Nous pouvons le charger sous forme de texte. Voyons donc quelle sera la réponse. Cela n'a rien à voir avec les modules, mais de toute façon, cela a quelque chose à voir avec les promesses et le poids. Je montre donc ici la réponse. La réponse est un objet de réponse. Pour obtenir les textes, nous devons appeler quelque chose sur l'objet de réponse. Et ce texte. Et cela revient également à rendre une promesse, comme vous pouvez le voir. Nous savons donc déjà comment utiliser les promesses. Donc je signe plus de textes avec un poids, je réponds au texte. Le texte à points renvoie également une promesse et j'attends la résolution de cette promesse. Ensuite, j'aurai le texte du mod. Allons le vérifier. Plus de texte. Oui, et puis nous avons notre texte de mod one dot js. Donc cette petite excursion pour les promesses, que nous devons utiliser ici. Soit vous utilisez des points puis avec la fonction de rappel. Et cette fonction de rappel est appelée chaque fois que la promesse est résolue. est dans ce cas que le module a été chargé. Ou vous utilisez la syntaxe bien plus agréable wait import. Ensuite, vous obtenez directement la molécule. Ensuite, vous pouvez utiliser le module comme si vous le vouliez. Écrivez un mod d'importation statique à partir du mod point un, JS qui sera le même. Donc, dans ce cas, le mod serait le même. Vous pouvez appeler default ou le faire aussi. Nous pouvons donc le tester ici. Oui, donc je recharge. D'abord. C'est écrire, faites-le, faites-le aussi avec l'import statique, puis faites-le et faites-le aussi avec une importation dynamique. Importation statique, et ici importation dynamique. Ainsi, si vous souhaitez charger un module juste à temps, par exemple, si l' utilisateur accède à une nouvelle page et que vous souhaitez afficher un nouveau contrôle. Vous pouvez ensuite utiliser l'importation dynamique. Et cela renvoie une promesse. Et vous devez soit attendre la promesse, soit utiliser les méthodes point puis. Ensuite, vous obtenez le module. Comme si vous utilisiez cette syntaxe. 4. Conclusion: Dans cette vidéo, je vais terminer le cours et résumer ce que je vous ai montré à propos des modules ES6. Nous avons vu comment intégrer des modules dans du code HTML avec une balise de script et un module de type. C'était donc notre premier module ici, main js. Ensuite, nous avons importé le deuxième module notre premier module dans notre premier module. Et c'est le deuxième module. Nous avons exporté deux fonctions ici. L'une est une exportation par défaut et l'autre ne l'est pas. Et vous avez vu comment importer le module entier, le module complet avec cet astérisque. Nous avons également vu comment importer uniquement des exportations spécifiques. Par exemple, ici, nous n' importons que deux. Ou nous pouvons également importer les valeurs par défaut. Enfin, nous avons vu comment utiliser la fonction input ici, qui est utilisée pour charger dynamiquement des modules lors de l'exécution. Et nous avons appris à utiliser l' API promise et à utiliser les nouveaux mots-clés, un poids unique, à utiliser la fonction d'importation et à obtenir immédiatement le module afin que nous puissions appeler les fonctions exportées ici . J'espère donc que vous avez apprécié le cours, et j'espère que vous êtes maintenant capable d'utiliser les modules ES6 avec succès. Et avec un peu de confiance. N'hésitez pas à consulter mes autres cours sur le développement Web et JavaScript. Bonne chance et au revoir.