Configuration d'un projet ES6 avec Babel et webpack –

Dans cet article, nous allons étudier la création d'une configuration de build pour gérer le JavaScript moderne (exécuté dans les navigateurs web) en utilisant Babel et webpack . Nous devons nous assurer que notre code JavaScript moderne, en particulier, est compatible avec un plus grand nombre de navigateurs.

JavaScript, comme la plupart des technologies Web, évolue constamment. Dans le bon vieux temps, nous pouvions déposer deux   

Il n'y a rien de compliqué dedans. Les principaux points à noter sont l'élément

où le tableau de nombres va aller, et l'élément juste avant la balise fermante reliant le ./ public / js / bundle Fichier .js . Jusqu'ici, tout va bien.

Un peu plus de JavaScript est nécessaire pour afficher la liste, alors modifions ./ src / js / index.js pour que cela se produise:

 import leftPad from ' ./leftpad ';

ser seros = [6934, 23111, 23114, 1001, 211161];
const partEl = document.getElementById ('partie-liste');
const strList = serNos.reduce (
  (acc, élément) => acc + = `
 $ {leftPad (élément, 8, '0')} 
`, ''
)

partEl.innerHTML = strList;

Maintenant, si vous ouvrez index.html dans votre navigateur, vous devriez voir apparaître une liste ordonnée, comme ceci:

Pour aller plus loin

Comme configuré ci-dessus, notre système de construction est à peu près prêt à fonctionner. Nous pouvons maintenant utiliser webpack pour regrouper nos modules et transférer le code ES6 vers ES5 avec Babel.

Cependant, pour passer notre code ES6, nous devons exécuter npm run build

Ajout d'une "montre"

Pour surmonter la nécessité d'exécuter plusieurs fois npm run build vous pouvez configurer une 'watch' dans vos fichiers et que webpack se recompile automatiquement chaque fois qu'il voit un changement dans l'un des fichiers du dossier ./ src . Pour implémenter cela, modifiez la section scripts du fichier package.json comme ci-dessous:

 "scripts": {
  "watch": "webpack --watch",
  "build": "webpack --config webpack.config.js"
},

Pour vérifier que cela fonctionne, exécutez npm run watch à partir du terminal, et vous verrez qu'il ne retourne plus à l'invite de commande. Revenez maintenant à src / js / index.js et ajoutez une valeur supplémentaire dans le tableau serNos et enregistrez-le. La mienne ressemble maintenant à ceci:

 const serNos = [ 6934, 23111, 23114, 1001, 211161, 'abc'];

Si vous vérifiez maintenant le terminal, vous verrez qu'il est déconnecté et qu'il a réexécuté la tâche de compilation webpack . Et en revenant au navigateur et en rafraîchissant, vous verrez la nouvelle valeur ajoutée à la fin de la liste, ayant été traitée avec leftPad .

Actualiser le navigateur automatiquement

Il serait vraiment bien maintenant si nous pouvions obtenir webpack pour actualiser le navigateur automatiquement chaque fois que nous faisons un changement. Faisons cela en installant un paquet npm supplémentaire appelé webpack-dev-server . N'oubliez pas de Ctrl + c sur la tâche regarder d'abord, bien que!

 npm installer webpack-dev-server --save-dev

Une fois cela fait, ajoutons un nouveau script au fichier package.json pour appeler le nouveau paquet. La section scripts devrait maintenant contenir ceci:

 "scripts": {
  "watch": "webpack --watch",
  "start": "webpack --watch & webpack-dev-server --open-page 'webpack-dev-server'",
  "build": "webpack --config webpack.config.js"
},

Notez l'indicateur - open-page ajouté à la fin du script. Cela dit à webpack-dev-server d'ouvrir une page spécifique dans votre navigateur par défaut en utilisant son mode iframe .

Maintenant lancez npm start et vous devriez voir un nouvel onglet du navigateur est ouvert à http: // localhost: 8080 / webpack-dev-server / avec la liste des pièces affichée. Pour montrer que 'watch' fonctionne, allez dans src / js / index.js et ajoutez une nouvelle valeur à la fin du tableau serNos . Lorsque vous sauvegardez vos changements, vous devriez les voir apparaître presque immédiatement dans le navigateur.

Avec cette commande complète, il ne reste plus que le mode webpack.config.js défini sur ] production . Une fois que cela est défini, webpack minimisera également le code qu'il sort dans ./public/js/ bundle.js . Vous devriez noter que si le mode n'est pas défini, webpack utilisera par défaut la configuration config

Conclusion

Dans cet article, vous avez vu comment définir un système de construction pour JavaScript moderne. Initialement, cela utilisait Babel depuis la ligne de commande pour convertir la syntaxe ES6 en ES5. Vous avez ensuite vu comment utiliser les modules ES6 avec les mots-clés export et import comment intégrer webpack pour effectuer une tâche de groupage et comment ajouter une tâche de surveillance pour automatiser en cours d'exécution webpack chaque fois que des modifications apportées à un fichier source sont détectées. Enfin, vous avez vu comment installer webpack-dev-server pour actualiser automatiquement la page chaque fois qu'une modification est effectuée.

Si vous souhaitez approfondir cette question, je vous suggère de lire le manuel de SitePoint ] approfondir le webpack et le groupage de modules ainsi que rechercher des chargeurs et des plugins supplémentaires qui permettront à webpack de gérer les tâches Sass et de compression des ressources . Regardez aussi le eslint-loader et le plugin pour Prettier aussi

Happy bundling ...

Chris se modèle après Hong Kong Phooey de jour il est un gestionnaire de projet «doué» offrant une infrastructure informatique plutôt terne, mais son identité secrète est révélée quand il devient Chris d'Arabie, personnage d'internet extraordinaire. Il est également très intéressé par HTML, CSS, JavaScript et autres technologies web, en particulier b2evolution sur lequel il gère son blog personnel depuis près de 10 ans.