Développeur FullStack & Devops

Notes et mémos techniques

Require.js

logo requirejs 150x150 Qu'est ce que c'est ?

Un outil (bibliothèque) qui nous permet en javascript d'écrire du code "modularisé", de gérer les dépendances entre nos différents modules et de les charger de manières asynchrone.

A quoi ca sert ?

Ça sert à ne plus avoir un paquet de balises

  1. la 1ère chose à faire dans le main.js est de ce script de configurer require , il y a pas mal d'options possible:

    requirejs.config({...

  2. lancer notre application js en spécifiant (c'est tout l’intérêt) ses dépendances ici un seul script fictif nommé foo.js (ne pas mettre de .js encore une fois, requirejs s'attend à charger des scripts .js !) :

    require(['foo'], function(Foo) { // ...notre code utilisant Foo(ses classes, méthodes etc.) });

  3. définir si nécessaire nos "modules", pour cela et pour reprendre la déclaration précédente, nous aurons un fichier foo.js dont le contenu serait du type :

    define( ['unautremoduleoupas'], function (Mod2) { return { // ...du code exploitant notamment Mod2 } });

2 Syntaxes possibles AMD ou CommonJS

Pour définir vos modules il est possible d'utiliser 2 syntaxe, la première étant un peu plus difficile à lire lorsqu'il y a de nombreuses dépendance, mais à vous de choisir :)

define( ['module'], function (Mod) { return { // ...du code exploitant notamment Mod } });

ou alors (et c'est peut être plus lisible):

define(function(require) { var mod = require("./relative/name"); });

Resources

Une présentation technique (format Prezi) que j'ai fait chez le client

debutant
fullstack
javascript
jquery
programmation
tutoriel
require
require.js
programmation
rédigé le 10/01/17 par Behrouze
A proposCheat SheetsOutilsVidéos