Construire une bibliothèque avec requirejs

Points clés

• requirejs est un chargeur de module AMD pour les navigateurs qui chargent de manière asynchrone des scripts et des fichiers CSS, gérer les dépendances et créer des structures de code. Il comprend également un outil d'optimisation pour les environnements de production.
• Lors de l'utilisation de requirejs, le code doit être enveloppé dans la définition du module. Les modules peuvent être référencés dans d'autres modules et toutes les dépendances seront chargées avant le chargement du module lui-même.
• Optimiseur requisejs R.JS peut être configuré pour construire tous les modules en un seul fichier. Cette configuration peut également faire du module une bibliothèque globale indépendante, à la fois en tant que module AMD et en tant qu'exportation globale dans le navigateur.
• requirejs peut être utilisé pour créer des bibliothèques et des applications qui les utilisent. Ce processus consiste à définir et à utiliser des modules AMD, à configurer R.JS Optimizer et à configurer les obligations dans le navigateur pour générer du code bien structuré et organisé.

requirejs est un chargeur de module AMD pour les navigateurs qui peuvent charger des scripts et des fichiers CSS de manière asynchrone. Vous n'avez plus besoin de traiter l'ordre des fichiers de script dans un seul fichier (comme index.html). Au lieu de cela, vous enveloppez simplement votre code dans une définition de module, les DIBRS seront responsables de la gestion des dépendances, ce qui rend votre structure de code plus claire et plus organisée. Il dispose également d'un outil d'optimisation qui compresse et connecte des fichiers pour les environnements de production.

Le site officiel fournit une documentation détaillée sur son API et il existe de nombreux exemples de bases de code pour vous aider. Cependant, il a beaucoup de configurations et l'utilisation de requirejs sera délicate au début.

Dans cet article, nous apprendrons à utiliser les besoins de requis en construisant une bibliothèque avec des modules AMD, en l'optimisant et en l'exportant en tant que module autonome à l'aide de l'optimiseur requisejs. Plus tard, nous créerons l'application à l'aide de requirejs et utiliserons notre bibliothèque.

Ce tutoriel suppose que vous avez une certaine compréhension des exigences. Si vous recherchez un guide Get-Start, consultez: Comprenez les exigences pour le chargement efficace du module JavaScript.

Installation requirejs

requirejs peut être installé via Bower:

bower install requirejs --save

ou vous pouvez obtenir le fichier de github.

Il existe également un générateur yeoman basé sur un grognement pour les projets requirejs.

Définir le module AMD

Nous enroulons le code dans define() qui en fera un module AMD.

Fichier: mylib.js

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

c'est tout. Notez que define() accepte un premier paramètre facultatif, le tableau de dépendance, dans ce cas ['jquery']. Il s'agit de la liste de dépendances pour ce module. Tous les modules du tableau seront chargés avant ce module. Lors de l'exécution de ce module, les paramètres sont le module correspondant dans le tableau de dépendance.

Ainsi, dans ce cas, jQuery sera chargé d'abord, puis l'a transmis dans la fonction comme paramètre $, puis nous pouvons l'utiliser en toute sécurité dans le module. Enfin, notre module renvoie une chaîne. La valeur de retour est ce qui est passé au paramètre de fonction lorsque ce module est requis.

Citez d'autres modules

Voyons comment cela fonctionne en définissant le deuxième module et en se référant à notre premier module mylib.js.

Fichier: main.js

bower install requirejs --save

Vous pouvez vous référer à n'importe quel nombre de dépendances dans le tableau de dépendance, et tous les modules seront fournis par des paramètres de fonction dans le même ordre. Dans ce deuxième module, nous faisons référence aux modules jQuery et Mylib et renvoyons simplement un objet expose certaines variables. Les utilisateurs de cette bibliothèque utiliseront cet objet comme bibliothèque.

Configurer Optimiseur requisejs: R.JS

Vous vous demandez peut-être, comment les obligations sachent-elles quel fichier charger en regardant simplement les chaînes dans le tableau de dépendance? Dans notre exemple, nous fournissons JQuery et Mylib en tant que chaînes, requirejs sait où se trouvent ces modules. Mylib est très simple, c'est Mylib.js, omettant .js.

Où est jQuery? C'est à cela que sert la configuration de requirejs. Vous pouvez fournir un large éventail de configurations via la configuration de requirejs. Il existe deux façons de fournir cette configuration, car nous utilisons l'optimiseur requisejs et je vous montrerai la méthode R.JS. R.JS est l'optimiseur requisejs.

Nous fournirons à R.JS une configuration qui optimise tous les modules en un seul fichier. La configuration que nous fournissons permettra à R.JS de créer des modules dans des bibliothèques mondiales indépendantes, à la fois en tant que modules AMD et en tant qu'exportations globales dans le navigateur.

r.js peut être exécuté via la ligne de commande ou comme module de nœud. Il existe également une tâche grogn pour gérer les grognt-requirejs Optimizer.

avec cela étant dit, voyons à quoi ressemble notre configuration:

Fichier: outils / build.js

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

Les fichiers de configuration sont en fait le cœur de requirejs. Une fois que vous comprenez comment ces paramètres fonctionnent, vous pouvez utiliser les obligations comme un professionnel.

Vous pouvez effectuer différentes actions et ajuster les builds de projet à l'aide de fichiers de configuration. Pour en savoir plus sur la configuration et les obligations, nous vous recommandons de vous référer à la documentation et au wiki. Il existe également un exemple de fichier de configuration qui montre comment utiliser le système de construction, alors assurez-vous également de vous y référer.

Enfin, nous avons réellement dirigé l'optimiseur. Comme je l'ai déjà dit, vous pouvez l'exécuter via la ligne de commande ou via le nœud et la tâche grogn. Voir le fichier R.JS ReadMe pour exécuter l'optimiseur dans différents environnements.

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因为这是第一个模块的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

Cela générera le fichier de build dans dist / mylib.js

build.js

Ensuite, voyons ce que ces paramètres signifient réellement.

BUSTERL - Le chemin racine pour tous les modules à rechercher.

chemins - Carte de chemin par rapport au nom du module de la fondon.

Dans notre exemple, "MyLib" mappe à "../main", qui est relatif à la substanier, donc lorsque nous faisons référence "Mylib", il charge le fichier "../lib/../mylib/main. js ». Notez que nous ajoutons la substanier, puis les paramètres des chemins, puis le nom du module suivi du suffixe .js. Là, vous pouvez spécifier comment le module est mappé sur des fichiers tels que jQuery et Mylib.

Inclure - le module que nous voulons inclure dans le processus d'optimisation. Les dépendances requises pour le module incluses sont implicitement incluses. Dans notre exemple, le module principal dépend de Mylib et JQuery, qui sera également inclus, il n'est donc pas nécessaire de l'inclure explicitement. Nous incluons également Amond, qui sera mentionné plus tard.

Exclure - Module que nous voulons exclure du processus d'optimisation. Dans notre cas, nous avons exclu JQuery. L'utilisateur qui construit la bibliothèque fournira une bibliothèque jQuery. Nous verrons cela plus tard.

OUT - Le nom du fichier de sortie optimisé.

WRAP - Enveloppe le package de construction dans le texte de début et de fin spécifié par WRAP. Le fichier de sortie optimisé est le suivant: wrap.Starte le module enveloppé.end contenu dedans. wrap.start et wrap.end sont les noms de fichiers dont le contenu est contenu dans la sortie.

amande

La bibliothèque construite ne contient pas le fichier require.js, mais utilise des amandes. Almond est une petite implémentation API AMD qui remplacera require.js.

Emballez notre bibliothèque

Dans la configuration R.JS, nous enroulons notre bibliothèque à l'aide de fichiers wrap.start et wrap.end. Nous incluons également des amandes dans la bibliothèque, qui rendront notre bibliothèque indépendante, afin qu'elles puissent être utilisées via des variables globales du navigateur ou en tant que module AMD via DIBREJS.

Fichier: wrap.start

bower install requirejs --save

Les modules que nous incluons Main, Mylib et Almond sont situés au milieu de Wrap.Start et Wrap.end.

Fichier: wrap.end

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

Si l'utilisateur utilise le chargeur AMD, le fichier construit demande "jQuery" comme dépendance AMD. Si le consommateur utilise uniquement les variables globales du navigateur, la bibliothèque obtiendra la variable globale $ et l'utilisera pour la dépendance jQuery.

en utilisant la bibliothèque avec requirejs

Notre bibliothèque est terminée, utilisons maintenant réellement en créant une application requisejs.

Fichier: app.js

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因为这是第一个模块的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

Rien de spécial ici, c'est juste un autre module qui fait référence à JQuery et Mylib. Lorsqu'un module est défini avec define, il n'est pas exécuté immédiatement, c'est-à-dire que sa fonction de rappel (passé après un tableau de dépendances) n'est pas exécutée immédiatement. Cela signifie que notre application ne sera pas lancée simplement en définissant ce module. Voyons maintenant comment configurer les obligations et exécuter réellement ce module, notre application.

Configurer les obligations pour le navigateur

Nous configurerons les obligations dans un fichier et exécuterons notre module d'application. Cependant, il existe différentes façons de le faire.

Fichier: Common.js

{
  "baseUrl": "../lib",
  "paths": {
    "mylib": "../main"
  },
  "include": ["../tools/almond", "main"],
  "exclude": ["jquery"],
  "out": "../dist/mylib.js",
  "wrap": {
    "startFile": "wrap.start",
    "endFile": "wrap.end"
  }
}

Les configurations de baseurl et de chemins sont les mêmes qu'auparavant. La valeur de configuration supplémentaire ici est:

SHIM: Configurez les dépendances et les exportations des scripts traditionnels "Browser Global" qui n'utilisent pas define() pour déclarer les dépendances et définir les valeurs du module. Par exemple, la squelette n'est pas un module AMD, mais c'est une variable globale de navigateur qui exporte la colonne vertébrale vers l'espace de noms global que nous avons spécifié dans les exportations. Dans notre exemple, le module s'appuie également sur jQuery et Soulignement, nous le spécifions donc à l'aide de DEP. Le script dans le tableau DEPS est chargé avant de charger la squelette, et après le chargement, la valeur des exportations sera utilisée comme valeur du module.

Veuillez noter que vous pouvez également utiliser R.JS dans ce projet d'application, qui nécessitera une configuration distincte. Mais ne soyez pas confus à ce sujet. Je n'entrerai pas dans les détails sur la façon de le faire, mais cela est similaire à ce que nous avons fait avec la bibliothèque. Voir l'exemple de configuration de construction pour plus d'informations.

Exiger et définir

Nous chargerons le module en utilisant la nécessité et l'exécuterons immédiatement. Parfois, définir et exiger peut confondre celui à utiliser. Définir un module, mais ne l'exécute pas, nécessite de définir un module et l'exécute - c'est-à-dire qu'il charge et exécute un module dépendant avant qu'il ne s'exécute. En règle générale, vous aurez un requis comme module d'entrée principal, qui dépendra d'autres modules définis via Define.

Chargement du script

Habituellement, vous inclurez tous les fichiers de script dans index.html. Maintenant que nous utilisons les obligations, nous devons simplement inclure le requirejs et spécifier notre Data-Main, qui est le point d'entrée de notre application. Il existe de nombreuses façons de définir des options de configuration ou de détacher le module principal utilisé dans index.html. Vous pouvez trouver plus d'informations ici.

bower install requirejs --save

Conclusion

Dans cet article, nous avons construit une bibliothèque et une application qui utilise la bibliothèque à l'aide de requirejs. Nous avons appris à configurer l'optimiseur R.JS et à configurer les besoins de requirejs dans le navigateur. Enfin, nous avons appris à définir et à utiliser des modules AMD à l'aide de requirejs. Cela rend notre code bien structuré et organisé.

Dans la première moitié de ce didacticiel (Optimiseur de configuration), j'ai utilisé cet exemple de référentiel-libglobal, la seconde moitié n'est pas compliquée, vous devriez donc pouvoir le faire vous-même maintenant.

Le site Web officiel de requirejs est la documentation finale, mais assurez-vous de consulter l'exemple de référentiel sur GitHub et les exemples de projets dans ce référentiel qui démontrent l'utilisation de l'application Obligationn.

FAQ (FAQ) sur la construction de bibliothèques avec requirejs

Quel est le but principal des exigences dans le développement JavaScript?

requirejs est un fichier JavaScript et un chargeur de module. Il est optimisé pour l'utilisation du navigateur, mais peut également être utilisé dans d'autres environnements JavaScript. L'objectif principal des exigences est d'encourager l'utilisation de la programmation modulaire en JavaScript. Il aide les développeurs à gérer les dépendances entre les fichiers JavaScript et à modulariser leur code. Cela conduit à une meilleure organisation de code, à la maintenabilité et à la réutilisabilité. Il améliore également la vitesse et la qualité du code.

Comment les obligations gèrent-elles les dépendances de fichiers JavaScript?

requirejs utilise l'API de définition du module asynchrones (AMD) pour gérer les modules JavaScript. Ces modules peuvent être chargés de manière asynchrone, ce qui signifie qu'ils ne empêchent pas d'autres scripts d'exécuter lors du chargement. Lorsque vous définissez un module à l'aide de requirejs, vous spécifiez ses dépendances. Requirejs garantit alors que ces dépendances sont chargées avant le module lui-même.

Comment définir les modules à l'aide de requirejs?

Pour définir un module dans requirejs, vous pouvez utiliser la fonction define(). Cette fonction prend deux paramètres: un tableau de dépendance et une fonction d'usine. Une dépendance est le chemin d'accès au fichier sur lequel le module dépend. Les fonctions d'usine sont l'endroit où vous écrivez du code du module. Cette fonction est appelée une fois toutes les dépendances chargées.

Comment utiliser des modules définis avec les exigences dans votre code?

Pour utiliser un module défini avec DIbleJS, vous pouvez utiliser la fonction require(). Cette fonction accepte deux paramètres: un tableau de dépendance et une fonction de rappel. Les dépendances sont le chemin du module que vous souhaitez utiliser. La fonction de rappel est l'endroit où vous utilisez le module. Cette fonction est appelée une fois que tous les modules sont chargés.

Puis-je utiliser les obligations avec d'autres bibliothèques JavaScript telles que jQuery?

Oui, vous pouvez utiliser les obligations avec d'autres bibliothèques JavaScript telles que jQuery. Requirejs dispose d'une fonction intégrée pour charger des scripts non modulaires traditionnels qui n'utilisent pas define() pour déclarer les dépendances et définir les valeurs du module, appelées "cale". Avec Shim, vous pouvez spécifier les dépendances et les exportations pour les scripts qui n'utilisent pas define() pour déclarer les dépendances et définir les valeurs du module.

Comment optimiser mon code avec requirejs?

requirejs est livré avec un outil d'optimisation appelé R.Js. Cet outil combine et compresse vos fichiers JavaScript et leurs dépendances en un seul fichier. Cela réduit le nombre de demandes HTTP et de taille de fichier, ce qui peut considérablement améliorer le temps de chargement de la page Web.

Quelle est la différence entre Define () et require () dans requirejs?

La fonction

define() est utilisée pour définir un module, tandis que la fonction require() est utilisée pour charger le module. Les deux fonctions acceptent un tableau de dépendances et une fonction en tant que paramètres. Cependant, la fonction transmise à define() est utilisée pour créer des valeurs de module, tandis que la fonction transmise à require() est utilisée pour exécuter le code après le chargement du module.

Puis-je utiliser les obligations JON dans Node.js?

Oui, vous pouvez utiliser les obligations dans Node.js. Cependant, Node.js possède son propre système de modules, vous n'avez donc probablement pas besoin de requirejs. Si vous souhaitez utiliser le même code dans votre navigateur et Node.js, ou si vous préférez l'API AMD, les obligations peuvent être un bon choix.

Comment gérer les erreurs dans requirejs?

requirejs fournit un rappel onError pour gérer les erreurs. Ce rappel est appelé lorsqu'une erreur se produit lors du chargement du module. Vous pouvez utiliser ce rappel pour enregistrer ou récupérer à partir de l'erreur.

Puis-je charger des fichiers CSS à l'aide de requirejs?

Oui, vous pouvez utiliser le plugin requis-CSS pour charger les fichiers CSS à l'aide de requirejs. Ce plugin vous permet de charger et d'attendre les fichiers CSS comme vous le feriez avec les modules JavaScript.

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!