Construire JavaScript avec le générateur de site statique Hugo

1. 1: Bonjour, je m'appelle Sean et bienvenue dans mon bâtiment JavaScript pour le cours Hugo. Vous disposez de puissantes fonctionnalités de création JavaScript intégrées , de sorte que vos besoins en matière de création soient rationalisés et que vous n'ayez pas besoin d'utiliser des programmes externes tels que le cumul de colis ou le Webpack. Peut-être commencer comme il se demande peut-être, qu'est-ce que la construction et le groupement JavaScript et pourquoi voudrais-je le faire ? Cela implique d'obtenir plusieurs modules ou bibliothèques JavaScript et de les combiner en un seul fichier. En fait, vous ne pouvez inclure les composants des modules dont vous avez besoin. Et nous appelons cet arbre tremblant. Vous pouvez transférer la sortie du code pour qu'il fonctionne avec des navigateurs plus anciens. Vous pouvez également réduire le code que vous sortez et qui comprime pour le réduire afin d'obtenir un apprentissage plus rapide des pages. Comment Hugo bundle you go utilise-t-il ESP, qui est un bundle JavaScript rapide, et il est écrit dans Go. Il dispose d'une excellente interface API avec Hugo. Votre code actualisera automatiquement le navigateur sur Enregistrer. Étant donné que le bâtiment ES est intégré votre serveur de développement de chargement de bibliothèque, vous pouvez éventuellement utiliser Babel avec la version AS pour transpire et inclure des remplissages poly pour les anciens navigateurs. Que couvre ce cours ? Nous examinerons le regroupement et la création de JavaScript en général, en utilisant npm pour télécharger des bibliothèques telles que Bootstrap, importations de modules ou de bibliothèques, les empreintes digitales des cartes sources de sortie pour développement afin que vous puissiez déterminer d'où proviennent les erreurs. Grossissement pour réduction. Votre code se charge donc plus rapidement. ciblage des navigateurs pour la sortie vers les anciens navigateurs compatible avec le tremblement de l'arborescence de code. Seules les parties de la bibliothèque que vous utilisez sont réellement incluses. Et en créant une partie pour pouvoir réutiliser votre code sans avoir à copier et coller. Rejoignez-moi sur ce cours et vous n'utiliserez plus jamais un outil de création JavaScript externe avec un outil de création JavaScript externe avec Hugo, semblant le cours. 2. Pour commencer: Commencez. La première chose à faire est de télécharger les fichiers dans la section des résultats, vous n'aurez qu'un seul fichier pour commencer, et c' est le fichier zip qui s'appelle zip star dot. Vous devrez extraire les fichiers, puis ouvrir le dossier dans le code Visual Studio. Avant de vous montrer que vous devez disposer la dernière version du logiciel suivant, vous avez besoin du code Hugo Visual Studio, node.js, qui inclut NPM et sous Windows et inclut également du chocolat de Solon ego. Et éventuellement, les recommandations sont CLI et GitHub Desktop. Une fois que vous avez extrait le dossier, si vous avez configuré le code VS comme je l'ai recommandé dans mon cours de démarrage avec Hugo. Ce n'est que la première vidéo du cours. Et je soulèverai ce LinkedIn dans la section des résultats ci-dessous. Vous pouvez cliquer avec le bouton droit de la souris et ouvrir avec du code. À partir de là, tout est prêt dans Visual Studio. Dans la leçon suivante, je vais vous montrer comment commencer avec tous ces fichiers. 3. Configuration NPM: La première chose que vous devez faire avant d'entrer dans construction JavaScript est de configurer notre environnement NPM. Nous allons initialiser le projet en lui dedans. Nous allons ensuite installer le paquet de fichiers bootstrap avec npm install Bootstrap. Ensuite, nous allons créer des scripts indium de base pour le serveur de développement et la commande build. J'ai ouvert le zip de point Getting Started dans le dossier extrait, et j'ai ouvert que dans code Australie comme dans la dernière vidéo, vous devez aller dans le menu du terminal, puis dans le nouveau terminal et tapez npm init. Maintenant, il va vous poser quelques questions. Et ces questions s' adressent aux personnes qui tentent de publier ce projet dans le registre du MNP. Nous n'allons pas faire cela aussi. Toutes ces questions ne sont pas vraiment importantes. La première question est le nom du package et qui est extrait du nom du dossier que le projet est assis. La valeur par défaut est généralement correcte sauf si le nom de votre dossier n'est pas tout à fait correct. Il suffit d'appuyer sur Entrée pour accepter la valeur par défaut. Si vous êtes satisfait de cette version, n'est-ce pas si important que vous ne vous concentrez pas sur le versionnement et que je ne vais pas passer par le versionnement dans cette vidéo. C'est pour une autre vidéo. La description n'a pas vraiment d'importance. Encore une fois, c'est pour le NPM. Registre. Le point d'entrée n'a pas vraiment d'importance. La commande de test n'a pas d' importance pour nous. Et j'aime m' assurer qu'ils obtiennent correctement le référentiel IES parce que c'est un bon enregistrement de l' endroit où ils obtiennent le référentiel est le plus facile comme un enregistrement facile défini au cas où vous en auriez besoin. C'était lui qui était cette affaire. L'auteur n'a pas d'importance, et les pertes n'ont pas vraiment d' importance, pas la publication. Vous devez ensuite appuyer sur Entrée pour confirmer que tout va bien. Ensuite, vous verrez un fichier package.json. Si vous ouvrez cela, il reflétera tout ce que nous ne l'avons pas mis l'exception de l'ajout d'un script de test, qui ne fait aucun test. Allons de l'avant et installons Bootstrap et ensuite nous retournerons dans ce fichier package.json. Alors fermez cela et revenez au terminal et tapez npm, installez Bootstrap et appuyez sur Entrée. Vous verrez qu'il est installé sur des paquets. Examinons en quelque sorte le dossier des modules de nœuds , nous devrions juste être crédités. Honnêtement, j'ai Bootstrap et pop ab.js. Et pop ab.js est en fait une dépendance de Bootstrap. Si vous avez déjà été Bootstrap et leur fichier package.json, vous remarquerez que si nous faisons défiler vers le bas, ils ont une dépendance P de puppet dot js. Et c'est un autre paquet que bootstrap utilise réellement pour son JavaScript. C'est un autre dossier Bootstrap. Vous verrez. Vous verrez des chutes de sols. Et nous allons travailler en important des fichiers de son dossier Bootstrap et en les modifiant au besoin, puis en les construisant avec Hugo. Fermez ce package.json Dann die se confus. Minimisez le dossier des modules de nœuds, et nous reviendrons dans le package.json. Et vous verrez que nous avons maintenant une dépendance au bas de Bootstrap. Le projet repose sur Bootstrap. Nous allons ensuite examiner nos scripts, tout le contenu de ce script de test conservera les virgules inversées. Et ensuite, nous allons annuler le test de mots. Plus de prix qu'avec div. Pendant le serveur de développement, nous devons exécuter le serveur spatial. Ensuite, nous allons lancer une option qui est tiret, tiret, désactiver rapidement, rendre. Assurez-vous de mettre un F majuscule et un R. majuscule La prochaine option utilisera son tiret, tiret GC. Et c'est la collecte des ordures. Ce que ça va faire, parce que nous produisons des ressources avec Hugo créerait des fichiers JavaScript. Nous voulons que vous vous débarrassiez de tous les vieux fichiers quand il s'exécute, et c'est ce qu'est la collecte des déchets. Merci, je vais le faire, on va lancer un script de construction. Insérez donc une virgule , puis interférez une nouvelle ligne. Insérez des virgules inversées et nous écrirons, construirons, puis un deux-points et un espace et d'autres virgules inversées. Nous allons diriger Hugo. Mais cette fois, je vais courir Dash, Dash, Dash, Dash. Ensuite, nous sauverons ça. Vous ne mettez pas de virgule après la deuxième loi et la dernière loi, et vous ne pouvez placer que des virgules entre les lignes, sinon cela générera une erreur. Vous nous laisserez ensuite les individus pseudocoder en bas que le mot, mots script NPM vont se répéter à partir d'eux. Nous pouvons réellement exécuter le script assez facilement sans utiliser la ligne de commande. Nous commencerons avec le serveur de développement qui sera en jeu et nous vérifierons que cela fonctionne. Cela fonctionne très bien et vous pouvez cliquer sur Contrôle pour l'ouvrir. Dans le sondage, je vous ai dit que vous avez le site Web sur lequel vous travaillez dans ce cours et qu'il utilise le serveur de chargement de bibliothèque. Par conséquent, si vous apportez des modifications dans Visual Studio Code et que vous cliquez sur Enregistrer, recharger automatiquement dans le navigateur. Tout au long de ce cours, ce que nous faisons si vous cliquez avec le bouton droit de la souris et inspectez, ou si vous réduisez votre fenêtre vers le bas, vous passez ou si vous réduisez votre fenêtre vers le bas, en mode mobile. Vous remarquerez qu'il y a un petit menu en haut à droite. Si vous cliquez dessus, il utilise la bibliothèque JavaScript Bootstrap pour effectuer cette liste déroulante. Cette animation est contrôlée par JavaScript. C'est un excellent moyen de vérifier que JavaScript fonctionne réellement. On va dans la tête. Vous verrez actuellement le code JavaScript pour le rechargement automatique via Hugo. C'est la première chose qui vient là-dedans. Plus tard, vous verrez un lien vers la bibliothèque JavaScript. En bas du pied de page. C'est un CDN, c'est un serveur en ligne qui configure le JavaScript sur le navigateur dont Bootstrap a besoin. 4. Construire de base à la structure JavaScript: Examinons maintenant une version JavaScript de base à l'aide de Hugo. Bien que la configuration ne soit pas encore lourde , nous allons utiliser une configuration générique pour construire la bibliothèque JavaScript de Bootstrap à partir de son module noeud source précédemment téléchargée. Ce faisant, nous n' avons pas à compter sur le CDN, qui est tout à fait destiné au développement hors ligne. Et plus tard, nous voudrons réellement personnaliser la version car nous aurons accès à la source. Nous n'allons donc pas inclure toute la bibliothèque. Nous n'allons inclure que les pièces que nous utilisons pour minimiser et minimiser les faux yeux. Nous pouvons également personnaliser les navigateurs avec lesquels la construction JavaScript est son bras pour travailler. Parce que par défaut, la source ne fonctionnera qu'avec les navigateurs les plus modernes. Nous allons utiliser une traduction pour rendre ce code moderne un peu plus ancien afin que d'autres navigateurs fonctionnent réellement avec lui. Je laisserai des liens vers ces deux pages que nous allons consulter dans la section Ressources de cette leçon, le premier lien est vers l'oreille renversée. Nous n'allons pas beaucoup entrer dans cette page parce que cela devient assez rapidement compliqué. La grande référence à avoir à cause du document Hugo n'est pas si complexe ou approfondie ? Il y a un bon petit graphique de l'étoile et il vous montre une bonne comparaison de rapidité d'utilisation d'ASPE . Un autre avantage de la construction AS est qu'il est écrit en Go et qu'il a une excellente API et qu'il fonctionne très vite avec Hugo parce qu'il passe à la racine et nous y allons aussi. Nous sommes vraiment préoccupés par la page de documentation Hugo pour la construction de JavaScript. Et comme je l'ai dit que les liens sont également dans la section des ressources, il y a un tas d' options que nous pouvons fournir pour le moment, nous ne sommes pas si inquiets des options. Si vous allez juste en bas, vous verrez un exemple. Où puis-je écouter cet exemple et le copier ? Ensuite, nous le collerons dans le projet. En fait, c'est assez simple. Vous pouvez même l'écrire à la main. Dans le projet. Vous pouvez fermer le fichier package.json en frappant deux mises en page, puis partielles. Et nous allons entrer dans le pied de page du script. Et nous allons garder cette première ligne pour le fichier JavaScript de métrage, mais nous allons mettre en évidence tout le reste et faire Control Casey pour le commenter. Et nous garderons cela. Et ensuite, nous irons dans la tête. Ensuite, après votre CSS, nous allons créer une nouvelle ligne. Nous allons faire du bootstrap là-dedans. Surlignez cela, puis nous le commenterons avec Control K. Voyez-vous, ce qu'ils ont à faire, c'est coller ce code. Pour le moment, nous ne sommes pas désolés, j'avais la possibilité de nous débarrasser de ces deux premières lignes. Et puis, après la construction de JS doc, nous allons nous débarrasser des opérations que nous allons modifier plus tard, mais pour l'instant, nous allons nous en débarrasser. Nous garderons cela avant que cela ne fonctionne et vous verrez une zone qui se présente. Il demande un fichier dans la barre oblique de script main.js. Nous allons changer cela en js slash main.js. Vous vous demandez probablement où ça va ? Si vous cliquez à la racine du projet et créez un nouveau dossier ou créez un nouveau dossier appelé ressources. À l'intérieur, nous allons placer n'importe quel fichier que nous voulons qu'Hugo modifie ou construise la largeur. Nous allons donc créer un dossier appelé js. Et tous ces liens sont relatifs au dossier Assets dans ce dossier JS qui créera un fichier appelé main.js. Je sauverai Adam qui sauvera la tête. Ensuite, nous allons tuer le serveur et nous réexécuterons les développements et nous ne devrions pas obtenir d'erreur. Et tout va bien. Quand je suis prêt pour la prochaine leçon où nous sommes importants Bootstrap. 5. Importer des modules JavaScript: Il n' importera jamais de module JavaScript pour pouvoir intégrer la bibliothèque JavaScript Bootstrap dans notre générateur JS et générer un fichier. Nous devons utiliser une déclaration d'importation avec JavaScript. L'importation entraîne l'extraction de la bibliothèque ou du module. Ce sont tous des modules, mais nous travaillons avec la bibliothèque dans le fichier où l'instruction d'importation a appelé. Si vous devez importer une autre bibliothèque, ils fourniront des instructions sur la façon de procéder à l'importation. De retour dans le projet. Nous allons entrer dans le fichier main.js et nous allons utiliser une déclaration d'importation. Et pour ce faire, vous écrivez l'importation, allez à importer le style, qui est tout comme bootstrap de. Ensuite, nous utiliserons le signal intégré aux commentaires. Et nous allons importer depuis bootstrap. Et cela dirigera le générateur JavaScript vers notre dossier de modules de nœuds. Qu'est-ce qu'ils ont fini ? Est-ce qu'il va dans le dossier Bootstrap vers le haut, comme nous l'avons spécifié ici. Et il se penchera sur le paquet .json. Et parce que ES6, parce qu'ESBL est en fait une accumulation ES6, il recherchera ensuite le mot-clé du module. Puis, à partir de là, module spécifie le fichier à importer. Vous direz, Hey, nous avons une directive de module et c'est une barre oblique décente js slash bootstrap.css, ab.js. Donc nous regardons là, barre oblique réduite, barre oblique, bootstrap point ESM, pas JS. C'est le dossier réel. Ce sera un mobile important. Regardez-en plus là-dessus dans un instant. Je dirai qu'elle est en fait grisée et c'est parce que nous avons déclaré la variable Bootstrap, mais elle n'a jamais été utilisée. Et c'est bon parce que Bootstrap s'initialise seul. Bootstrap n'a pas besoin que nous appelions cette variable Bootstrap pour commencer, commence tout seul. Alors, ne vous inquiétez pas à ce sujet. Nous exécutons le serveur de développement, vérifions que tout fonctionne. Vous devez probablement tuer le serveur et le réexécuter avec des choses qui ne fonctionnent pas pour vous. Une fois que vous avez ouvert dans le navigateur, vous cliquez sur, vous pouvez réduire votre écran et cliquer sur le menu, n'importe lequel de ce menu déroulant, tout est correct. Vous pouvez le récupérer en allant dans la tête et faire défiler vers le bas et vous verrez un lien vers le fichier main.js que nous avons créé. Et si vous allez dans les sources, vous verrez le dossier JavaScript. Et il y a le fichier main.js. Et la première chose qui est très importante, c'est le point de marionnette est le score de dépendance. En bas, vous verrez l'avis de copyright pour la loterie JavaScript Bootstrap. Cela fonctionne bien, nous avons importé toute la bibliothèque. 6. Conforme de développement et de production: Comme pour créer une configuration pour les environnements de développement et de production, nous avons besoin que la configuration soit légèrement différente selon qu' il s'agisse d'un développement et que c'est à ce moment-là que nous sommes travailler sur un débogage du site Web. Ou si nous essayons d'expédier code de production qui doit être le plus petit possible à un serveur. Vous devez donc rendre les choses un peu différentes. Voici maintenant les bases, ce que nous allons prendre en compte dans le développement. Nous voulons que les cartes source soient activées, mais nous ne voulons aucun grossissement. Nous n'avons pas besoin de définir l'option de minification, car c'est le cas par défaut. En production. Nous voulons que les cartes sources soient désactivées. Et cela a également acheté une faute, mais nous devons réduire le code. Dans votre projet. Vous devez accéder au dossier Mises en , puis ouvrir le fichier header.html. Vous verrez que Bootstrap JS est ici. Après la construction de JS doc, nous devons spécifier l'option d'option. Ensuite, nous allons créer une variable ici pour les opérations. Mettez des accolades doubles bouclées. Ensuite, nous faisons un signe dollar et nous faisons UPS. Maintenant que nous définissons cette variable pour la première fois, nous devons utiliser un deux-points égal. Maintenant, pour fournir des options au bâtiment JavaScript, nous devons utiliser un dictionnaire, et il est également appelé carte. Alors, diquez. Passons ensuite aux documents et nous allons voir quelles sont les options. Si nous faisons défiler vers le haut, regardez vers le bas, et vous direz minify. Et cela peut être défini comme vrai ou faux par défaut, c'est faux. La prochaine option que nous devons faire est une carte source. Et si nous voulons l'activer, nous devons utiliser inline. Allons-y et installons ça. Pour la production. Nous allons définir minify pour que vous mettiez cela dans des virgules inversées. Et ensuite, nous allons faire vrai. Et vous n'avez pas besoin de virgules inversées pour cela. Maintenant, avant de passer à autre chose, si vous mettez des tirets au début et à la fin de toutes vos lignes de code avec des accolades. Cela signifie qu'aucune nouvelle ligne ou espace ne sera inséré dans votre code HTML réel. Cela facilite considérablement le débogage. Je vais le faire ici aussi. Permet de placer un espace entre le tiret et le commentaire. Présentez le visage et le tableau de bord. Et nous le ferons ici aussi. Mais je ne mettrai pas de tiret à la fin car je veux une nouvelle ligne avant que la balise de script ne soit insérée. Voilà donc nos options de production. Radula, commentez moi-même les options de production. Et je vais souligner cela et dessiner Casey, ce que je vais faire dans nos options de développement. Ces options remplaceront le développement par défaut. Voyons comment cela fonctionne. Nous faisons donc une nouvelle ligne. Je vais aussi mettre quelques tirets avant qu'on oublie. Je le ferai également pour ces commentaires. Cela rend le débogage beaucoup plus facile si vous n'avez pas déjà mis de nouvelles lignes et que le nouveau code le fera si l'égaliseur est égal. C'est Hugo. L'environnement de points utilise un majuscule a. , puis le développement de virgules inversées. Go Environment retournera l'environnement dans lequel nous sommes actuellement. Et si nous sommes dans un environnement de développement, le mot développement sera renvoyé. Et cela équivaut au développement. Et ensuite, les choses suivantes se produiront. mettrons Bay Alanine et nous ferons une balise de fin avec quelques tirets. Ensuite, ce que nous allons faire, nous copierons notre ligne UPS et la collerons. Mais le plus important, c'est que vous devez supprimer cette colonne car nous étions en train de redéfinir la variable. Vous devez supprimer la colonne qui rencontrera un problème. Nous allons nous débarrasser de Minify. Et nous allons faire une carte source. Vous devez utiliser un M majuscule pour la carte source. La seule option disponible est en ligne. Quelles sont nos premières options de production. Si nous développons une première étape aura lieu. Et c'est bon. Et il va écraser avec cette loi et il est un nom minification aura lieu pour le développement. Nous disposons d'une carte source en ligne. Nous allons sauver ça. Et nous allons y aller. Nous allons exécuter le script de développement. Jetons un coup d'œil sur le serveur. Notre JavaScript fonctionne toujours parce que ces nouvelles mobiles fonctionnent. Nous allons dans le fichier JS. Vous remarquerez maintenant qu'il y a un dossier de modules de nœuds. Et vous vous demandez probablement pourquoi, ce qui ne fait pas le dossier des modules de nœuds dans mon dossier JavaScript pour mon site Web. Si vous allez dans main.js et que vous avez juré en bas, vous verrez une ligne et l'URL de la carte source s'affiche. Ce que cela fait, si nous essayons de déboguer le code, le laiton tire en fait les dépendances de nos modules de nœuds. Et vous pouvez cliquer sur une ère et cela vous montrera où cette erreur existe dans les chutes que vous allez tirer dans Build. Vous pouvez réellement retourner dans le sol pour déterminer où l'erreur se produit et indiquer que la carte source fonctionne. Mais en production, ça n'arrivera pas. Jetons donc un coup d'œil à la production maintenant et voyons en quoi elle est différente. Production gourmande. Vous remarquerez les codes pleins d'espaces et de nouvelles lignes et inventés très soigneusement et c'est très facile à lire. Jetons un coup d' œil à notre code de production. Ce que nous allons faire, nous allons appuyer sur le bouton Corbeille pour tuer le terminal, le bouton de construction. Cela ne fonctionnera pas sur le serveur, mais ce qui se passe, c'est qu'il crée un dossier public pour nous. Et ici, tous les fichiers sont prêts à être téléchargés sur un serveur FTP. Nous ouvrons le fichier JavaScript, puis le fichier main.js. Vous remarquerez que les choses sont complètement différentes. Nous ne m'avons plus eu d'espaces sur de nouvelles lignes. Et toutes les variables ont été raccourcies en caractères très courts pour essayer de compresser la taille du fichier et de minimiser le nombre de caractères utilisés. Donc, c'est comme un long Alon qui est destiné à l'ensemble du dossier. Il est donc beaucoup plus petit qu'avant. 7. Impression de doigts: L'étape suivante est l'empreinte digitale, sera de générer une empreinte digitale qui est un fichier de hachage basé sur la sortie du fichier JavaScript. Pour de nombreuses raisons, le nom de fichier réel, l'empreinte digitale sera ajoutée au nom du fichier, ce qui rend la chute unique. Le navigateur ne confondra pas un fichier plus récent avec un ancien fichier car j'ai tous les deux des hachages différents dans les noms de fichiers réels. L'autre raison est que le navigateur peut utiliser l'empreinte digitale pour vérifier que le fichier JavaScript n'a pas été remplacé et qu'il s'agit d'un contrôle de sécurité. Nous allons en fait fournir un numéro de chèque qui sera vérifié par rapport au dossier réel. Le navigateur peut déterminer si le fichier en cours de téléchargement et chargement dans le navigateur est en fait la chute correcte que nous y avons mis nous-mêmes. Commençons donc. Le lien vers cette page dans la section des résultats ci-dessous, ces gars à travers le fonctionnement de l'empreinte digitale avec Hugo. Maintenant, si vous regardez la façon dont cela fonctionne ici, ils ont la ressource réelle, puis ils sont en cours d'exécution, ils utilisent un tuyau, puis ils des ressources, pas des empreintes digitales. Nous pouvons réellement supprimer la partie ressources et simplement exécuter les empreintes digitales. Nous devons utiliser un f. minuscule et l'espacement spécifiant SHA-512 en haut de l'empreinte digitale. Nous pouvons laisser ça de côté si nous le voulons. Ce que nous pouvons faire maintenant, c'est qu'une fois que nous avons fait cela, nous pouvons placer la propriété d' intégrité. Nous venons de spécifier la même variable que la source. Mais au lieu de faire un point permalien ou un vrai permalien, nous devons spécifier l'intégrité des points, des points et des points. Et ce sera un hachage. Allons y aller. Je vais dans les mises en page , puis les partiels et la tête. Vous verrez que nous obtenons notre ressource, puis nous faisons un tuyau et nous l'exécutons via JS build. Il mettra ensuite une autre empreinte digitale Moran. Ensuite, la balise de script après la source, nous parlerons d'intégrité. Alors, il est probable que nous utilisions une variable intégrée. Nous saisirons les données construites pour cette fois, nous effectuerons des données de points avec un D majuscule et une intégrité des points. Nous fermerons nos doubles bretelles bouclées. Ensuite, nous sauvegarderons cela et nous allons exécuter le serveur de développement. Et nous allons jeter un coup d'œil. Nous allons juste vérifier que JavaScript fonctionne avec la liste déroulante, ce qui est génial. Ils vont dans le dossier js. Le fichier Learners to JS dispose désormais d'un hachage vers le nom de fichier. Le fichier lui-même est le même. Quel hachage à l'intérieur. Au fur et à mesure que nous mettons à jour notre JavaScript, un nouveau fichier apparaîtra sous forme de nouveau hachage et le navigateur est forcé de fermer le nouveau fichier. Vous n'aurez aucun problème de mise en cache. L'autre chose que nous pouvons faire, c'est que nous pouvons accéder aux éléments, puis ouvrir la tête du document et faire défiler vers le bas et vous remarquerez que nous avons notre nom de fichier avec le hachage, cette attitude, et nous avons J'ai eu notre intégrité là-dedans. Par défaut, il s'agit de jeux SHA-256. Le codage est que le hachage sera vérifié par rapport à ce fichier, non pas au nom de fichier réel, mais au contenu de celui-ci. Et si le contenu de ce fichier s'avère être ce hachage, nous sommes prêts à y aller et les contrôles de sécurité sont passés. 8. Treeshaking l'arbre, de l'arbre: Cette leçon porte sur le tremblement des arbres. tremblements d'arbres, où nous n'incluons les parties requises de la bibliothèque, puis elles sont construites. Pour ce faire, vous devez d'abord importer uniquement les composants de bibliothèque dont vous avez besoin. Esbl, qui est utilisé par Hugo, prend en charge le tremblement des arbres par défaut. Cela repose sur les composants qui sont importants, donc c'est assez facile à faire. Et la principale raison pour laquelle nous le faisons est que cela aide à réduire la taille des fichiers , car une grande partie du fichier est plus lente que le chargement des pages est lent. Et si vous utilisez quelques bibliothèques différentes et votre page, cela va ralentir assez rapidement. Alors, allons-y. Nous allons le faire, si nous allons jeter un coup d'œil, tout d'abord, ouvrir les actifs et main.js et nous allons le mettre en évidence et faire le cas de contrôle soit le commenter au-dessus. Nous allons mettre un commentaire qui importera toute la bibliothèque de bootstrap. Et nous ne le ferons plus, mais nous le laisserons de toute façon comme référence. La prochaine chose que nous allons faire est d'importer uniquement les parties requises de la bibliothèque. C'est comme ça qu'on va le faire. Nous allons faire de l'importation. Ensuite, ces parties de bootstrap. La façon dont nous déterminons les pièces que nous pouvons réellement importer. Nous allons dans notre dossier no modules, puis bootstrap. Et nous avons compris que le fichier qui est utilisé pour la construction est le disque et ensuite js, et ensuite c'est bootstrap dot ESM dot js. Si vous marquez directement au bas du fichier, vous remarquerez que nous avons notre exportation. Si vous mettez en surbrillance tous ces mots et que vous les copiez, vous pouvez les coller ici. En fait, cela va tout importer. Mais ce n'est pas ce que nous voulons. Donc, ce que nous allons faire, c'est que nous allons mettre tous ces mots sur de nouvelles lignes. Ensuite, nous pouvons facilement les commenter. Si besoin est. Pour continuer à appuyer sur Entrée pour obtenir ces nouvelles lignes. J'obtiendrai ce dernier saut de ligne. Maintenant, par défaut, la seule chose dont vous avez réellement besoin pour le site que j' ai configuré est l'effondrement. Nous utilisons Control Casey pour commenter tous ces éléments. Vous n'avez pas besoin de liste déroulante pour une configuration de menu déroulant des menus déroulants de lot de plongée. Ensuite, nous contrôlerons Casey cette infobulle. Le dernier sujet. Ensuite, nous allons appuyer sur Control S pour enregistrer l'exécution du serveur de développement. Et nous allons jeter un coup d'œil. Nous allons vérifier le fonctionnement de nos JavaScript. Les effondrements sont donc évidemment importants. Ensuite, allez dans la tête et vous pouvez voir où encore importer le même fichier. Ensuite, nous allons entrer dans les sources et JavaScript. Et il y a notre importation. Il va toujours importer pop app.js, qui n'est pas la plus grande bibliothèque. Mais à la fin, la course va importer la partie du Bootstrap. Pendant que je lis que nous avons besoin, ce qui va être une économie de taille. 9. Fixer une cible de sortie: Nous venons maintenant de fixer notre objectif de production. Esp world peut traduire la plupart des nouvelles syntaxes JavaScript en versions antérieures jusqu'à un maximum d'ES 2015. Espn ne peut pas traduire vers S5 et ears 5 ce qu' Internet Explorer et de nombreux autres navigateurs plus anciens utilisent. Mais heureusement, ce n'est généralement pas une exigence et ce n'est pas quelque chose que Bootstrap supporte de toute façon, il s'agit d'une erreur que la version AS build traduit le langage jusqu'à la dernière version des oreilles est en fait appelée ES ensuite, qui est trop moderne pour la plupart des navigateurs supportent un défaut. Il devient ESP vieux et s'est en fait installé pour travailler dans la majorité des navigateurs. Nous allons mettre en place ESBL, donc cela se traduit par ES 2015. J'adore ce lien dans la section Il y a aussi. C'est un très bon site appelé Puis-je utiliser ? Et au Kenya, j'utilise, je vais mettre ES6 , également appelé ECMAScript 20152015. Et vous remarquerez qu' Internet Explorer ne prend pas en charge la plupart des S6 Edge à partir de 20 $, Firefox à 17$ en 2017 fait Chrome à partir de 2016. Safari à partir de 2016, ES6 a en fait un bon support et je vais vous montrer ce que Bootstrap prend actuellement en charge sur cette page bootstrap GitHub, si vous faites défiler vers le bas et ouvrez la liste des navigateurs RC. Et je vais laisser un lien pour cela dans la section Ressources. C'est ce que le fichier fourni par Bootstrap au CDN. C'est ce qu'ils soutiennent dès le départ. Ils prennent en charge Chrome 60, Firefox version 60, iOS 12, Safari 12 et non Internet Explorer. Allons comparer ça à ES6. Ils font Chrome version 60. Es6 est en fait dû à Chrome 51. Ils font Firefox version 60, nous allons en fait prendre en charge jusqu'à la version 54. Ensuite, ils réalisent la version 12 pour Safari sur iOS. L'outil de version pour Safari fonctionne, vous allez prendre en charge l'étain d'intégration. Donc, en spécifiant ES6 dans hago, nous prenions en charge un peu plus que ce que Bootstrap supporte réellement par défaut. Il n'y a donc aucun mal à faire cela. Ainsi, sur la page des documents de construction JavaScript, vous verrez une option appelée cible, et vous verrez ensuite l'ES par défaut. Et ce n'est pas très utile car cela va utiliser certaines des fonctionnalités linguistiques les plus modernes que beaucoup de navigateurs ne prendront pas en charge. Nous allons choisir ES 2015. Il y a un commissaire-priseur de ES cinq, mais la réalité est qu'ESBL ne sait pas comment traduire. La plupart des correctifs linguistiques sont inférieurs à ES cinq. Et si vous dites que vous avez cinq ans, vous risquez plus que probablement d'avoir des erreurs. Utiliser une cible d'IAS 2015 ira dans le dossier Mises en page, puis partiels, puis en tête. Et vous verrez que nous avons nos options ici. Pour les deux, ils utiliseront le clic Alt pour cible. Es 2015. Nous allons simplement effectuer une vérification rapide pour qu'il semble qu'il soit lié. Lorsque je change de configuration comme celle-ci, je vais devoir tuer le serveur et le redémarrer juste pour être sûr. Ensuite, nous allons vérifier cela dans le navigateur. Lorsque vous démarrez, lorsque vous effacez, sorte que vous devez vous rafraîchir dans le navigateur. Donc, notre JavaScript fonctionne toujours. Nous pouvons voir que nous sommes toujours en train d' obtenir des dossiers là-dedans. Tout va bien. 10. 10: Si vous êtes arrivé jusqu'ici, vous vous en sortez vraiment bien. C'est la dernière chose que nous allons faire dans le cours, et c'est créer une partie. Je dois déplacer tout le code de construction JavaScript que nous venons de compléter en partie. Et c'est ce que nous faisons pour pouvoir réutiliser le code pour toutes les tâches de création JavaScript que nous avons effectuées. Nous n'avons pas eu à copier et coller quoi que ce soit. Nous pouvons simplement le réutiliser. Normalement, vous attribuez le contexte de points à une partie. Mais dans ce cas, nous allons attribuer le chemin d'accès au fichier JavaScript, que nous allons construire à la partie. Et cela indiquera la partielle sur laquelle la chute doit être construite. Lien vers la page de documentation concernant le cas de modèles partiels. Vous ne ferez aucune autre lecture en ce qui concerne cette leçon. J'essaie de rester aussi simple que possible. Nous allons le faire, c'est que nous laisserons notre commentaire Bootstrap JS là-dedans, puis en dessous, nous écrirons partiellement. Ensuite, nous allons fournir une partie de la version partielle et nous appellerons simplement cette version ES partielle. Normalement, vous mettriez un point ici pour les contextes que vous avez fournis à la partie. Mais dans ce cas, ce que nous allons faire, c'est que nous allons faire js slash main.js. Je copie ça d'ici. Ce que nous allons faire, c'est que nous allons le remplacer par le point, puis nous allons saisir tout ce code et Control X pour le couper. Je ne vais pas dire ça parce que le serveur fonctionne à une époque. Je vais ensuite entrer dans mes mises , puis les partielles et je vais créer un nouveau code partiel, ESBL dot HTML. Et je vais coller ce code. Ce qui est vraiment important, c'est que vous avez le point là pour la ressource réelle que vous construisez et qui sera attribué en fournissant le chemin vers la chute qu'il après la partielle. Je vais dire ça. Je sauverai ma tête, puis on va vérifier. Cliquez avec le bouton droit de la souris et inspectez. Ensuite, nous irons vers des sources. Et nous dirons que sous JavaScript, nous avons notre principal fichier JavaScript. Juste pour tester le concept. Nous aurons maintenant la création de la vidéo IS il n'y a pas grand-chose dedans, mais nous allons la construire de toute façon juste pour tester. Je vais juste mettre un copier-coller ces deux lignes ci-dessous et nous appellerons ce métrage SI vous ne les sépareriez probablement pas normalement, mais juste pour tester les premiers points js. Et puis nous devrons le faire est d'aller dans le fichier statique et JS et de le faire glisser dans notre dossier js slash assets SSH. Ensuite, je sauverai la tête. Maintenant, notre fichier de pied de page est construit par bâtiment ES Hugo a dit qu' il n'y a pas grand-chose dedans. Normalement, je n'inclurai probablement pas cela dans le fichier principal car cela ne sert à rien de le diviser. Mais juste pour démontrer à quel point ces partiels sont vraiment puissants. Si vous avez d'autres fichiers JavaScript que vous souhaitez créer, il suffit de copier et coller la ligne et de modifier le chemin d'accès. Et c'est par rapport au dossier Assets car nous traitons des résultats dit fonction dot get.