{"id":231624,"date":"2023-01-11T09:26:00","date_gmt":"2023-01-11T06:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231624"},"modified":"2022-12-25T18:54:13","modified_gmt":"2022-12-25T15:54:13","slug":"jak-uzywac-zaczepow-git-do-wykrywania-zmian-w-pliku-blokady-i-wyswietlania-komunikatu","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-uzywac-zaczepow-git-do-wykrywania-zmian-w-pliku-blokady-i-wyswietlania-komunikatu\/","title":{"rendered":"Jak u\u017cywa\u0107 zaczep\u00f3w Git do wykrywania zmian w pliku blokady i wy\u015bwietlania komunikatu?"},"content":{"rendered":"\n<p>Kiedy pracujemy w zespole, od czasu do czasu programista musi doda\u0107 nowy pakiet do brancha, kt\u00f3ry jest nast\u0119pnie scalany w master. Kto\u015b mo\u017ce by\u0107 nie\u015bwiadomy tego i po prostu \u015bci\u0105gnij master i uruchom aplikacj\u0119 tylko po to, aby zawiesi\u0107 si\u0119 z powodu brakuj\u0105cego pakietu. Zobaczmy, jak mo\u017cemy u\u017cy\u0107 zaczep\u00f3w Git do wykrywania zmian w a <code>package.json<\/code>lub a <code>yarn.lock<\/code>i wy\u015bwietli\u0107 komunikat zach\u0119caj\u0105cy u\u017cytkownika do zainstalowania brakuj\u0105cych zale\u017cno\u015bci.<\/p>\n<h2>Czym s\u0105 haki Git?<\/h2>\n<p>Zaczepy Git s\u0105 uruchamiane, gdy wyst\u0105pi jakie\u015b zdarzenie Git, takie jak nowe zatwierdzenie, wypychanie zatwierdze\u0144 do ga\u0142\u0119zi online, \u015bci\u0105ganie zatwierdze\u0144, wyewidencjonowanie ga\u0142\u0119zi lub scalenie ga\u0142\u0119zi. Procesy te ko\u0144cz\u0105 si\u0119 zerem, gdy ko\u0144cz\u0105 si\u0119 poprawnie, lub inn\u0105 warto\u015bci\u0105, gdy ko\u0144cz\u0105 si\u0119 niepoprawnie.<\/p>\n<p>Je\u015bli zaczepiony proces ko\u0144czy si\u0119 na 0, akcja Git jest kontynuowana. W przeciwnym razie akcja Git zostanie zablokowana. Na przyk\u0142ad, je\u015bli skonfigurujesz zaczep Git przed zatwierdzeniem do lintowania kodu, Git uruchomi to, gdy wykonasz <code>git commit<\/code>. Je\u015bli lint si\u0119 nie powiedzie, zatwierdzenie nie przejdzie.<\/p>\n<p>Haki Git s\u0105 czym\u015b zintegrowanym z Git, a ich lista jest bardzo obszerna. Na przyk\u0142ad masz <a href=\"https:\/\/www.git-scm.com\/docs\/githooks#_pre_push\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pre-push<\/a>, <a href=\"https:\/\/www.git-scm.com\/docs\/githooks#_post_commit\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-commit<\/a>, <a href=\"https:\/\/www.git-scm.com\/docs\/githooks#_post_checkout\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post checkout<\/a>, <a href=\"https:\/\/www.git-scm.com\/docs\/githooks#_post_merge\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-merge<\/a> i wiele innych <a href=\"https:\/\/www.git-scm.com\/docs\/githooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">hook\u00f3w Git<\/a>.<\/p>\n<h2>Uruchom haki Git z Husky<\/h2>\n<p>Aby uruchomi\u0107 niekt\u00f3re zadania po uruchomieniu hook\u00f3w Git, mo\u017cemy u\u017cy\u0107 <a href=\"https:\/\/github.com\/typicode\/husky\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pakietu Husky<\/a> dla <a href=\"https:\/\/startfunction.com\/tag\/node-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Node.js<\/a>. Husky pozwala nam okre\u015bli\u0107 w <code>package.json<\/code>pliku, kt\u00f3re skrypty maj\u0105 by\u0107 uruchamiane po uruchomieniu hook\u00f3w Git. Zainstaluj pakiet Husky z NPM:<\/p>\n<pre><code>npm i -D husky<\/code><\/pre>\n<p>lub Prz\u0119dza:<\/p>\n<pre><code>yarn add -D husky<\/code><\/pre>\n<p>Teraz musisz zainicjowa\u0107 Husky dla hak\u00f3w Git. Je\u015bli u\u017cywasz NPM:<\/p>\n<pre><code>npx husky install<\/code><\/pre>\n<p>a je\u015bli u\u017cywasz prz\u0119dzy<\/p>\n<pre><code>yarn husky install<\/code><\/pre>\n<p>i to wszystko, zainstalowa\u0142e\u015b i skonfigurowa\u0142e\u015b Husky do uruchamiania hak\u00f3w Git. W ko\u0144cu nadszed\u0142 czas na zdefiniowanie haka!<\/p>\n<h2>Dodaj zaczep Git po scaleniu, aby sprawdzi\u0107 zmiany w pliku blokady<\/h2>\n<p>Chcemy uruchomi\u0107 jaki\u015b kod, aby ostrzec nas, je\u015bli pliki <code>package-lock.json<\/code>lub <code>yarn.lock<\/code>uleg\u0142y zmianie. Dzieje si\u0119 tak zwykle, gdy \u015bci\u0105gamy <code>master<\/code>i te pliki si\u0119 zmieni\u0142y. Mo\u017cemy skonfigurowa\u0107 podpi\u0119cie do uruchomienia, gdy scalimy ga\u0142\u0105\u017a.<\/p>\n<p>Aby okre\u015bli\u0107 nasze haki Git dla Husky&#8217;ego, definiujemy je w <code>package.json<\/code>pliku. Dodaj to jako klucz najwy\u017cszego poziomu:<\/p>\n<pre><code>\"husky\": {\n    \"hooks\": {\n      \"post-merge\": \".\/githooks\/post-merge-hook.sh\"\n    }\n}<\/code><\/pre>\n<p>Oznacza to, \u017ce po scaleniu ga\u0142\u0119zi uruchomimy ten skrypt. Teraz musimy go stworzy\u0107. Utw\u00f3rz folder, dodaj do niego plik i ustaw go jako wykonywalny:<\/p>\n<pre><code>mkdir githooks &amp;&amp; cd githooks &amp;&amp; touch post-merge-hook.sh &amp;&amp; chmod +x post-merge-hook.sh<\/code><\/pre>\n<p>Je\u015bli nie ustawisz go jako wykonywalnego, napotkasz b\u0142\u0105d \u201eOdmowa dost\u0119pu&quot;, gdy Husky spr\u00f3buje uruchomi\u0107 ten hak Git. Teraz edytuj plik za pomoc\u0105 Vima lub swojego ulubionego edytora i wklej do niego to:<\/p>\n<pre><code>\nchangedFiles=\"$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)\"\n\nrunOnChange() {\n    echo \"$changedFiles\" | grep -q \"$1\" &amp;&amp; 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<p>Spowoduje to wydrukowanie wiadomo\u015bci na fioletowo ze s\u0142owami <code>package-lock.json<\/code>i <code>npm install<\/code>na pomara\u0144czowo. Ten skrypt sprawdza, czy <code>package-lock.json<\/code>zosta\u0142 zaktualizowany i je\u015bli chcesz <code>yarn.lock<\/code>zamiast tego przetestowa\u0107, musisz po prostu zast\u0105pi\u0107 nazw\u0119 pliku.<\/p>\n<h2>Przetestuj sprawdzanie zmiany pliku blokady<\/h2>\n<p>Testowanie tego nie jest zbyt skomplikowane. Zasadniczo wystarczy utworzy\u0107 now\u0105 ga\u0142\u0105\u017a, zainstalowa\u0107 pakiet, aby <code>package-lock.json<\/code>zosta\u0142 zmodyfikowany, zatwierdzi\u0107 go i przej\u015b\u0107 do poprzedniej ga\u0142\u0119zi. Wszystko, co mo\u017cna zrobi\u0107 za pomoc\u0105 tego polecenia:<\/p>\n<pre><code>git checkout -b testbranch &amp;&amp; npm i -D lint-staged &amp;&amp; git add. &amp;&amp; git commit -m \"test\" &amp;&amp; git checkout - <\/code><\/pre>\n<p>Teraz musisz po\u0142\u0105czy\u0107 go z t\u0105 ga\u0142\u0119zi\u0105<\/p>\n<pre><code>git merge testbranch<\/code><\/pre>\n<p>Spowoduje to uruchomienie przechwycenia post-merge i uruchomienie naszego skryptu. Zobaczysz ten komunikat w wierszu polece\u0144, poniewa\u017c <code>package-lock.json<\/code>zosta\u0142 zmodyfikowany podczas scalania:<\/p>\n<h2>Wykrywanie zmiany pliku blokady w VS Code<\/h2>\n<p>To by\u0142 tylko jeden u\u017cytek. Zaczepy Git mog\u0105 by\u0107 u\u017cywane na wiele sposob\u00f3w, na przyk\u0142ad do uruchomienia popularnego pakietu Prettier przed zatwierdzeniem czego\u015b w celu sformatowania kodu.<\/p>\n<p>Istniej\u0105 alternatywy dla tego konkretnego przypadku, sprawdzania, czy <code>package-lock.json<\/code>zosta\u0142 zaktualizowany. Na przyk\u0142ad dla VS Code istnieje sprytny pakiet <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=matteopieroni.refresh-npm-packages\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Od\u015bwie\u017c pakiety NPM<\/a>, kt\u00f3ry poprosi o zaktualizowanie pakiet\u00f3w, je\u015bli wykryje modyfikacj\u0119. B\u0119dzie dzia\u0142a\u0107 niezale\u017cnie od tego, czy masz skonfigurowane zaczepy Git, czy nie. Kolejn\u0105 fajn\u0105 rzecz\u0105 jest to, \u017ce zadzia\u0142a, gdy zmienisz ga\u0142\u0119zie, nawet bez \u0142\u0105czenia jednej z nich w drug\u0105.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157772-61e6c09a98d0e.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157772-61e6c09a98d0e.png\" alt=\"Jak u\u017cywa\u0107 zaczep\u00f3w Git do wykrywania zmian w pliku blokady i wy\u015bwietlania komunikatu?\" ><\/a><\/p>\n<p>Jednak zalet\u0105 tego, co tutaj zaimplementowali\u015bmy, jest to, \u017ce b\u0119dzie dzia\u0142a\u0107 w wierszu polece\u0144 i nie zale\u017cy od konkretnego edytora kodu. Je\u015bli pracujesz na przyk\u0142ad nad projektem open source, mo\u017cesz chcie\u0107 skonfigurowa\u0107 to, co opisano tutaj, aby wszyscy zaanga\u017cowani deweloperzy mieli wsp\u00f3ln\u0105 p\u0142aszczyzn\u0119, niezale\u017cnie od ich konfiguracji.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/startfunction.com\" class=\"external external_icon\">startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dowiedz si\u0119, jak wykrywa\u0107 zmiany w pliku package-lock.json lub yarn.lock i wy\u015bwietla\u0107 komunikat za pomoc\u0105 hak\u00f3w Git i 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":[721,897,773,784,752,836,845],"tags":[1169],"class_list":["post-231624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-kod","category-kontrola-zrodla","category-oprogramowanie-open-source","category-otwarte-zrodlo","category-przewodnik-dla-poczatkujacych","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/231624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=231624"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/231624\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/157773"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=231624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=231624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=231624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}