Votre propre code d'application était généralement dans un espace de nom dans une application globale pour empêcher la pollution de la portée globale. Sans cela, ce n'est que si longtemps avant d'avoir des collisions de noms et que les choses s'effondrent.
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>Les bibliothèques exportent des objets dans un format de module commun (modules ES6).
<span>export default function $() { ... }
</span>Nous importons un module dans une portée locale et l'utilisons.
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>C'est vraiment vraiment compliqué. Tout d'abord, il existe une variété de formats de modules utilisés:
Les outils pour les actifs de regroupement sont disponibles dans une variété de formes et de tailles:
Ensuite, il y a des transpiles que vous voudrez peut-être utiliser:
De plus, il existe différentes bibliothèques qui permettent un chargement dynamique de modules:
Ce sont des listes abrégées d'outils populaires actuellement utilisés - c'est un champ de mines pour les débutants et les experts. Le coût du transplage souligne également que vous pouvez mélanger et faire correspondre beaucoup de ces outils et obtenir des résultats différents.
Les développeurs frontaux utilisent des outils de construction depuis très longtemps, mais ce n'est qu'au cours des dernières années que nous avons vu une étape de construction devenir la norme. Des outils comme Sass et Coffeescript ont aidé à faire du prétraitement grand public, mais l'élan autour de l'ES6 a maintenant tout le monde à bord.
La communauté JavaScript a apporté de grandes améliorations en 2015, mais nous devons consolider des outils en 2016.https: //t.co/hgrljisqhb— Nicolás Bevacqua (@NZGB) 8 janvier 2016
Je suis d'accord.
Gulp et Grunt ont été très populaires au cours des dernières années, ces outils vous permettent d'écrire une série de transformations en pipe vos actifs. Ils ont été utilisés avec un grand effet et sont toujours populaires, bien que beaucoup de gens choisissent d'utiliser les outils directement via NPM - voyez pourquoi j'ai quitté Gulp et Grunt pour les scripts NPM et le guide pour utiliser le NPM comme outil de construction.
Personnellement, je ne me soucie plus de construire des pipelines d'actifs, ce que je recherche, ce sont des outils de configuration minimaux qui me permettent d'utiliser des outils modernes au besoin: des choses comme Sass, Autoprefixer, Babel et CoffeeScript, un module approprié Système et chargeur sans avoir à se soucier de l'implémentation, de la configuration et de la maintenance continue. Essentiellement, chaque développeur a investi du temps dans la création de pipelines d'actifs au cours des dernières années, c'est beaucoup de réinvention des roues en cours et beaucoup d'heures gaspillées.
La communauté est divisée sur des outils comme Browserify, WebPack, JSPM, Sprocket et Gulp. Ce n'est pas vraiment un problème, c'est tout simplement déroutant pour tout le monde qui essaie de comprendre un chemin clair vers l'avant.
Il y a quelques choses sur lesquelles nous pouvons nous mettre d'accord:
Voyons à quoi ressemblent les configurations minimales de configuration à l'aide de Browserify, WebPack et JSPM, ce sont les bundlers JavaScript les plus importants pour connaître aujourd'hui.
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>Mettre à jour index.html dans votre éditeur de texte préféré
<span>export default function $() { ... }
</span>Nous aurons également besoin d'un serveur pour exécuter le code, par exemple en direct qui est un excellent petit serveur HTTP zéro config avec une capacité de recharge en direct. Installez-le globalement avec NPM Install -g Live-Server et exécutez le serveur en direct de la racine du projet pour démarrer.
Browserify vous permet d'exiger («modules») dans le navigateur en regroupant toutes vos dépendances.
Ouvrez Src / Lib.js et ajoutez notre tout premier module.
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>Ouvrez Src / Entry.js et nous aurons besoin de notre module et l'utiliserons.
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>Mettez à jour la section Scripts dans package.json
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Exécutez ce script avec NPM Run Browserify
Browserify créera Bundle.js dans la racine du projet et vous devriez voir une sortie 4 plus sortant de la console. Pour en savoir plus sur ce que fait Browserify et comment ce bundle est créé, je recommande de regarder l'introduction à Browserify sur egghead.io
Félicitations! Nous avons maintenant des modules dans le navigateur! ?
Un autre avantage clé de Browserify est qu'il vous donne un accès non seulement aux modules que vous aurez, mais aussi aux modules NPM, installons Lodash pour voir.
<span>var double = function(number) {
</span> <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span> <span>double: double
</span><span>}
</span>modifier src / lib.js
<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>modifier src / entrée.js et appeler notre nouvelle fonction addfive
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>Créez à nouveau le bundle avec NPM Run Browserify et dans le navigateur, vous devriez voir un 4 et un 7 qui montre que nous avons réussi à importer et à utiliser la fonction de somme de Lodash.
Si vous avez suivi jusqu'à présent, vous savez maintenant tout ce dont vous avez besoin pour commencer à utiliser des modules dans le navigateur aujourd'hui, cela apporte de nombreux avantages que nous avons décrits au début.
Nous examinerons le chargement dynamique des modules à l'exécution plus tard.
WebPack est un bundler de module. WebPack prend des modules avec des dépendances et génère des actifs statiques représentant ces modules.
Ajoutons un nouveau script à package.json pour appeler webpack
<span>export default function $() { ... }
</span>Exécutez-le avec NPM Run WebPack
webpack aura réécrit Bundle.js et la sortie du navigateur devrait être exactement la même.
Essayez d'exécuter NPM Run Browserify et NPM Exécuter WebPack et d'examiner les différences dans le fichier bundle.js compilé. Il n'est pas vraiment important de comprendre comment ces outils fonctionnent en interne, la chose importante à noter est que, bien que les implémentations soient différentes, elles font essentiellement la même tâche de compiler le même code avec les modules CommonJS en JavaScript convivial standard. Chaque module est mis à l'intérieur d'une fonction dans Bundle.js et attribué un ID afin qu'il puisse être chargé au besoin.
Il y a beaucoup plus à webpack que cela! C'est vraiment le couteau suisse de l'armée des bundlers du module. WebPack est également livré avec d'excellents outils pour le développement hors de la boîte, des choses comme le remplacement des modules chauds qui rechargera automatiquement les modules individuels dans le navigateur à mesure qu'ils sont modifiés - similaire à LiveLeload mais sans la page de rafraîchissement.
Il existe également une liste croissante de chargeurs pour différents types d'actifs, même CSS avec le chargeur CSS et le style de style - des chargeurs qui peuvent compiler CSS dans le bundle JavaScript et l'injecter dans la page lors de l'exécution. Ceci est en dehors de la portée de cet article, mais il y a plus de choses à ce sujet pour démarrer avec WebPack.
Ce sont trois des transpiles les plus populaires utilisés aujourd'hui, vous voudrez peut-être également en utiliser un autre de la très longue liste des langues qui compilent à js.
Avant de voir comment nous pouvons les utiliser avec nos bundlers de module, examinons comment utiliser les outils directement.
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>modifier le café-lib.coffee
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>Remarque: CoffeeScript utilise la syntaxe CommonJS pour les modules
Ajoutez un script à package.json pour exécuter l'exécutable de café
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Exécutez-le avec NPM Run Coffee
modifier ts-lib.ts
<span>var double = function(number) {
</span> <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span> <span>double: double
</span><span>}
</span>Remarque: TypeScript a sa propre syntaxe pour les modules qui ressemblent à un mélange de syntaxe des modules ES2015 et CommonJS.
Ajoutez un script à package.json pour exécuter l'exécutable TSC
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>Exécutez-le avec NPM Run TSC
Le compilateur se plaindra de ne pas pouvoir trouver Lodash car il nécessite une définition de type pour savoir comment travailler avec des modules externes qui ne sont pas des fichiers de type. Vous pouvez récupérer un fichier de définition avec:
<span>export default function $() { ... }
</span>modifier es6-lib.js
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>Remarque: Babel comprend la belle nouvelle syntaxe du module ES2015.
Babel nécessite un fichier de configuration pour spécifier les préréglages à utiliser
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>Ajoutez un script à package.json pour exécuter le Babel CLI
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Exécutez-le avec NPM Run Babel
Les fichiers dans / dist contiennent désormais le code ES5 au format de module CommonJS qui fonctionnera parfaitement avec Browserify ou WebPack comme nous l'avons utilisé précédemment. Vous pouvez d'abord vous transformer à ES5 avec des communjs, puis un regroupement, ou vous pouvez utiliser d'autres packages pour faire les deux en une seule étape.
Pour Browserify, il y a des plugins cafefy, tsify et babelify pour transpiler et emballer.
Pour WebPack, il y a des chargeurs de chargeurs de café, de chargeur TS et de babel-chargeur pour nécessiter des modules dans différentes langues.
JSPM est un gestionnaire de packages pour le chargeur de module universel SystemJS, construit sur le dessus du chargeur dynamique du module ES6
jspm adopte une approche différente et commence par le module chargeur System.js. System.js est un projet qui suivra la spécification du chargeur au fur et à mesure de son développement.
Installez et initialisez un projet JSPM
<span>var double = function(number) {
</span> <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span> <span>double: double
</span><span>}
</span>Acceptez toutes les valeurs par défaut et assurez-vous que Babel est utilisé comme transpiler, qui configurera System.js pour utiliser Babel lorsqu'il se déroule en modules de style ES6.
Mettre à jour index.html pour charger et configurer System.js
<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>Dans le navigateur, vous verrez quelques demandes en cours et un 404 pour Lodash, c'est parce que JSPM charge les packages du répertoire JSPM_PACKAGES par défaut.
Exécutez JSPM Installez Lodash pour installer Lodash dans ce répertoire et vous devriez voir la sortie attendue dans la console, un 4 et un 7, voici ce qui se passe:
System.js sait également comment travailler directement avec ES6, mettre à jour Entrée.js pour nécessiter dynamiquement notre module ES6 et compiler à la volée.
<span>"scripts": {
</span> <span>"browserify": "browserify ./src/entry.js -o ./bundle.js"
</span><span>},
</span>Vous pouvez également essayer de charger les versions compilées ES5 de nos modules CoffeeScript ou TypeScript en décomisant ces lignes une à la fois. Une autre option consiste à utiliser les plugins System.js pour transpiler le code, plutôt que de nécessiter un code ES5 précompilé.
Ajoutez un script final à package.json pour créer un bundle avec jspm
<span>npm install lodash --save-dev </span>
Exécutez-le avec NPM Run JSPM
Enfin décomancement de la balise de script pour bundle.js dans index.html et le navigateur doit charger un bundle prêt pour la production sans aucune demande HTTP supplémentaire.
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>Notre exemple WebPack plus tôt était l'exemple le plus simple en utilisant les options par défaut, il a compilé Entry.js avec des modules CommonJS en un seul faisceau. Lorsque vous faites des choses plus sophistiquées avec WebPack, vous voudrez créer un fichier de configuration personnalisé pour toute la configuration du chargeur.
Créer webpack.config.js dans la racine du projet
<span>export default function $() { ... }
</span>Mettre à jour index.html pour charger à nouveau le fichier groupé.
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>Installez les chargeurs pour le transplage avec Babel, CoffeeScript et TypeScript
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>Installez WebPack globalement et exécutez sans arguments pour créer le bundle à partir de notre fichier de configuration.
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Maintenant que WebPack sait utiliser ces chargeurs pour ces extensions de fichiers, nous sommes libres d'utiliser ES6, CoffeeScript ou TypeScript de Entry.js, essayez-le par les intrépides de ceux-ci par un par un.
<span>var double = function(number) {
</span> <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span> <span>double: double
</span><span>}
</span>Il y a tellement plus à WebPack que je n'ai couvert ici, mais ces configurations simples sont un excellent point de départ.
Et donc nous terminons notre exploration des modules, ils résolvent beaucoup de problèmes et peuvent vraiment réduire la complexité de nos applications - si l'outillage ne nous gêne pas. Si vous n'utilisez pas déjà de modules, c'est le moment. Pas besoin de passer des heures inutiles à construire des pipelines d'actifs, utilisez plutôt des outils simples qui fonctionnent simplement ™.
WebPack est le mastodonte actuel et vous pourrez le configurer pour faire presque n'importe quoi. JSPM est un excellent outil pour tous vos besoins de regroupement et fonctionne avec une variété de formats et a une belle expérience de développeur. Browserify est toujours une option solide, le grand-père des bundlers de modules modernes - son écosystème a grandi pour inclure certaines des fonctionnalités très appréciées de Webpack (telles que la division du paquet et le rechargement chaud). Enfin System.js est parfait pour que vous deviez pouvoir charger des modules supplémentaires à l'exécution.
Vous ne voudrez pas utiliser tous les outils ci-dessus dans un seul projet, mais il est important d'avoir une compréhension de ces trois options populaires, ainsi que de la façon dont vous pouvez utiliser les transpiles lorsque le besoin en est à la nécessité. Si vous souhaitez simplement utiliser des modules, alors Browserify, JSPM ou WebPack avec les options par défaut fera le travail.
Gardez l'outillage simple et la lumière de configuration. Happy Bundling.
Les modules JavaScript sont des unités individuelles de code qui peuvent être importées et utilisées dans d'autres scripts. Ils aident à organiser le code, le rendant plus maintenable et réutilisable. Le regroupement, en revanche, est le processus de combinaison de plusieurs fichiers JavaScript en un seul fichier. Ceci est fait pour réduire le nombre de demandes HTTP, ce qui peut améliorer considérablement les performances d'une application Web. Le transplage est le processus de conversion du code source d'une langue ou d'une version à une autre. Dans le contexte de JavaScript, il se réfère souvent à la conversion de la syntaxe JavaScript plus récente en versions plus anciennes pour compatibilité avec les navigateurs plus anciens.
Le regroupement est important en Javascript pour plusieurs raisons pour des raisons? . Premièrement, il réduit le nombre de demandes HTTP en combinant plusieurs fichiers JavaScript en un. Cela peut améliorer considérablement les performances d'une application Web. Deuxièmement, le regroupement vous permet d'utiliser des modules dans les navigateurs qui ne les soutiennent pas. Enfin, le regroupement peut également inclure un processus appelé minification, ce qui réduit la taille du fichier JavaScript, améliorant davantage les performances.
Un transpiler javascript, comme Babel, joue un rôle crucial pour garantir que le code JavaScript est compatible entre différents navigateurs. Il le fait en convertissant la syntaxe JavaScript plus récente en versions anciennes qui sont prises en charge par la plupart des navigateurs. Cela permet aux développeurs d'utiliser les dernières fonctionnalités de JavaScript sans se soucier des problèmes de compatibilité du navigateur.
Un module JavaScript est un code autonome qui exporte des variables spécifiques ou fonctions que d'autres modules peuvent utiliser. Lorsqu'un module est importé, ses variables ou fonctions exportées deviennent disponibles pour le script d'importation. Cela permet une réutilisation du code et une meilleure organisation de code.
Certains outils de regroupement JavaScript populaires incluent WebPack, Rollup et Parcel. Ces outils non seulement regroupent les fichiers JavaScript, mais offrent également des fonctionnalités telles que la division du code, le chargement paresseux et la manipulation d'autres actifs comme CSS et images.
Le transplage Permet aux développeurs d'écrire JavaScript moderne en utilisant les dernières fonctionnalités et syntaxes, sans se soucier des problèmes de compatibilité. Le transpiler convertit le JavaScript moderne en une version compatible avec la plupart des navigateurs. Cela garantit que le code JavaScript s'exécute de manière cohérente sur différents navigateurs.
Oui, il est possible d'utiliser des modules JavaScript sans regroupement. Cependant, cela pourrait entraîner des problèmes de performances en raison de plusieurs demandes HTTP. De plus, tous les navigateurs ne prennent pas en charge les modules JavaScript, donc le regroupement peut aider à garantir la compatibilité.
Le regroupement est le processus de combinaison de plusieurs fichiers JavaScript en un pour réduire le nombre de demandes HTTP. La minification, en revanche, est le processus de suppression des caractères inutiles (comme les espaces et les commentaires) du fichier JavaScript pour réduire sa taille. Le regroupement et la minification peuvent améliorer les performances d'une application Web.
Le choix d'un outil de regroupement dépend des exigences de votre projet . Les facteurs à considérer incluent la taille de votre projet, les fonctionnalités dont vous avez besoin (comme le fractionnement du code ou la manipulation des autres actifs) et votre préférence personnelle. C'est une bonne idée d'essayer quelques outils différents et de voir lequel fonctionne le mieux pour votre projet.
L'avenir de JavaScript Les modules, le regroupement et le transplage semblent prometteurs. Avec l'évolution continue de JavaScript, nous pouvons nous attendre à des fonctionnalités et une syntaxe plus avancées, qui nécessiteront un transplement pour la compatibilité avec les navigateurs plus anciens. Le regroupement continuera d'être important pour des raisons de performance. Quant aux modules, ils deviennent une partie standard de JavaScript, et nous pouvons nous attendre à un meilleur support pour eux dans les navigateurs.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment retirer de l'argent sur WeChat sans frais de gestion
Comment résoudre l'exception de lecture de fichiers volumineux Java
Solution à l'échec du téléchargement de Win10
Logiciel d'évaluation de serveur
transition css3
Que signifie le masque PS ?
Comment utiliser la fonction de tri
Utilisation du mot-clé Type dans Go
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
