{"id":231904,"date":"2023-01-11T09:21:00","date_gmt":"2023-01-11T06:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231904"},"modified":"2022-11-10T05:39:34","modified_gmt":"2022-11-10T02:39:34","slug":"como-usar-ganchos-de-git-para-detectar-cambios-en-un-archivo-de-bloqueo-y-mostrar-un-mensaje","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-usar-ganchos-de-git-para-detectar-cambios-en-un-archivo-de-bloqueo-y-mostrar-un-mensaje\/","title":{"rendered":"C\u00f3mo usar ganchos de Git para detectar cambios en un archivo de bloqueo y mostrar un mensaje"},"content":{"rendered":"\n<p>Cuando trabajamos en un equipo colaborativo, de vez en cuando un desarrollador tiene que agregar un nuevo paquete a una rama que luego se fusiona con el maestro. Es posible que alguien no lo sepa y simplemente extraiga el maestro y ejecute la aplicaci\u00f3n solo para que se bloquee debido al paquete faltante. Veamos c\u00f3mo podemos usar ganchos de Git para detectar cambios en a <code>package.json<\/code>o a <code>yarn.lock<\/code>y mostrar un mensaje que le pide al usuario que instale las dependencias que faltan.<\/p>\n<h2>\u00bfQu\u00e9 son los ganchos de Git?<\/h2>\n<p>Los ganchos de Git se activan cuando ocurre alg\u00fan evento de Git, como una nueva confirmaci\u00f3n, enviar confirmaciones a una rama en l\u00ednea, extraer confirmaciones, verificar una rama o fusionar una rama. Estos procesos terminan en 0 cuando terminan correctamente o alg\u00fan otro valor cuando terminan incorrectamente.<\/p>\n<p>Si el proceso enganchado termina en 0, la acci\u00f3n de Git contin\u00faa. De lo contrario, la acci\u00f3n de Git se bloquea. Por ejemplo, si configura un gancho de Git de confirmaci\u00f3n previa para aplicar pelusa a su c\u00f3digo, Git lo ejecutar\u00e1 cuando haga un <code>git commit<\/code>. Si la pelusa falla, la confirmaci\u00f3n no se llevar\u00e1 a cabo.<\/p>\n<p>Los ganchos de Git son algo integrado en Git y la lista de ganchos es muy extensa. Por ejemplo, tiene <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> y muchos otros <a href=\"https:\/\/www.git-scm.com\/docs\/githooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ganchos de Git<\/a>.<\/p>\n<h2>Ejecute ganchos de Git con Husky<\/h2>\n<p>Para ejecutar algunas tareas cuando se disparan los ganchos de Git, podemos usar el <a href=\"https:\/\/github.com\/typicode\/husky\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">paquete Husky<\/a> para <a href=\"https:\/\/startfunction.com\/tag\/node-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Node.js.<\/a> Husky nos permite especificar en un <code>package.json<\/code>archivo qu\u00e9 scripts se ejecutar\u00e1n cuando se active un gancho de Git. Instale el paquete Husky con NPM:<\/p>\n<pre><code>npm i -D husky<\/code><\/pre>\n<p>o hilo:<\/p>\n<pre><code>yarn add -D husky<\/code><\/pre>\n<p>Ahora necesita inicializar Husky para ganchos de Git. Si usa NPM:<\/p>\n<pre><code>npx husky install<\/code><\/pre>\n<p>y si usas hilo<\/p>\n<pre><code>yarn husky install<\/code><\/pre>\n<p>y eso es todo, ahora ha instalado y configurado Husky para ejecutar ganchos de Git. \u00a1Finalmente es hora de definir un gancho!<\/p>\n<h2>Agregue un enlace Git posterior a la combinaci\u00f3n para verificar los cambios en el archivo de bloqueo<\/h2>\n<p>Queremos ejecutar alg\u00fan c\u00f3digo que nos avise si los archivos <code>package-lock.json<\/code>o <code>yarn.lock<\/code>han cambiado. Esto sucede generalmente cuando extraemos <code>master<\/code>y estos archivos han cambiado. Podemos configurar un enlace para que se ejecute cuando fusionamos una rama.<\/p>\n<p>Para especificar nuestros enlaces Git a Husky, los definimos en el <code>package.json<\/code>archivo. Agregue esto como una clave de nivel superior:<\/p>\n<pre><code>\"husky\": {\n    \"hooks\": {\n      \"post-merge\": \".\/githooks\/post-merge-hook.sh\"\n    }\n}<\/code><\/pre>\n<p>Lo que esto dice es que despu\u00e9s de fusionar una rama, ejecutaremos este script. Ahora tenemos que crearlo. Cree una carpeta, agr\u00e9guele un archivo y config\u00farelo para que sea ejecutable:<\/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>Si no lo configura para que sea ejecutable, se encontrar\u00e1 con un error &quot;Permiso denegado&quot; cuando Husky intente ejecutar este gancho de Git. Ahora edite el archivo con Vim o su editor favorito y pegue esto en \u00e9l:<\/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>Esto imprimir\u00e1 un mensaje en morado con las palabras <code>package-lock.json<\/code>y <code>npm install<\/code>en naranja. Este script verifica si <code>package-lock.json<\/code>se actualiz\u00f3 y, si desea probarlo <code>yarn.lock<\/code>, simplemente tendr\u00e1 que reemplazar el nombre del archivo.<\/p>\n<h2>Pruebe la verificaci\u00f3n de cambio de archivo de bloqueo<\/h2>\n<p>Probar esto no es demasiado complejo. B\u00e1sicamente, solo necesita crear una nueva rama, instalar alg\u00fan paquete para que <code>package-lock.json<\/code>se modifique, confirmarlo y cambiar a la rama anterior. Todo eso se puede hacer con este comando:<\/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>Ahora necesitas fusionarlo en esta rama.<\/p>\n<pre><code>git merge testbranch<\/code><\/pre>\n<p>Esto activar\u00e1 el gancho posterior a la combinaci\u00f3n y ejecutar\u00e1 nuestro script. Luego ver\u00e1 este mensaje en la l\u00ednea de comando porque <code>package-lock.json<\/code>se modific\u00f3 durante la fusi\u00f3n:<\/p>\n<h2>Detectar un cambio de archivo de bloqueo en VS Code<\/h2>\n<p>Este fue solo un uso. Los ganchos Git se pueden usar de muchas maneras, por ejemplo, para ejecutar el popular paquete Prettier antes de confirmar algo para formatear su c\u00f3digo.<\/p>\n<p>Hay alternativas para este caso en particular, de verificar si <code>package-lock.json<\/code>se actualiz\u00f3. Por ejemplo, para VS Code hay un paquete ingenioso <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=matteopieroni.refresh-npm-packages\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Refresh NPM Packages<\/a> que le pedir\u00e1 que actualice sus paquetes si detecta una modificaci\u00f3n. Se ejecutar\u00e1 independientemente de si ha configurado ganchos de Git o no. Otra cosa buena es que funcionar\u00e1 cuando cambies de rama, incluso sin fusionar una de ellas con la otra.<\/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=\"C\u00f3mo usar ganchos de Git para detectar cambios en un archivo de bloqueo y mostrar un mensaje\" ><\/a><\/p>\n<p>Sin embargo, la ventaja de lo que hemos implementado aqu\u00ed es que se ejecutar\u00e1 en la l\u00ednea de comandos y no depende de un editor de c\u00f3digo en particular. Si est\u00e1 trabajando, por ejemplo, en un proyecto de c\u00f3digo abierto, es posible que desee configurar lo que se describe aqu\u00ed para que haya un terreno com\u00fan para todos los desarrolladores involucrados, independientemente de su configuraci\u00f3n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/startfunction.com\" class=\"external external_icon\">startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a detectar cambios en un archivo package-lock.json o yarn.lock y muestre un mensaje usando Git hooks y 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":[892,716,747,768,831,779,840],"tags":[1172],"class_list":["post-231904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-fuente-abierta","category-fuente-de-control","category-guia-para-principiantes","category-software-de-codigo-abierto","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=231904"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/157773"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=231904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=231904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=231904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}