Nous avons résumé le mécanisme jusqu'à ce que plusieurs fichiers statiques soient appliqués au navigateur. Grosso modo Le navigateur a une langue fixe qui peut être reconnue, et toute langue doit être traduite dans une langue qui peut être reconnue. Ce travail de traduction est appelé compilation, et s'il ne peut pas être compilé, il doit être traité au préalable. Ce prétraitement s'appelle la pré-compilation, et c'est un flux dans lequel chaque petite fonction est transformée en un groupe de traitement appelé module, compilé et renvoyé au navigateur.
supposition
Programmation débutant(Deux mois)Ceci est un résumé de ce que j'ai appris.
Il peut ne pas être valide dans le champ réel ou il peut y avoir des informations incorrectes.
Si vous l'avez remarqué, faites-le nous savoir dans les commentaires.
Le navigateur ne peut reconnaître que les langages HTML, CSS, JavaScript et WebAssembly. Peu importe ce que vous écrivez côté serveur, ces quatre sont enfin renvoyés dans le navigateur. Les navigateurs ne peuvent pas afficher les pages dans d'autres langues.
Le navigateur ne reconnaît que les quatre ci-dessus, mais il existe des langages de programmation conçus pour être plus faciles à écrire et à lire en développement. Ce langage de programmation est appelé ** langage avancé **.
Un langage de programmation conçu pour être plus facile à comprendre pour les humains que les machines Les langues faciles à reconnaître par les machines sont appelées ** langues inférieures **. Exemples de langages de haut niveau CSS:SCSS、SASS JavaScript:TypeScript、CoffeeScript
Le processus de traduction d'un langage pratique pour le développement afin que le navigateur puisse le reconnaître s'appelle la compilation.
compiler La tâche de traduire un langage de programmation afin qu'il puisse être compris par une machine exécutant La compilation est effectuée par un programme appelé compilateur. S'il existe un langage que le compilateur ne peut pas reconnaître, vous devez le précompiler à l'avance.
** Précompilé ** Pré-compilation qui permet au compilateur de traduire des langues qu'il ne peut pas traduire Prétraitement effectué pour le traitement principal En tant que méthode pour effectuer cette précompilation, il existe un mécanisme appelé pipeline d'actifs.
** Pipeline d'actifs ** Une fonction qui organise les fichiers statiques appelés actifs tels que JavaScript et CSS en petits morceaux Le traitement du pipeline d'actifs est effectué dans le flux de précompilation → concaténation → compression → placement. Après avoir précompilé et concaténé plusieurs fichiers statiques, compressez et réduisez le poids et placez-le dans le répertoire public afin qu'il puisse être transmis au navigateur. La précompilation est effectuée à l'aide du module bundler.
** Module bundler ** Module bundler est un outil qui gère les modules JavaScript tout en tenant compte de leurs dépendances. Un module est un ensemble de processus qui divise les fonctions une par une afin qu'elles puissent être lues à partir d'autres fichiers. Les modules gèrent un groupe de fonctions, et lorsque chaque fonction a une dépendance, le bundler de modules les gère tout en les considérant. Le module Pandora est utilisé car si les fonctions sont divisées en fichiers sans être gérées par des modules, des problèmes surviendront lors de leur combinaison finale en un seul fichier.
webpack Outil Mainstream dans le module bundler Webpack fait quatre choses principales ・ Entrée Décidez quel fichier utiliser comme référence (point d'entrée) pour résoudre la dépendance. · Production Spécifiez où et quel nom sortir le fichier qui est utilisé comme point d'entrée et collecté par webpack. ・ Chargeurs Lisez (chargez) la méthode de conversion de fichiers tels que CSS et HTML autres que JavaScript en modules et effectuez le traitement spécifié. ・ Plugins Introduisez et étendez (branchez) les tâches que le chargeur ne peut pas exécuter autres que le regroupement de fichiers tels que la compression.
Recommended Posts