{"id":232183,"date":"2023-01-11T09:30:00","date_gmt":"2023-01-11T06:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232183"},"modified":"2022-11-10T07:58:22","modified_gmt":"2022-11-10T04:58:22","slug":"comment-utiliser-les-crochets-git-pour-detecter-les-modifications-apportees-a-un-fichier-de-verrouillage-et-afficher-un-message","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-utiliser-les-crochets-git-pour-detecter-les-modifications-apportees-a-un-fichier-de-verrouillage-et-afficher-un-message\/","title":{"rendered":"Comment utiliser les crochets Git pour d\u00e9tecter les modifications apport\u00e9es \u00e0 un fichier de verrouillage et afficher un message"},"content":{"rendered":"\n

Lorsque nous travaillons en \u00e9quipe collaborative, de temps en temps un d\u00e9veloppeur doit ajouter un nouveau package \u00e0 une branche qui est ensuite fusionn\u00e9e dans master. Quelqu’un peut ne pas en \u00eatre conscient et simplement tirer le ma\u00eetre et ex\u00e9cuter l’application uniquement pour la faire planter en raison du paquet manquant. Voyons comment nous pouvons utiliser les crochets Git pour d\u00e9tecter les modifications apport\u00e9es \u00e0 a package.json<\/code>ou a yarn.lock<\/code>et afficher un message invitant l’utilisateur \u00e0 installer les d\u00e9pendances manquantes.<\/p>\n

Que sont les crochets Git\u00a0?<\/h2>\n

Les crochets Git sont d\u00e9clench\u00e9s lorsqu’un \u00e9v\u00e9nement Git se produit, tel qu’un nouveau commit, l’envoi de commits vers une branche en ligne, l’extraction de commits, l’extraction d’une branche ou la fusion d’une branche. Ces processus se terminent par 0 lorsqu’ils se terminent correctement ou par une autre valeur lorsqu’ils se terminent incorrectement.<\/p>\n

Si le processus accroch\u00e9 se termine par 0, l’action Git se poursuit. Sinon, l’action Git est bloqu\u00e9e. Par exemple, si vous configurez un hook Git pr\u00e9-commit pour pelucher votre code, Git l’ex\u00e9cutera lorsque vous ferez un git commit<\/code>. Si le lint \u00e9choue, le commit ne passera pas.<\/p>\n

Les crochets Git sont int\u00e9gr\u00e9s \u00e0 Git et la liste des crochets est tr\u00e8s longue. Par exemple, vous avez pre-push<\/a>, post-commit<\/a>, post-checkout<\/a>, post-merge<\/a> et de nombreux autres crochets Git<\/a>.<\/p>\n

Ex\u00e9cutez des crochets Git avec Husky<\/h2>\n

Pour ex\u00e9cuter certaines t\u00e2ches lorsque les crochets Git sont d\u00e9clench\u00e9s, nous pouvons utiliser le package Husky<\/a> pour Node.js<\/a>. Husky nous permet de sp\u00e9cifier dans un package.json<\/code>fichier les scripts \u00e0 ex\u00e9cuter lorsqu’un crochet Git est d\u00e9clench\u00e9. Installez le package Husky avec NPM\u00a0:<\/p>\n

npm i -D husky<\/code><\/pre>\n
ou Fil:<\/p>\n
yarn add -D husky<\/code><\/pre>\n
Vous devez maintenant initialiser Husky pour les hooks Git. Si vous utilisez NPM\u00a0:<\/p>\n
npx husky install<\/code><\/pre>\n
et si vous utilisez Yarn<\/p>\n
yarn husky install<\/code><\/pre>\n
et voil\u00e0, vous avez maintenant install\u00e9 et configur\u00e9 Husky pour ex\u00e9cuter les crochets Git. Il est enfin temps de d\u00e9finir un crochet !<\/p>\n
Ajouter un crochet Git post-fusion pour v\u00e9rifier les modifications du fichier de verrouillage<\/h2>\n
Nous voulons ex\u00e9cuter du code pour nous alerter si les fichiers package-lock.json<\/code>ou yarn.lock<\/code>ont chang\u00e9. Cela se produit g\u00e9n\u00e9ralement lorsque nous tirons master<\/code>et que ces fichiers ont chang\u00e9. Nous pouvons configurer un hook \u00e0 ex\u00e9cuter lorsque nous fusionnons une branche.<\/p>\n
Pour sp\u00e9cifier nos crochets Git \u00e0 Husky, nous les d\u00e9finissons dans le package.json<\/code>fichier. Ajoutez ceci en tant que cl\u00e9 de niveau sup\u00e9rieur\u00a0:<\/p>\n
\"husky\": {\n    \"hooks\": {\n      \"post-merge\": \".\/githooks\/post-merge-hook.sh\"\n    }\n}<\/code><\/pre>\n
Ce que cela dit, c’est qu’apr\u00e8s la fusion d’une branche, nous ex\u00e9cuterons ce script. Nous devons maintenant le cr\u00e9er. Cr\u00e9ez un dossier, ajoutez-y un fichier et d\u00e9finissez-le pour qu’il soit ex\u00e9cutable\u00a0:<\/p>\n
mkdir githooks && cd githooks && touch post-merge-hook.sh && chmod +x post-merge-hook.sh<\/code><\/pre>\n
Si vous ne le d\u00e9finissez pas pour qu’il soit ex\u00e9cutable, vous rencontrerez une erreur \u00ab\u00a0Permission refus\u00e9e\u00a0\u00bb lorsque Husky tentera d’ex\u00e9cuter ce crochet Git. Modifiez maintenant le fichier avec Vim ou votre \u00e9diteur pr\u00e9f\u00e9r\u00e9 et collez-y ceci\u00a0:<\/p>\n
\nchangedFiles=\"$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)\"\n\nrunOnChange() {\n    echo \"$changedFiles\" | grep -q \"$1\" && echo -e \"$2\"\n}\n\nrunOnChange package-lock.json \"033[35m*******************************************************************************n* 033[33mpackage-lock.json033[35m has changed. Run033[33m npm install033[35m to update your dependencies. *n*******************************************************************************\"\n\nexit 0\n<\/code><\/pre>\n
Cela imprimera un message en violet avec les mots package-lock.json<\/code>et npm install<\/code>en orange. Ce script v\u00e9rifie si package-lock.json<\/code>a \u00e9t\u00e9 mis \u00e0 jour et si vous souhaitez tester \u00e0 la yarn.lock<\/code>place, vous devrez simplement remplacer le nom du fichier.<\/p>\n
Tester la v\u00e9rification des modifications du fichier de verrouillage<\/h2>\n
Tester ce n’est pas trop complexe. En gros, il vous suffit de cr\u00e9er une nouvelle branche, d’installer un package pour le package-lock.json<\/code>modifier, de le valider et de passer \u00e0 la branche pr\u00e9c\u00e9dente. Tout ce qui peut \u00eatre fait avec cette commande :<\/p>\n
git checkout -b testbranch && npm i -D lint-staged && git add. && git commit -m \"test\" && git checkout - <\/code><\/pre>\n
Maintenant, vous devez le fusionner sur cette branche<\/p>\n
git merge testbranch<\/code><\/pre>\n
Cela d\u00e9clenchera le crochet post-fusion et ex\u00e9cutera notre script. Vous verrez alors ce message dans la ligne de commande car le package-lock.json<\/code>a \u00e9t\u00e9 modifi\u00e9 lors de la fusion\u00a0:<\/p>\n
D\u00e9tection d’un changement de fichier de verrouillage dans VS Code<\/h2>\n
Ce n’\u00e9tait qu’une seule utilisation. Les crochets Git peuvent \u00eatre utilis\u00e9s de plusieurs fa\u00e7ons, par exemple, pour ex\u00e9cuter le package populaire Prettier avant de valider quelque chose pour formater votre code.<\/p>\n
Il existe des alternatives pour ce cas particulier, de v\u00e9rifier si package-lock.json<\/code>a \u00e9t\u00e9 mis \u00e0 jour. Par exemple, pour VS Code, il existe un package astucieux Refresh NPM Packages<\/a> qui vous invitera \u00e0 mettre \u00e0 jour vos packages s’il d\u00e9tecte une modification. Il fonctionnera ind\u00e9pendamment du fait que vous ayez configur\u00e9 ou non des crochets Git. Une autre bonne chose est que cela fonctionnera lorsque vous changerez de branche, m\u00eame sans fusionner l’une dans l’autre.<\/p>\n
\"Comment<\/a><\/p>\n
Cependant, l’avantage de ce que nous avons impl\u00e9ment\u00e9 ici est qu’il s’ex\u00e9cutera en ligne de commande et ne d\u00e9pendra pas d’un \u00e9diteur de code particulier. Si vous travaillez par exemple sur un projet open source, vous souhaiterez peut-\u00eatre configurer ce qui est d\u00e9crit ici afin qu’il existe un terrain d’entente pour tous les d\u00e9veloppeurs impliqu\u00e9s, quelle que soit leur configuration.<\/p>\n
Source d’enregistrement:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Apprenez \u00e0 d\u00e9tecter les modifications apport\u00e9es \u00e0 un package-lock.json ou \u00e0 un fichier yarn.lock et \u00e0 afficher un message \u00e0 l’aide des crochets Git et Husky<\/p>\n","protected":false},"author":1,"featured_media":157773,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,769,717,832,780,748,841],"tags":[1167],"class_list":["post-232183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-controle-des-sources","category-developpeur","category-guide-pour-les-debutants","category-logiciels-open-source","category-open-source-projektmanagement-2","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=232183"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/157773"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=232183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=232183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=232183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}