Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue120:c_c [2017/05/12 07:18] – d52fr
+++ issue120:c_c [2017/05/12 15:25] (Version actuelle) – andre_domenech
@@ Ligne 12: / Ligne 12: @@
 **
-Comme doivent le savoir mes lecteurs assidus, je passe une grande partie de mon temps professionnel comme développeur web. Naturellement, cela signifie que je dois rester au fait des mises à jour et des nouveaux outils. Une de ces mises à jour que j'ai négligée a été celle de mon webpack de la 1.4 vers la 2.3.2. Ainsi ce mois-ci je vais vous parler de comment j'ai fait la mise à jour vers la version 2.3.2 de webpack, tout en permettant aux anciens projets de continuer à marcher avec les vieilles versions.
+Comme doivent le savoir mes lecteurs assidus, je passe une grande partie de mon temps professionnel comme développeur Web. Naturellement, cela signifie que je dois rester au fait des mises à jour et des nouveaux outils. Une de ces mises à jour que j'ai négligée a été celle de mon webpack de la 1.4 vers la 2.3.2. Ainsi, ce mois-ci, je vais vous parler de comment j'ai fait la mise à jour vers la version 2.3.2 de webpack, tout en permettant aux anciens projets de continuer à marcher avec les vieilles versions.
 Les Bases
-La méthode que j'utilise actuellement pour presque tous les projets est d'utiliser webpack, npm, puis les outils nécessaires pour ce projet en particulier (SASS, Stylus, etc.). Chaque projet inclue un postcss à un moment donné, de telle façon que la seule partie de la chaîne que je doit remplacer est celle des préprocesseurs.
+La méthode que j'utilise actuellement pour presque tous les projets est d'utiliser webpack, npm, puis les outils nécessaires pour ce projet en particulier (SASS, Stylus, etc.). Chaque projet inclut un postcss à un moment donné, de telle façon que la seule partie de la chaîne que je dois remplacer est celle des préprocesseurs.
 Problèmes
-Pendant longtemps, je faisait un npm install -g webpack, pour pouvoir le lancer à partir de mon chemin. Naturellement, cela signifiait que je devais utiliser la même version pour l'ensemble des projets, et si je prévoyais de mettre à jour les projets un par un, je ne pouvais pas sauter des versions directement. Au lieu de cela, j'ai retiré l'installation globale du webpack, et j'ai ajouté un webpack dans le fichier package.json de chaque projet.
+Pendant longtemps, je faisais un npm install -g webpack, pour pouvoir le lancer à partir de mon chemin. Naturellement, cela signifiait que je devais utiliser la même version pour l'ensemble des projets, et si je prévoyais de mettre à jour les projets un par un, je ne pouvais pas sauter des versions directement. Au lieu de cela, j'ai retiré l'installation globale du webpack, et j'ai ajouté un webpack dans le fichier package.json de chaque projet.
 **
@@ Ligne 42: / Ligne 42: @@
 Puisque webpack est maintenant relégué dans les répertoires du projet (et non plus dans ma variable $PATH), lancer le webpack tout seul ne marche pas. J'ai alors créé un script dans mon package.json, appelé 'start', qui lance simplement le webpack une fois. Pour certains projets, je dois aussi créer un script appelé 'watch', qui lance webpack --watch.
-Exemple (j'ajoute cela, voir en bas à gauche, après le 'main') :
+Exemple (j'ajoute cela, montré en bas à gauche, après le "main") :
-Des scripts prédéfinis (comme 'start') peuvent être lancés simplement avec npm start. Dans le cas où le nom est personnalisé (comme 'watch') vous devez le lancer par npm run watch.
+Des scripts prédéfinis (comme "start") peuvent être lancés simplement avec npm start. Dans le cas où le nom est personnalisé (comme "watch") vous devez le lancer par npm run watch.
 Configuration de Webpack
@@ Ligne 72: / Ligne 72: @@
 La toute dernière partie du fichier extrait simplement le texte CSS du fichier js de sortie, et sauve le tout dans un fichier .css.
-Mais Attendez !
+Mais attendez !
-Les plus observateurs d'entre-vous ont probablement vu que je n'avais pas encore parlé de ma configuration postcss, ni de mon fichier JS d'entrée. Comme ce sont tous les deux des fichiers séparés, j'en parlerai séparément.
+Les plus observateurs d'entre vous ont probablement vu que je n'avais pas encore parlé de ma configuration postcss, ni de mon fichier JS d'entrée. Comme ce sont tous les deux des fichiers séparés, j'en parlerai séparément.
 **
@@ Ligne 94: / Ligne 94: @@
 Fichiers supplémentaires
-Les nouvelles versions de postcss et postcss-loader permettent d'avoir un fichier externe postcss.config.js contenant les modules que postcss doit utiliser. C'est un fichier très simple dans mon cas, car j'utilise seulement rucksack (pour des demandes de média faciles comme +above(1200px)), et autoprefixer (pour ne pas avoir à préfixer tous mes CSS à la main). Le fichier ressemble à çà :
+Les nouvelles versions de postcss et postcss-loader permettent d'avoir un fichier externe postcss.config.js contenant les modules que postcss doit utiliser. C'est un fichier très simple dans mon cas, car j'utilise seulement rucksack (pour des demandes de médias faciles comme +above(1200px)), et autoprefixer (pour ne pas avoir à préfixer tous mes CSS à la main). Le fichier ressemble à ça :
 Le fichier en entrée de l'ensemble du processus est assez simple (car pour la plupart des projets, je l'utilise seulement pour charger les bons fichiers CSS). Il peut bien sûr devenir plus compliqué si vous écrivez du JS. Ainsi j'appelle le styles.js. Le contenu est en général quelque chose qui ressemble à ce qui est en bas de cette page.
@@ Ligne 102: / Ligne 102: @@
 require('./styles.styl');
-Bien sûr, je pourrais simplement importer les fichiers d'un seul fichier stylus ou css, et avoir une seule ligne dans styles.js. Mais cela peut prêter à confusion si vous importez des fichiers, et ça peut être difficile de garder la trace des imports que vous avez ajoutés, et qui étaient présents dés le début. C'est pourquoi je charge toutes les feuilles de styles complètes dans le fichier JS. Dans le cas de mélanges (comme les variables ou les fonctions), je le charge uniquement dans les fichiers où on en a besoin, sinon ça ne compilera pas.
+Bien sûr, je pourrais simplement importer les fichiers d'un seul fichier stylus ou css, et avoir une seule ligne dans styles.js. Mais cela peut prêter à confusion si vous importez des fichiers, et ça peut être difficile de garder la trace des imports que vous avez ajoutés, et qui étaient présents dès le début. C'est pourquoi je charge toutes les feuilles de styles complètes dans le fichier JS. Dans le cas de mélanges (comme les variables ou les fonctions), je le charge uniquement dans les fichiers où on en a besoin, sinon ça ne compilera pas.
 J'espère que cet article a été utile à ceux qui veulent utiliser NPM et aller vers webpack 2. Si vous avez des questions ou des remarques, n'hésitez pas à m'envoyer un e-mail à lswest34+fcm@gmail.com.