{"id":231718,"date":"2023-01-11T09:25:00","date_gmt":"2023-01-11T06:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231718"},"modified":"2022-12-25T18:54:14","modified_gmt":"2022-12-25T15:54:14","slug":"hur-man-anvaender-git-hooks-foer-att-upptaecka-aendringar-i-en-laasfil-och-visa-ett-meddelande","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-anvaender-git-hooks-foer-att-upptaecka-aendringar-i-en-laasfil-och-visa-ett-meddelande\/","title":{"rendered":"Hur man anv\u00e4nder Git hooks f\u00f6r att uppt\u00e4cka \u00e4ndringar i en l\u00e5sfil och visa ett meddelande"},"content":{"rendered":"\n

N\u00e4r vi arbetar i ett samarbetsteam m\u00e5ste en utvecklare d\u00e5 och d\u00e5 l\u00e4gga till ett nytt paket till en filial som sedan sl\u00e5s samman till master. N\u00e5gon kanske \u00e4r omedveten om det och bara dra master och k\u00f6r appen bara f\u00f6r att f\u00e5 den att krascha p\u00e5 grund av det saknade paketet. L\u00e5t oss se hur vi kan anv\u00e4nda Git hooks f\u00f6r att uppt\u00e4cka \u00e4ndringar av a package.json<\/code>eller a yarn.lock<\/code>och visa ett meddelande som uppmanar anv\u00e4ndaren att installera de saknade beroenden.<\/p>\n

Vad \u00e4r Git hooks?<\/h2>\n

Git-hooks avfyras n\u00e4r n\u00e5gon Git-h\u00e4ndelse intr\u00e4ffar s\u00e5som en ny commit, pushing commits till en online-gren, pull commits, checkout en branch eller merge en branch. Dessa processer slutar med 0 n\u00e4r de slutar korrekt eller n\u00e5got annat v\u00e4rde n\u00e4r de slutar felaktigt.<\/p>\n

Om den kopplade processen slutar med 0, forts\u00e4tter Git-\u00e5tg\u00e4rden. Annars blockeras Git-\u00e5tg\u00e4rden. Till exempel, om du konfigurerar en pre-commit Git-hook f\u00f6r att linta din kod, kommer Git att k\u00f6ra detta n\u00e4r du g\u00f6r en git commit<\/code>. Om linten misslyckas, kommer commit inte att g\u00e5 igenom.<\/p>\n

Git hooks \u00e4r n\u00e5got integrerat i Git och listan \u00f6ver krokar \u00e4r mycket omfattande. Till exempel har du pre-push<\/a>, post-commit<\/a>, post-checkout<\/a>, post-merge<\/a> och m\u00e5nga andra Git-hooks<\/a>.<\/p>\n

K\u00f6r Git hooks med Husky<\/h2>\n

F\u00f6r att k\u00f6ra vissa uppgifter n\u00e4r Git-hakarna avfyras kan vi anv\u00e4nda Husky-<\/a> paketet f\u00f6r Node.js.<\/a> Husky till\u00e5ter oss att specificera i en package.json<\/code>fil vilka skript som ska k\u00f6ras n\u00e4r en Git hooks avfyras. Installera Husky-paketet med NPM:<\/p>\n

npm i -D husky<\/code><\/pre>\n
eller garn:<\/p>\n
yarn add -D husky<\/code><\/pre>\n
Nu m\u00e5ste du initiera Husky f\u00f6r Git hooks. Om du anv\u00e4nder NPM:<\/p>\n
npx husky install<\/code><\/pre>\n
och om du anv\u00e4nder Garn<\/p>\n
yarn husky install<\/code><\/pre>\n
och det \u00e4r det, du har nu installerat och konfigurerat Husky f\u00f6r att k\u00f6ra Git hooks. Det \u00e4r \u00e4ntligen dags att definiera en krok!<\/p>\n
L\u00e4gg till en Git-hook f\u00f6r post sammanfogning f\u00f6r att kontrollera \u00e4ndringar av l\u00e5sfilen<\/h2>\n
Vi vill k\u00f6ra lite kod f\u00f6r att varna oss om filen package-lock.json<\/code>eller yarn.lock<\/code>har \u00e4ndrats. Detta h\u00e4nder vanligtvis n\u00e4r vi drar master<\/code>och dessa filer har \u00e4ndrats. Vi kan st\u00e4lla in en krok som ska k\u00f6ras n\u00e4r vi sl\u00e5r ihop en gren.<\/p>\n
F\u00f6r att specificera v\u00e5ra Git hooks till Husky definierar vi dem i package.json<\/code>filen. L\u00e4gg till detta som en nyckel p\u00e5 toppniv\u00e5:<\/p>\n
\"husky\": {\n    \"hooks\": {\n      \"post-merge\": \".\/githooks\/post-merge-hook.sh\"\n    }\n}<\/code><\/pre>\n
Vad det h\u00e4r s\u00e4ger \u00e4r att efter att en gren har slagits samman k\u00f6r vi det h\u00e4r skriptet. Nu m\u00e5ste vi skapa det. Skapa en mapp, l\u00e4gg till en fil i den och st\u00e4ll in den s\u00e5 att den \u00e4r k\u00f6rbar:<\/p>\n
mkdir githooks && cd githooks && touch post-merge-hook.sh && chmod +x post-merge-hook.sh<\/code><\/pre>\n
Om du inte st\u00e4ller in den p\u00e5 att vara k\u00f6rbar kommer du att st\u00f6ta p\u00e5 felet "Permission denied" n\u00e4r Husky f\u00f6rs\u00f6ker k\u00f6ra denna Git-hook. Redigera nu filen med Vim eller din favoritredigerare och klistra in detta i den:<\/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
Detta kommer att skriva ut ett meddelande i lila med orden package-lock.json<\/code>och npm install<\/code>i orange. Detta skript kontrollerar om package-lock.json<\/code>det har uppdaterats och om du vill testa yarn.lock<\/code>ist\u00e4llet m\u00e5ste du helt enkelt byta ut filnamnet.<\/p>\n
Testa l\u00e5sfil\u00e4ndringskontrollen<\/h2>\n
Att testa detta \u00e4r inte alltf\u00f6r komplicerat. Du beh\u00f6ver i princip bara skapa en ny gren, installera n\u00e5got paket s\u00e5 att det package-lock.json<\/code>\u00e4ndras, commit det och byta till den tidigare grenen. Allt som kan g\u00f6ras med detta kommando:<\/p>\n
git checkout -b testbranch && npm i -D lint-staged && git add. && git commit -m \"test\" && git checkout - <\/code><\/pre>\n
Nu m\u00e5ste du sl\u00e5 ihop den med den h\u00e4r grenen<\/p>\n
git merge testbranch<\/code><\/pre>\n
Detta kommer att utl\u00f6sa post-merge-kroken och kommer att k\u00f6ra v\u00e5rt skript. Du kommer d\u00e5 att se detta meddelande p\u00e5 kommandoraden eftersom det package-lock.json<\/code>har \u00e4ndrats under sammanslagningen:<\/p>\n
Uppt\u00e4cker en l\u00e5sfil\u00e4ndring i VS-kod<\/h2>\n
Detta var bara en anv\u00e4ndning. Git hooks kan anv\u00e4ndas p\u00e5 m\u00e5nga s\u00e4tt, till exempel f\u00f6r att k\u00f6ra det popul\u00e4ra paketet Prettier innan du beg\u00e5r n\u00e5got f\u00f6r att formatera din kod.<\/p>\n
Det finns alternativ f\u00f6r just det h\u00e4r fallet, att kontrollera om package-lock.json<\/code>den har uppdaterats. Till exempel f\u00f6r VS Code finns det ett snyggt paket Uppdatera NPM-paket<\/a> som kommer att uppmana dig att uppdatera dina paket om det uppt\u00e4cker en \u00e4ndring. Det kommer att k\u00f6ras oavsett om du har st\u00e4llt in Git-hooks eller inte. En annan trevlig sak \u00e4r att det kommer att fungera n\u00e4r du byter gren, \u00e4ven utan att sl\u00e5 ihop en av dem i den andra.<\/p>\n
\"Hur<\/a><\/p>\n
Men f\u00f6rdelen med det vi har implementerat h\u00e4r \u00e4r att det kommer att k\u00f6ras p\u00e5 kommandoraden och det beror inte p\u00e5 en viss kodredigerare. Om du till exempel arbetar med ett projekt med \u00f6ppen k\u00e4llkod, kanske du vill st\u00e4lla in det som beskrivs h\u00e4r s\u00e5 att det finns en gemensam grund f\u00f6r alla inblandade utvecklare oavsett deras inst\u00e4llning.<\/p>\n
Inspelningsk\u00e4lla:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
L\u00e4r dig hur du uppt\u00e4cker \u00e4ndringar i en package-lock.json eller en yarn.lock-fil och visar ett meddelande med Git hooks och 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":[838,848,776,901,755,787,724],"tags":[1173],"class_list":["post-231718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide-foer-nyboerjare","category-handledningar","category-kaellkontroll","category-koda","category-oeppen-kaella","category-programvara-med-oeppen-kaellkod","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/231718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=231718"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/231718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/157773"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=231718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=231718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=231718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}