Discussion :

[Swarovski]

Bonjour,

J'aimerai résoudre le problème "ReferenceError: require is not defined" lorsqu'on veut utiliser import/export.

J'ai lu qu'il fallait faire intervenir un loader comme RequireJs.

A vrai dire, je voudrai combiner Babel, RequireJs et Gulp. Mais je ne vois pas du tout comment m'y prendre.

J'ai passé une journée à chercher une solution malheureusement, je ne connais pas encore assez bien l'anglais pour comprendre certaines doc qu'on peut trouver sur le net.

Eventuellement, ce package pourrait faire l'affaire : https://www.npmjs.com/package/requirejs-babel-plugin mais il ne prend pas en compte gulp.

Puis je ne comprends pas bien comment l'utiliser. Par exemple, ils disent qu'il faut ajouter les paths à la configuration... mais quelle configuration ? .babelrc ?

Des idées ?

[SylvainPV]

Hello,

Alors tu mélanges beaucoup de choses et il faut bien les comprendre séparément avant de vouloir les combiner

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var module = require("nomModule")

On appelle ça la notation CommonJS, et c'est intégré de base à NodeJS (pour rappel, Babel et Gulp sont tous les deux des outils lancés par NodeJS). Ça résout de manière synchrone les modules via une URL ou un alias de référence pour les modules NPM. Synchrone, ça veut dire que dès la ligne de code suivante le module est chargé et prêt à l'emploi.

MAIS cette notation CommonJS n'existe pas dans les navigateurs côté client, où charger des modules prend du temps (la requête réseau pour charger le fichier, le temps d'exécution, tout ça tout ça). Donc c'est une opération asynchrone, et on parle cette fois de notation AMD (pour Asynchronous Module Definition). Et RequireJS est justement une bibliothèque AMD prévue pour les navigateurs. Voilà un exemple de code RequireJS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
require(['util', 'text'], function(util, text) {    // ici util et text sont chargés et prêts à l'emploi
});

On voit la différence avec le premier code, il faut passer une fonction de callback qui est appelée plus tard, quand les modules sont chargés et prêts.

Pas de bol, RequireJS utilise le même mot-clé require que la notation CommonJS. Mais ce n'est pas du tout la même chose...

Donc si tu as bien tout suivi, Gulp et Babel étant exécutés par Node, les combiner avec du RequireJS n'a pas de sens.

Le plugin Babel que tu as trouvé fait quelque-chose de plus particulier: il convertit la syntaxe import/export des modules ES6 (qui est le nouveau standard qui remplace CommonJS et AMD) en syntaxe AMD compatible avec la lib RequireJS. C'est donc utile pour écrire en ES6 du code prévu pour être exécuté sur les navigateurs, en profitant des avantages de la déclaration asynchrone. C'est assez précis comme besoin donc je voudrais être sûr que c'est bien ça que tu cherches à faire avant d'aller plus loin.

[Swarovski]

Salut Sylvain,

Merci pour ces explications.

En fait au départ, j'utilisais le standard ES6 et le transpilateur Babel, mais quand j'ai voulu utiliser import/export, j'ai eu une erreur concernant "require".

Après quelques recherches je suis tombé sur RequireJS, je me suis renseigné et me suis rendu compte qu'il y avait bien des avantages à l'utiliser (modularité, gestion des dépendances, encapsulation, etc) et je pensais que ça allait résoudre mon problème de "require".

Donc dans mon projet j'aimerai utiliser le standard ES6, Babel, les avantages de RequireJS et Gulp pour gérer tout ça.

[SylvainPV]

En principe si tu utilises import / export tu n'as pas besoin de require.

Ça reste possible d'utiliser RequireJS en parallèle des modules ES6, d'où l'existence de ce plugin, mais l'intérêt est moindre. En fait le seul intérêt que j'y vois est pour le chargement dynamique, c'est-à-dire charger un module différent selon une variable au runtime. Mais tant que tu n'as pas ce besoin particulier, à ta place, je ne m’embêterais pas avec RequireJS et j'utiliserais uniquement les modules ES6 et import / export.

[Swarovski]

Ok merci pour ces précisions. J'y vois plus clair dans mon projet maintenant.

A bientôt !

[Swarovski]

Une dernière chose quand je veux utiliser import ou export, j'ai le message suivant :

ReferenceError: require is not defined

En tapant cette erreur sur google, je comprends qu'il faut utiliser quelque chose comme browserify ... Tu dois sûrement savoir comment arranger ça.

[SylvainPV]

Par défaut Babel remplace la notation import/export en notation CommonJS, utilisable sur Node. Mais si tu cibles les navigateurs, ça ne marche pas comme expliqué dans mes posts précédents.

Babel te laisse choisir la manière dont tu veux convertir ces modules en une autre notation module compatible avec les clients ES5: AMD, CommonJS, UMD, SystemJS etc...
https://babeljs.io/docs/plugins/#modules

Mais ça c'est seulement si tu veux garder des modules après transpilation, c'est-à-dire des fichiers séparés. Alors que généralement, on profite du process de build de Babel pour faire un bundle, tout concaténer ensemble pour réduire le nombre de requêtes à faire par le client. Et Browserify sert à ça, il prend la notation CommonJS et met tout ensemble dans un seul fichier. Ce n'est pas la seule solution qui fait ça (je pense à Rollup, et sûrement d'autres que j'ai oublié), mais bon, c'est simple et ça fait le job.

Browserify et Babel ensemble, ça donne babelify: https://github.com/babel/babelify

Tu as tout compris ? Est-ce que ça colle bien à ce que tu veux faire ?