JavaScript modulaire: un guide des débutants de SystemJS & JSPM

Les plats clés

• SystemJS et JSPM sont des outils qui peuvent être utilisés pour surmonter les limites de la modularité JavaScript. SystemJS est un chargeur de module qui peut importer des modules dans n'importe quel format populaire au moment de l'exécution, tandis que JSPM est un gestionnaire de packages construit sur le dessus de SystemJS. Ensemble, ils gèrent les packages et leurs dépendances, permettant une installation et un chargement plus faciles de dépendances.
• Le processus de configuration d'un projet avec JSPM et SystemJS consiste à créer un répertoire, à initialiser un projet NPM et à installer JSPM localement. Une fois configuré, JSPM et SystemJS peuvent être utilisés pour installer et gérer les packages à partir de différentes sources, transpile le code ES6 et gérer les dépendances.
• JSPM sert également de bundler de module, combinant tous les fichiers et bibliothèques dans un seul fichier et convertissant les systèmes de modules utilisés par les fichiers en modules de style SystemJS. Ce processus est bénéfique pour les performances et doit être utilisé dans les applications de production.

Cet article a été revu par des pairs par Adrian Sandu et Mark Brown. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

Au cours des dernières années, le langage de programmation JavaScript a explosé en popularité. Il est devenu le langage incontournable pour développer à la fois des applications Web riches, ainsi que des applications mobiles hybrides. Et comme les projets JavaScript deviennent de plus en plus complexes, les développeurs connaissent de nouvelles exigences de la langue. L'un d'eux est la modularité.

Pour autant que je puisse voir, il y a deux aspects dans lesquels la modularité doit être réalisée:

• modules que nous aurions
• Modules externes installés sous forme de dépendances

ES6 apporte une syntaxe de module standard à JavaScript et une spécification de chargeur. Il s'agit d'un bon pas en avant, mais au moment de la rédaction, il n'y a pas de navigateurs qui peuvent charger nativement les modules ES6. Cela signifie que si vous souhaitez utiliser des modules aujourd'hui, vous devrez utiliser un bundler de module.

Pour un aperçu du paysage actuel, voir: Comprendre les modules JavaScript: regroupement et transpiling

Et de plus, nous n'avons pas de gestionnaire de packages qui nous permet de télécharger un package et de l'inclure dans notre application. Les gestionnaires de packages (comme Bower et NPM) nous aident à télécharger les dépendances frontales sans avoir à visiter un site Web de projets, mais c'est aussi loin que possible.

Dans cet article, nous verrons comment JSPM et SystemJS peuvent être utilisés pour surmonter ces problèmes.

Que sont JSPM et SystemJS?

Le gestionnaire de packages JavaScript (AKA JSPM) est un gestionnaire de packages qui fonctionne en haut du chargeur de module universel SystemJS. Ce n'est pas un gestionnaire de packages entièrement nouveau avec son propre ensemble de règles, il fonctionne plutôt en plus des sources de package existantes. Hors de la boîte, il fonctionne avec GitHub et NPM. Comme la plupart des packages à base de bower sont basés sur GitHub, nous pouvons également installer ces packages à l'aide de JSPM. Il dispose d'un registre qui répertorie la plupart des packages frontaux couramment utilisés pour une installation plus facile. Comme NPM, il peut être utilisé pour différencier les packages en tant que packages de développement et de production pendant l'installation.

SystemJS est un chargeur de module qui peut importer des modules au moment de l'exécution dans l'un des formats populaires utilisés aujourd'hui (CommonJS, UMD, AMD, ES6). Il est construit sur le haut du polyfill de chargeur de module ES6 et est suffisamment intelligent pour détecter le format utilisé et le gérer de manière appropriée. SystemJS peut également transformer le code ES6 (avec Babel ou Traceur) ou d'autres langages tels que TypeScript et CoffeeScript à l'aide des plugins. Vous configurez ces choses dans System.config ({...}) avant d'importer votre module.

JSPM utilise SystemJS pour gérer les packages et leurs dépendances, nous n'avons donc pas besoin de nous soucier de mettre les packages dans le bon ordre pour les charger.

Maintenant que nous savons ce que sont JSPM et SystemJS, voyons comment les utiliser.

Configuration de notre environnement

Si vous ne l'avez pas déjà fait, vous devrez installer Node.js. Un moyen particulièrement facile de le faire consiste à utiliser un gestionnaire de version (comme NVM) et est détaillé dans cette astuce rapide. Une fois que vous êtes opérationnel avec le nœud, vous pouvez installer JSPM globalement en exécutant ce qui suit à partir de la ligne de commande:

<span>npm install -g jspm
</span>

Maintenant, nous pouvons utiliser l'interface de ligne de commande JSPM. Confirons un projet:

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

Cela crée un répertoire nommé New-Project, initialise un projet NPM et installe JSPM localement. C'est la façon recommandée de faire les choses, car elle verrouille la version JSPM pour un projet et garantit que les mises à niveau du JSPM global ne modifieront pas le comportement de votre application.

Un autre avantage de cette approche est que si votre projet est déployé via une version d'intégration continue, vous pouvez configurer le processus de construction pour utiliser le package JSPM local au lieu d'avoir à installer JSPM sur le serveur également.

Vous pouvez utiliser jspm -v pour confirmer la version locale.

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Pour utiliser JSPM dans un projet, exécutez la commande suivante:

jspm init

Vous serez invité à un certain nombre de paramètres, appuyez sur Entrée pour accepter les valeurs par défaut ou tapez une valeur différente pour les modifier. La capture d'écran suivante affiche une instance lorsque la commande est exécutée avec les paramètres par défaut:

Structure et configuration du répertoire

Cela crée un fichier nommé config.js à la racine du projet, ainsi qu'un dossier nommé jspm_packages. Si vous jetez un coup d'œil à l'intérieur du dossier jspm_packages, vous verrez:

• un sous-répertoire github
• un sous-répertoire NPM
• Les fichiers principaux du chargeur du module SystemJS

La raison pour laquelle JSPM crée des répertoires GitHub et NPM est qu'il fait des reportages en plus de ces registres, alias simplement le package NPM ou GitHub demandé. De plus, le répertoire GitHub contient un plugin SystemJS pour charger des fichiers JSON à partir de GitHub et le répertoire NPM contient les packages liés à Babel dont nous aurons besoin pour transformer notre code ES6

Le fichier config.js est principalement pour SystemJS. Si vous l'ouvrez, vous verrez qu'il a des options de configuration définies pour les chemins de main des packages à partir de différentes sources, des options pour Babel et des cartes de noms pour les packages pour faciliter les références. Ce fichier est mis à jour à jour automatiquement lorsqu'un nouveau package est installé à l'aide de JSPM.

La commande met également à jour le fichier package.json et ajoute une section pour JSPM. Les packages Babel installés avec la commande init sont ajoutés à la section DevDependces du projet.

<span>npm install -g jspm
</span>

Tout nouveau package installé à l'aide de la commande jspm avec ou sans l'option - épreuve sera ajouté à la section des dépenses et il devient donc une dépendance de production. L'installation avec l'option --Save-DEV fait de la dépendance une dépendance de temps de développement et l'enregistre dans la section DevDependances.

Enfin, JSPM ajoute une entrée à la section MAP du fichier config.js pour chaque package installé à l'aide de la commande jspm. Le nom mappé peut être utilisé pour charger la bibliothèque dans n'importe quel fichier JavaScript tout au long de votre projet. Toutes les dépendances de package sont également ajoutées à la section MAP. Voici un fragment de la section MAP du fichier config.js qui montre comment les packages de jQuery et JQuery-UI sont mappés et comment la dépendance est définie:

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

Comme point d'intérêt, vous pouvez également générer ces mappages automatiquement lorsque vous installez un module:

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Cela vous permettrait d'écrire ce qui suit ailleurs dans votre application:

jspm init

jspm et systemjs en action

Pour accompagner cet article, j'ai fait un simple échantillon de recherche Wikipedia. Vous pouvez trouver le repo GitHub ici. Il est configuré en utilisant les options par défaut de la commande jspm init et, par conséquent, il utilise Babel comme transpiler ES6. Il utilise également les bibliothèques jQuery et bootstrap qui sont installées à l'aide de JSPM. Comme Bootstrap a besoin de jQuery, JSPM crée un mappage dans le fichier config.js pour charger jQuery avant de charger Bootstrap:

<span>npm install -g jspm
</span>

Comme le nom du repo le suggère, il interroge l'API de recherche Wikipedia et affiche les données reçues dans la vue. Il utilise $ .ajax () de jQuery pour passer un appel à l'API, affiche les résultats sur une page et a un lien pour afficher un extrait de l'article dans une fenêtre contextuelle modale. L'échantillon a trois fichiers JavaScript dans le dossier des scripts:

• search.js: Ce fichier utilise un module de style AMD. Il charge jquery comme dépendance et passe un appel ajax à l'API de recherche Wikipedia. Le module renvoie une fonction que tout autre module consommant peut appeler avec un paramètre.
• résumémodal.js: Ce fichier utilise un module de style ES6. Il charge la bibliothèque JavaScript de Bootstrap. Il exporte ensuite une fonction qui accepte un morceau de HTML échappé et désescupe le texte HTML avant de l'afficher dans une fenêtre contextuelle modale.
• display.js: Ce fichier utilise un module de style CommonJS. Il charge jQuery et les deux fichiers ci-dessus sous forme de dépendances. Il appelle la méthode exposée par Search.js pour obtenir des résultats, puis rend ces données dans une table HTML sur l'interface utilisateur. De plus, il utilise la méthode exposée par SummaryModal.js pour afficher un modal en cliquant sur un bouton de lien sur la table.

Comme déjà mentionné, SystemJS comprend tous les systèmes de modules en JavaScript. Nous pouvons charger les trois fichiers ci-dessus à l'aide de SystemJS.

Pour faire fonctionner ces scripts, nous devons charger System.js et config.js sur la page HTML. Après cela, nous chargerons le fichier Display.js à l'aide du chargeur de module SystemJS. Comme ce fichier fait référence à d'autres fichiers du dépôt et que ces fichiers chargent les bibliothèques nécessaires, nous n'avons pas besoin de charger aucun autre fichier.

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

SystemJS transpile le fichier ES6 à la volée à l'aide de Babel et l'exécute dans le navigateur. Voici une démo (légèrement simplifiée) de ce à quoi cela ressemble:

Cependant, le transport à la volée est mauvais pour les performances et ne doit pas être utilisé dans les applications de production. N'oubliez pas que JSPM est un bundler de module, alors allons-le.

regroupement

Nous pouvons créer un bundle pour l'ensemble de l'application en utilisant la commande suivante:

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Cette commande fait ce qui suit:

• combine tous les fichiers et les bibliothèques dans un seul fichier nommé build.js
• convertit les systèmes de modules utilisés par les fichiers en modules de style SystemJS
• crée un fichier de carte source qui est chargé pendant le débogage

Maintenant, nous devons charger le fichier build.js dans le fichier index.html. Voici l'ensemble mis à jour de références:

jspm init

Veuillez noter que nous n'avons pas supprimé l'instruction d'importation pour charger l'affichage du module.js. Cette instruction ne charge plus de fichier, mais il charge plutôt un module SystemJS qui est déjà disponible dans le fichier build.js.

Vous pouvez suivre les instructions du fichier ReadMe du projet pour l'exécuter. Vous pouvez parcourir le code dans les fichiers individuels dans les outils du développeur et les déboguer.

Conclusion

La combinaison de JSPM et SystemJS fournit une manière unifiée d'installation et de chargement des dépendances. Cet outil facilite non seulement la gestion des dépendances, mais ouvre également la porte pour utiliser le futur système de modules sur les navigateurs d'aujourd'hui. Comme je l'ai démontré, JSPM est facile à installer et à utiliser, deux raisons qui contribuent à sa popularité croissante.

utilisez-vous JSPM dans vos projets? Pourquoi? Pourquoi pas? Faites-moi savoir dans les commentaires ci-dessous.

Questions fréquemment posées (FAQ) sur JavaScript modulaire, SystemJS et JSPM

Quelles sont les principales différences entre SystemJS et WebPack?

SystemJS et WebPack sont tous deux des bundlers de modules, mais ils ont des différences clés. SystemJS est un chargeur de modules dynamique universel qui charge les modules ES6, les SCRI, les commonJS et les scripts globaux dans le navigateur et le NodeJS. C'est plus un chargeur de module qu'un bundler. D'un autre côté, WebPack est un bundler de module statique pour les applications JavaScript modernes. Il construit un graphique de dépendance qui comprend chaque module dont votre application a besoin et les emballe en un ou plusieurs faisceaux.

Comment puis-je installer SystemJS?

SystemJS peut être installé via NPM. Vous pouvez utiliser la commande suivante pour l'installer: NPM Installer SystemJS. Après l'installation, vous pouvez l'importer dans votre projet en utilisant l'importation {System} à partir de 'SystemJs'.

Quel est le rôle de JSPM dans JavaScript modulaire?

JSPM (gestionnaire de package JavaScript) est un Gestionnaire de packages pour SystemJS. Il simplifie le processus d'installation et de gestion des packages. Il fournit également un moyen unifié d'installer des packages à partir de NPM, GitHub et d'autres sources. JSPM peut également gérer la transpilation, vous permettant d'écrire du code dans ES6 ou TypeScript et de le faire passer automatiquement à ES5.

Comment puis-je utiliser SystemJS pour charger des modules?

Pour charger des modules à l'aide de SystemJS, Vous pouvez utiliser la méthode System.IMPORT (). Cette méthode renvoie une promesse qui se résout au module. Voici un exemple: System.IMPORT ('path / to / module.js'). Puis (fonction (module) {/ * Utiliser le module * /}).

Puis-je utiliser SystemJS avec node.js?

Oui, SystemJS peut être utilisé avec Node.js. Il fournit un chargeur de module universel qui fonctionne à la fois dans le navigateur et Node.js. Cela vous permet d'écrire du code qui peut être partagé entre le client et le serveur.

Comment SystemJS gère-t-il les dépendances?

SystemJS gère les dépendances via sa configuration. Vous pouvez spécifier les chemins et dépendances de vos modules dans la configuration SystemJS. Lorsqu'un module est chargé, SystemJS chargera automatiquement ses dépendances également.

Quels sont les avantages de l'utilisation de JavaScript modulaire?

Le JavaScript modulaire offre plusieurs avantages. Cela rend votre code plus organisé et plus facile à gérer. Il vous permet de réutiliser le code sur différentes parties de votre application. Il facilite également le test de votre code, car chaque module peut être testé indépendamment.

Comment puis-je configurer SystemJS?

SystemJS peut être configuré à l'aide de la méthode System.Config (). Cette méthode accepte un objet qui spécifie les options de configuration. Certaines des options que vous pouvez configurer incluent des chemins, des cartes, des packages et du transpiler.

Puis-je utiliser SystemJS avec d'autres frameworks JavaScript?

Oui, SystemJS peut être utilisé avec d'autres cadres JavaScript tels que des frameworks JavaScript tels que que Angular, React et Vue.js. Il fournit un chargeur de module universel qui peut charger des modules de l'un de ces cadres.

Quel est l'avenir de SystemJS?

SystemJS continue d'être activement maintenu et développé. C'est un élément clé de l'écosystème JavaScript, en particulier pour les projets qui ont besoin d'un chargeur de modules universels. Avec le développement continu des technologies JavaScript et Web, SystemJS devrait continuer à évoluer pour répondre aux besoins des développeurs.

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!