Utiliser modules ES6 avec Babel js

22 juillet 2018 à 1:04:56

Bonsoir,

j'essaye d'utiliser les modules es6 en passant par babel mais je n'y arrive pas je crois que j'ai une incompréhension au niveau du fonctionnement de node js, j'ai réussi à installer babel correctement et il transpile bien mon code en es5 cependant je n'arrive pas à utiliser les modules j'obtiens un message d'érreur 'require is not defined'. Je crois comprendre que c'est parce que je dois executer mon code sur un server mais comment faire ? la seule fois ou j'ai utilisé la syntaxe des modules es6 c'était avec react et createreactapp donc tout était configuré je fesais 'npm start' il me semble...

SpaceIn

22 juillet 2018 à 10:03:50

Require n'est pas dans le standard javascript. Ce n'est pas du module ES6, mais du commonJS. Il ne doit pas être présent dans un code exécuté par un navigateur.

Tu dois utiliser un module bundler comme webpack (ce qu'utilise create-react-app d'ailleurs) pour résoudre le graphe de dépendance. S'il est correctement configuré, il pourra si tu le désires transpiler ensuite le code généré en ES5.

-
Edité par SpaceIn 22 juillet 2018 à 10:16:25

Julien Merlin

22 juillet 2018 à 12:18:24

Merci pour ta réponse mais y aurait il un moyen pour que babel transpile mes modules es6 en un code qu'on peut lire dans le navigateur? parceque j'avoue que webpack ca à l'air super intéressant mais je vais y passer un moment à tout configurer mais si c'est la seule solution je le ferais. Et je suis un peu perdu face à la multitude des modules javascript ca à l'air d'être un sacré bordel quand même...

Walter O'Brien

23 juillet 2018 à 15:47:59

Bonjour,

Tu peux utiliser Babel Standalone dans le navigateur pour transpiler (mais cela alourdit l'exécution de tes scripts car le parser doit lire tout ton code, et ensuite le navigateur vas lui de même lire le code transpilé et cela ne résoudra pas le problème des import/export), mais pour bundler tu dois passer par un système comme Rollup, Browserify ou Webpack.

Pour Webpack, il y a toute une série YouTube très bien faite qui explique pas à pas comment l'installer, le configurer et l'utiliser. Même si cela te demande un petit moment, je pense que cela ne sera pas du temps gâché car Webpack est de plus en plus utilisé dans les applications Web modernes. La documentation Rollup est aussi très bien faite (si tu n'es pas allergique à l'anglais). Browserify se marie très bien à Gulp (si tu avais l'habitude de l'utiliser).

Finalement, l'idéal serait d'avoir une application qui s'adapte au support ES Module, c'est-à-dire qui réagisse de la même manière, que le navigateur supporte ou non les import/export. Donc il faudrait pouvoir produire un code bundle et un code non-bundle (pour tirer parti de la nouvelle norme et réduire au maximum l'overhead ajouté par les bundlers).

<!doctype html>
<!-- balise html, head & body facultative en HTML5 -->

<!-- convention d'extension .mjs pour différencier les modules des scripts -->
<!-- chargé uniquement lorsque le navigateur comprends la syntaxe import/export -->
<script type='module' src='/index.mjs'></script>

<!-- chargé uniquement lorsque le navigateur ne comprends pas la syntaxe import/export -->
<script src='index.bundle.js' nomodule></script>