mirrors/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2025-02-04 21:12:26 +00:00
Code Issues Projects Releases Wiki Activity
wallabag/docs/fr/developer/front-end.rst
Thomas Citharel 64f81bc316 Adds Webpack support and removes the use for Grunt 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>

use scss

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

fix build, add babel, fix annotations

fixes (and improvements !) for baggy

add live reload & environments & eslint & theme fixes
2017-05-04 14:49:44 +02:00

1.8 KiB
Raw Blame History

Conseils pour développeurs front-end

Depuis la version 2.3, wallabag utilise webpack pour générer ses assets.

Mode développeur

Si le serveur fonctionne en mode dev, vous devez lancer la commande yarn run build:dev pour générer les fichiers de sortie javascript pour chaque thème. Ils sont nommés %theme%.dev.js et sont ignorés par git. Vous devez relancer la commande yarn run build:dev pour chaque changement que vous effectuez dans les fichiers assets (js, css, images, polices,...).

Live reload

Webpack apporte le support pour la fonctionnalité de live reload, ce qui signifie que vous n'avez pas besoin de regénérer manuellement le fichier de sortie javascript ni de rafraichir la page dans votre navigateur. Les changements sont appliqués automatiquement. Vous avez juste besoin de mettre le paramètre use_webpack_dev_server à true dans app/config/config.yml et de lancer yarn run watch pour que cela soit actif.

Note

N'oubliez pas de remettre use_webpack_dev_server à false lorsque vous n'utilisez pas la fonctionnalité de live reload.

Production builds

Lorsque vous committez vos changements, vous devez les compiler dans un environnement de production en exécutant yarn run build:prod. Cela compilera tous les assets nécessaires pour wallabag. Pour tester que cela fonctionne proprement, vous devrez avoir un serveur en mode de production, par exemple avec bin/console server:run -e=prod.

Note

N'oubliez pas de générer des fichiers en mode production avant de committer !

Code style

Le style de code est vérifié par deux outils : stylelint pour le (S)CSS et eslint pour le JS. La configuration ESlint config est basée sur le preset Airbnb base.