Différences

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

--- issue120:c_c [2017/04/29 12:48] – créée auntiee
+++ issue120:c_c [2017/05/12 15:25] (Version actuelle) – andre_domenech
@@ Ligne 1: / Ligne 1: @@
+===== 1 =====
+**
 As should be common knowledge amongst my regular readers, I spend a lot of my professional time acting as a web developer. Naturally, this means I have to stay apprised of updates and new tools. One of these updates that I’ve been neglecting is updating my webpack from 1.4 to 2.3.2. As such, this month I will cover how I updated to webpack 2.3.2, while still allowing older projects to work with older versions.
@@ Ligne 8: / Ligne 10: @@
 For a long while, I would just npm install -g webpack, so I could run it from my path. Naturally, that meant I had to use the same version for every project, and if I’m planning on updating projects one by one, I couldn’t just jump versions globally. Instead, I removed the globally installed webpack file, and am instead adding webpack to each project’s package.json file.
+**
+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 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 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.
+**
 Running webpack
@@ Ligne 22: / Ligne 36: @@
 Keep in mind that webpack 2 has changed the format, and so the file above won’t work for older versions.
+**
+Lancer webpack
+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, 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.
+Configuration de Webpack
+Vous trouverez ma configuration complète ici: https://pastebin.com/1zv4DJw1
+Attention webpack 2 a changé de format, donc les fichiers ci-dessus ne marcheront pas pour des versions antérieures.
+===== 2 =====
+**
 Explanation
@@ Ligne 32: / Ligne 64: @@
 The keen-eyed among you probably realized that I’ve not yet talked about my postcss configuration, nor my entry JS file. As both of these elements are separate files, I’m covering them separately.
+**
+Explication
+Les lignes var en haut du fichier définissent quelques outils que webpack utilisera. Puis suit la définition du nouveau module.exports, où le fichier principal est défini, tout comme les fichiers de sortie. Les règles qui suivent lancent d'abord les fichiers .css jusqu'à postcss (pour des trucs comme FontAwesome), puis les fichiers .styl pour stylus, postcss, et enfin le chargeur de css. Les deux dernières lignes sont là pour assurer que les fichiers de police sont correctement chargés et disponibles.
+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 !
+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.
+**
 Extra files
@@ Ligne 45: / Ligne 89: @@
 Naturally, I could just import the files from within a single stylus or css file, and have one entry in styles.js. However, this can get confusing if you’re importing files that are importing files, and it can be hard to keep track of which imports you added, and which were present from the beginning. That’s why I load all complete stylesheets in the JS file. In the case of mixins (such as variables or functions), I’ll load those only in the files where they are needed, as they won’t otherwise compile.
 I hope this article was useful for anyone who wants to use NPM and upgrade to webpack 2. If you have any questions or comments, feel free to send me an email at lswest34+fcm@gmail.com.
+**
+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é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.
+require('./reset.css');
+require('./font-awesome.css');
+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.
+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.