-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnpm.html
297 lines (287 loc) · 28.3 KB
/
npm.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
<link href="../estilos/style.css" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WFELBG80ZH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WFELBG80ZH');
</script>
<link rel="apple-touch-icon" sizes="180x180" href="./favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon_io/code-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon_io/code-32x32.png">
<title>Rodrigo Juarez 🧑🏻💻</title>
</head>
<body>
<header class="header">
<nav class="header-nav bd-grid">
<div class="header-nav__logo">
<a href="index.html" class="logo">Rodrigo Juarez</a>
</div>
<div class="header-nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="index.html#home" class="nav__link active">Home</a>
</li>
<li class="nav__item">
<a href="index.html#about" class="nav__link">Sobre mi</a>
</li>
<li class="nav__item">
<a href="index.html#skills" class="nav__link">Skills</a>
</li>
<li class="nav__item">
<a href="index.html#portfolio" class="nav__link">Portfolio</a>
</li>
<li class="nav__item">
<a href="index.html#contact" class="nav__link">Contacto</a>
</li>
<li class="nav__item">
<a href="index.html#blog" class="nav__link">Blog</a>
</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<main class="l-main">
<!--===== HOME =====-->
<section class="home">
<h1 class="home__title">Bienvenido a mi blog ! 👋🤓📚</h1>
<div class="home_mini_container">
<div class="home__scroll">
<a href="#uno" class="home__scroll-link"><i class='bx bx-up-arrow-alt' ></i>Scroll down</a>
</div>
<div class="home_mini_text">
<p>Aqui encontraras mucha info sobre programacion, desarrollo Web, y en especial info sobre Javascript y todo su ecosistema. Pero en este caso particular nos centraremos en NPM.</p>
</div>
</div>
</section>
<section class="npm">
<aside class="aside">
<div class="contenedor-temario" id="temario">
<h3 class="titulo">Temario</h3>
<ul class="lista">
<li class="activo"><a href="#uno">Introduccion a Npm</a></li>
<li><a href="#dos">¿Que es NPM?</a></li>
<li><a href="#tres">Instalacion de Node</a></li>
<li><a href="#cuatro">Inicia un proyecto con NPM</a></li>
<li><a href="#quinto">Instalacion de dependencias</a></li>
<li><a href="#sexto">Instalacion de dependencias a nivel global</a></li>
<li><a href="#septimo">Instalacion de dependencias a nivel global</a></li>
<li><a href="#octavo">Actualizar y eliminar paquetes</a></li>
<li><a href="#noveno">Uso de simbolos ^ (carrets) y ~ (virgurilla)</a></li>
<li><a href="#decimo">Seguridad</a></li>
</ul>
</div>
</aside>
<main class="main">
<div id="uno">
<main class="introduccion">
<h2 class="introduccion-title">Introduccion a Npm - Guia basica</h2>
<p class="introduccion-description">En este ultimo tiempo, hemos visto como <a href="https://nodejs.dev/">Node</a> a tomado mucha popularidad en el mundo del desarrollo en el lenguaje Javascript. Lo interesante es que no podemos hablar de Node.Js y pasar por alto NPM. Es por eso que en este articulo hablaremos de el a profundidad. Espero que te sea de mucha utilidad. 😊</p>
</main>
</div>
<div id="dos">
<main class="content">
<h3> NPM - ¿Que es? 🤔</h3>
<p>
NPM es un <strong>gestor de paquetes</strong> 📦, el mas popular que tiene Javascript, donde encontaras una gran cantidad de recursos para poder implentar en tus proyectos.
Tambien vas a poder crear tus propios paquetes y compartilos con toda la comunidad.
En <a href="https://www.npmjs.com">su sitio</a> podras ver a detalle mas informacion sobre los paquetes que podras implementar en tus proyectos. Desde librerias open source hasta grandes proyectos.
NPM (por sus siglas en ingles <strong>N</strong><i>ode</i> <strong>P</strong><i>ackage</i> <strong>M</strong><i>ananger</i>) se encarga de administar todos los paquetes y, algo importante que debemos tener en cuenta, es que para trabajar con NPM, debemos tener instalada la version de Node.</p>
<p>Pero, ¿Como hacemos eso?. Tranquilo/a 😉. Es muy simple, aqui veras una guia de pasos para llevar a cabo.</p>
</main>
</div>
<div id="tres">
<main class="content">
<h3>En Windows, sigue estos pasos: ✍🏻</h3>
<p><strong>1_ Descarga e instalacion de Node:</strong> Para poder empezar a trabajar con NPM, necesuitamos tener instalado Node.js en nuestro computador. Para ello vamos a su <a href="https://nodejs.dev/">sitio oficial</a> y descargamos Node.</p>
<img src="../imagenes/NPM/Install Node Windows.png" alt="Node" loading="lazy">
<p>Una vez descargado Node, pasaremos a la etapa de instalacion. (El famoso Next -> Next 😅). Una vez terminada la instalacion, podemos chequear si tenemos Node en nuestras computadoras si habriamos la consola (Simbolo del sistema) y podemos ejecutar el comando <i>node -v.</i> Si como resultado, vemos el numero de la version de Node.js, lo habras instalado correctamente 🙌🏻.</p>
<img src="../imagenes/NPM/node -v.png" alt="Node" loading="lazy">
<p>Tambien podemos comprobar que tenemos instalado NPM, si ejecutamos el comando <i>npm -v</i> y podemos ver la version del mismo</p>
<img src="../imagenes/NPM/npm -v.png" loading="lazy">
<p>Si queremos asegurarnos de que tenemos la ultima versiom podemos ejecutar el comando <i>npm install -g npm@lastest</i></p>
</main>
</div>
<div id="cuatro">
<main class="content">
<h3>Inicia un proyecto con npm 🙌🏻</h3>
<p>Es de mucha importancia de que cuando vayas a crear un proyecto, lo inicialices con npm. Esto nos va a permitir generar una cierta configuracion con ciertos datos importantes para nuestro entorno, asi como tambien compartirlo con otros desarrolladores y puedan tener una nocion de lo que esta ocurriendo, para eso nos vamos a mover a nuestra terminal, en donde vamos a inicilaizar nuestro primer proyecto con NPM. Como muestra de ejemplo, voy a crear una carpeta con el nombre NPMjs y voy a posicionarme dentro de el con el comando <i>cd "nombrearchivo"</i>. </p>
<img src="../imagenes/NPM/Create folder.png" loading="lazy">
<p>Una vez creada nuesta carpeta del proyecto, ahora si estamos listos para poder inicializar nuestro proyecto con NPM. Pero ¿como? ¡Es muy sencillo! Solo debemos ejecutar el comando <i>npm init.</i> Al ejecutar este comando, nos va a permitira nosotros, crear el archivo <strong>package.json</strong>, con el cual vamos a tener una configuracion establecida, una descripcion del proyecto y cierto valores que necesita.</p>
<p>Al ejecutar el comando tambien nos aparecera una pequeña introduccion, con algunas explicaciones. Y tambein nos permitira ir completando la informacion con los valores que desemos (con algunas sugerencias).</p>
<img src="../imagenes/NPM/npm init.png" alt="NPM init" loading="lazy">
<p>Los valores que vamos a tener que configurar son los siguientes</p>
<ol >
<li>
<p><strong>Nombre del paquete (package.name):</strong> Aqui debemos colocar el nombre de nuestro proyecto</p>
</li>
<li>
<p><strong>Version:</strong> Numero de version de nuestro proyecto. La sugerencia es la version inicial (1.0.0)</p>
</li>
<li>
<p><strong>Descripcion (Description):</strong> En este campo podemos colocar una breve descripcion de nuestro proyecto</p>
</li>
<li>
<p><strong>Punto de entrada (entry point):</strong> Este paso es importante, por que aqui vamos a definir nuestro punto de entrada de nuestro proyecto.</p>
</li>
<li>
<p><strong>Test command:</strong> Aqui nosotros podremos configurar comandos de utilidad para nuestro proyecto.</p>
</li>
<li>
<p><strong>Repositorio de Git (git):</strong> Aqui podemos establecer el nombre de nuestro repositorio de Git</p>
</li>
<li>
<p><strong>Palabras claves (keywords):</strong> Aqui podremos establecer palabras claves que tengan relacion o describan a nuestro proyecto.</p>
</li>
<li>
<p><strong>Autor (Author):</strong> Aqui podremos establecer quien es la persona que esta construyecndo este proyecto inicialmente.</p>
</li>
<li>
<p><strong>Licencia (license):</strong> Aqui podremos configurar la licencia que tendra nuestro proyecto. En este aspecto podremos elegir entre MIT o ISC.</p>
</li>
</ol>
<p>Luego de establecer los valores, tendremos un resumen con todas las configuraciones que hemos establecido. Si luego de darle un vistazo esta todo correcto, podemos terminar la configuracion de nuestro proyecto.</p>
<img src="../imagenes/NPM/config finish.png" loading="lazy">
<p>Luego de terminado todos estos pasos, vamos a poder ver en nuestro proyecto un archivo llamado <strong>package.json</strong></p>
</main>
</div>
<div id="quinto">
<main class="content">
<h3>Instalacion de dependencias ☑📦</h3>
<p>Veamos como podemos instalar paquetes, desde un paquete convencional hasta uno de forma global, o con todas las opciones que tenemos para instalar paquetes dentro de tus proyectos. Quizas no utilices todas cuando este contruyendo un proyecto, pero que entiendas que existen, te van a yudar para obtener contexto de como trabajar con estos proyectos. Siguiendo con nuestro proyecto NPMjs, dentro de el vamos a crear una carpeta, llamada scr. Recordemos que los comandos que nos ofrece la consola para crear una carpeta es <strong>mkdir nombrecapeta</strong> (mkdir, del ingles make directory). En este caso, el comando que utilizaremos es <strong>mkdir scr</strong>. De esta forma creamos la carpeta, pero todavia no estamos en ella, por eso, para esto podemos ejecutar el comando <strong>cd nombrecarpetaamover</strong> (cd, del ingles change directory). En nuestro caso, ejecutamos el comando <strong>cd scr</strong>. Una vez realizado esto, dentro de nuestra carpeta src, podemos crear nuestra carpeta index.js. Para poder crear archivos, podemos utilizar el comando <strong>touch index.js</strong>. Partiendo de esto y de que ya estamos en la raiz del proyecto, aqui es donde nosotros vamos a empezar a instalar las dependencias. Estas dependencias son recursos que vamos a utilizar dentro de nuestro proyectos, partiendo de que hay una gran cantidad de estos recursos.</p>
<img src="../imagenes/NPM/create index.js.png" alt="Create index.js" loading="lazy">
<p>Imaginemos ahora que queremos instalar un paquete en nuestro proyecto que se encarga de manejar las fechas. Este paquete se llama moment. ¿Pero como lo podemos instalar? Es muy simple, lo podemos instalar con el comando <strong>npm init nombreDelPaquete</strong>. Algo interesante que debemos tener en cuenta es que a partir de la version 5 de npm, debiamos instalar la dependencia con el flag --save. Si continuamos con el ejemplo anterior, antes debiamos instalar moment asi : npm install moment --save. Pero luego de la version 5 de NPM, el flag --save se ejecuta por defecto, sea que lo pongamos explicitamente o no. ¿Pero que significa --save? Significa que este paquete que vas a instalar dentro del proyecto es necesario para que se encuentre <strong>en produccion</strong>. Entonces debemos de tener cuidado un paquete que estemos instalando es a produccion y cuando no lo es. De esta forma podemos identificar otro flag, que es <strong>--save-dev</strong>. Este flag nos va a permitir a nosotros establecer que este paquete que vamos a instalar solo es necesario en nuestro entorno local o en el <strong>entorno de desarrollo</strong>. Partiendo de esta diferencia, nosotros vamos a tomar decisiones cuando vamos a estar instalando las dependencias que requiere nuestro proyecto. Por que es muy importante no mandar dependencias a produccion, ni omitir algunas que deban estar en produccion. Partiendo de esto vamos a proceder con la instalacion. </p>
<img src="../imagenes/NPM/npm install moment.png" alt="Moment" loading="lazy">
<p>De esta manera podemos instalar dependencias en nuestro proyecto. Cuando nosotros instalamos una dependencia, nuestro equipo hace una conexion con los servidores de NPM, extrae la informacion que necesita, crea unos archivos necesarios y despues nos da un output con lo que ha sucedido. Ha instalado moment en la version 2.29.1. Y tambien vamos a ver cambios en nuestro archivo. Vamos a poder ver nuestra famosa carpeta de node_modules, y dentro podremos ver la carpeta de moment.</p>
<img src="../imagenes/NPM/node_modules.moment.png" alt="Moment" loading="lazy">
<p>Recordemos que en la carpeta node_modules, se van a instalar los modulos que tu estas agregando a tu proyecto. Esta carpeta es importante para que tu proyecto funcione, pero no debe ser enviada a ningun repositorio, sino que debemos ignorarla. Esto lo podemos hacer creando un archivo con la extencion <strong>.gitignore</strong>. Dentro de esta carpeta, debemos colocar <strong>node_modules/</strong></p>
<img src="../imagenes/NPM/git ignore.png" alt="Git Ignore" loading="lazy">
<p>De esta forma, definimos que la carpeta no debe ser enviada a ningun repositorio, ni a tu proyecto en produccion </p>
<p>Por otro lado, podemos ir al archivo <strong>package.json</strong>, y vamos a poder notar que tenemos instalada la dependencia moment.</p>
<img src="../imagenes/NPM/package-json moment.png" loading="lazy">
<p>Tambien podemos instalar dependencias de desarrollo. Recordemos que aqui debemos usar el flag --save-dev. Esto lo podemos hacer de la siguiente manera:</p>
<img src="../imagenes/NPM/npm install date.png" alt="npm install date" loading="lazy">
<p>De esta manera podremos instalar la dependencia Date-fnd en nuestro proyecto. Algo que es interesante notar es lo que ocurrio en nuestro archivo package.log</p>
<img src="../imagenes/NPM/dev dependencias.png" loading="lazy">
<p>En nuestro package.json, lo que notamos es que se agrego una nueva seccion llamada "devDependencies" con nuestro paquete "date-fns". Y esta es una forma de separar nuestras dependencias, con las dependencias de desarrollo</p>
<p>Tambien tenemos a nuestra dispocion ciertos atajos, o shotcute, que nos permiten tener las mismas fucnionalidades que venimos analizando. Por ejemplo el atajo: <strong>npm i date-fns -D</strong> es la abreviatura de "npm install --save-dev". Otro atajo que nos permite instalar paquetes es el siguiente: <strong>npm i moment -S</strong> que seria el equivalente de "npm install moment --save"</p>
</main>
</div>
<div id="sexto">
<main class="content">
<h3>Instalacion de dependencias a nivel global 📌</h3>
<p>En algun momento te vas a topar con un paquete que debe ejecutarse y funcionar de forma "global". ¿Pero que significa esto? Cuando nosotros trabajamos con un proyecto, podemos instalar el paquete de <i>moment</i>, y moment puede ser utilizado dentro del contexto de mi proyecto. Pero no esta disponible en otros proyectos. Uno de los principales paquetes que utilizamos de forma global se llama nodemon. Nodemon nos permite generar que este a la "escucha" algun cambio o valor, y va a mentener nuestro proceso a algun comando que estemos ejecutando con Node. Entonces este paquete es requerido de forma global y de esta forma, nosotros debemos de instalarlo con un flag, y en este caso vamos a hacer el ejercicio, y en nuesta terminal vamos a instalar un paquete global. Un detalle importante a tener en cuenta es que cuando instalamos de forma global un paquete, lo debemos hacer con <strong>los permisos de administrador</strong> correspondientes. Esto lo instalamos con el comando <strong>npm install -g nodemon</strong>.
</p>
<img src="../imagenes/NPM/npm install -g nodemon .png" loading="lazy">
<p>Si queremos ver si tenemos el paquete dentro de la lista de recursos que estan instalados de forma global en npm, podemos ejecutar el comando <strong>npm list -g --depth 0</strong>.</p>
<img src="../imagenes/NPM/npm list -g --depth 0.png" alt="" loading="lazy">
</main>
</div>
<div id="septimo">
<main class="content">
<h3>Instalacion de dependencias con force ✅</h3>
<p>Continuando con la instalacion de dependencias en nuestro proyecto hay un flag que vamos a utilizar para distingir que esta dependencia no va a ser instalada dentro del proyecto, pero si queremos ver el output que nos retorna. El comando <strong>npm install nombreDelPaquete --dry-run</strong> <i>simula que instala una dependencia</i>, nos da el output de lo que esta sucediendo, que version instalaria y la cantidad de tiempo que demoraria en intalar los paquetes. Esto es muy util cuando estamos dudando entre si instalar o no.</p>
<img src="../imagenes/NPM/npm install react --dry-sun.png" alt="npm install --dry-sun" loading="lazy">
<p>Tambien contamos con el flag <strong>--force</strong> el cual nos va a permitir a nosotros, instalar este paquete <i>forzando esa instalacion</i> a que sea desde el ultimo recurso desde el servidor de npm. Este flag tambien tiene un atajo: <strong>npm install nombreDelPaquete -f</strong>.</p>
<img src="../imagenes/NPM/npm install webpack -f.png" loading="lazy">
</p>
<p>Imaginemos que ahora, queremos instalar una dependencia, pero en este caso, conozco y se que necesito una version especifica. En este caso, nos sera de ayuda ejecutar el comando <strong> npm install nombreDelPaquete@version</strong>.</p>
<img src="../imagenes/NPM/json-server version.png" alt="Json-Server" loading="lazy">
</main>
</div>
<div id="octavo">
<main class="content">
<h3>Actualizar y eliminar paquetes. 🔝❌</h3>
<p>Ahora vamos a revisar como podemos <strong>actualizar</strong> o darnos cuenta de que hay actualizaciones de estos paquetes. El comando que nos permite hacer esto es <strong>npm outdate</strong>.
Al ejecutar este comando aparecera en forma de lista los paquetes que faltan actualizar.
</p>
<img src="../imagenes/NPM/npm outdate.png" alt="Npm outdate">
<p>Tambien hay otro comando que nos va a permitir listar los paquetes que tiene el proyecto <strong>npm list</strong>.</p>
<img src="../imagenes/NPM/npm list.png" alt="NPM List">
<p>Si queremos actualizar todos los paquetes en los que estemos trabajando en nuestro proyecto, podemos ejecutar el comando <strong>npm update</strong>.</p>
<img src="../imagenes/NPM/npm update.png" alt="npm update">
<p>Si queremos actualizar solo un paquete, a la ultima version, podemos utilizar el comando <strong>npm install nombreDelPaquete@latest</strong>.</p>
<img src="../imagenes/NPM/npm install [email protected]" alt="npm install json-server">
<p>Podemos eliminar un paquete de node_modules y del archivo package.json con el comando <strong>npm uninstall nombreDelPaquete</strong>.</p>
<img src="../imagenes/NPM/npm uninstall .png" alt="npm uninstall">
<p>Tambien disponemos del comando <strong>npm uninstall nombreDelPaquete --no-save</strong>. Este comando nos permite <i>desistalar un paquete</i> de node_modules, pero no de nuestro archivo de package</p>
<img src="../imagenes/NPM/npm uninstall --no-save.png" alt="npm uninstall --no-save">
</main>
</div>
<div id="noveno">
<main class="content">
<h3>Uso de simbolos ^ (carrets) y ~ (virgurilla) 🔣</h3>
<p>Antes de hablar sobre este punto en concreto, podemos hablar sobre la forma de manejar versionados</p>
<img src="../imagenes/NPM/versions.png" alt="Versions" loading="lazy">
<p>Nosotros, normalemnte tenemos tres valores. El primero <strong>major</strong>: Siempre va a ser un cambio muy importante.
En segundo lugar, tambien vamos a tener cambios menores o <strong>minor</strong>: Estos son cambios que añaden ciertas funcionalidades, pero que no son un gran paso para decir que es una version nueva. Y en tercer lugar, nos encontramos con los <strong>patch</strong>: Aqui encontramos cambios muy menores como bug fixes o algunos parches. Miremos un package-lock de un proyecto</p>
<img src="../imagenes/NPM/package-lock.png" alt="package-lock" loading="lazy">
<p>Como bien podemos ver en esta ultima imagen, puede que nos encontremos con un archivo package-lock, que contenga simbolos como <strong>(^)</strong> y/o <strong>(~)</strong>. Es por eso que es importante saber lo que representan ambos. En primer lugar, si mantenemos el
<strong>^ (carrets)</strong> dentro de la configuración de nuestro package en un paquete determinado, estamos garantizando su actualizacion que cuando este disponible solo cambios menores o <strong>minor</strong>. Para quedarnos en una sola versión, podemos eliminar el caret.
En segundo lugar, si mantenemos la <strong>~ (virgurilla),</strong> establece que se actualizara nuestra dependencia solamente de los cambios que son parches o bug fixes.</p>
</main>
</div>
<div id="decimo">
<main class="content">
<h3>Seguridad 🚨👮🏻♂️</h3>
<p>La importancia de la seguridad dentro de nuestro proyectos, es parte de nosotros como desarrolladores, ya que debemos esforzarnos por asegurarnos de no introducir ningun software malicioso. Cuando nosotros descargamos un proyecto de npm, debemos de saber que npm incluye una herramienta para que podamos saber que paquete se esta instalando, y si alguno de ellos debiera ser actualizado. Por ejemplo, si instalamos un paquete que puede llegar a tener vulnerabilidades de seguridad, podemos ejecutar el comando <strong>npm audit</strong>. Este comando nos va a permitir auditar o examinar nuestro proyecto, y ver si hay algun cambio que pueda afectar nuestro proyecto. </p>
<img src="../imagenes/NPM/npm audit.png" alt="npm audit" loading="lazy">
<p>Tambien podemos obteneer la informacion de nuestro proyecto auditado, en formato JSON, con el comando <strong>npm audit --json</strong>. Este comando nos genera un documento JSON, donde esta la informacion un poco mas detallada, de los que esta ocurriendo con nuestros paquetes. </p>
<img src="../imagenes/NPM/npm audit --json.png" alt="npm audit --json" loading="lazy">
<p>Hay un comando disponible, que es el comando <strong>npm audit fix</strong>. Este comando nos permite solucionar los errores de vulnerabilidad y seguridad.</p>
<p>Hasta aqui hemos visto algunos conceptos importantes acerca de npm y muchos de los comando que querras saber al utilizar e instalar dependencias. Agradezco mucho el que hayas llegado hasta aqui 😀. Happy Coding ! ❤</p>
</main>
</div>
</main>
</section>
</main>
<!--===== FOOTER =====-->
<footer class="footer section">
<div class="footer__container bd-grid">
<div class="footer__data">
<h2 class="footer__title">RODRIGO JUAREZ</h2>
<p class="footer__text">Espero que hayas disfrutado mi website. Si deseas compartir tu feedback, no dudes en contactarme.</p>
</div>
<div class="footer__data">
<h2 class="footer__title">EXPLORE</h2>
<ul>
<li><a href="index.html#home" class="footer__link">Home</a></li>
<li><a href="index.html#about" class="footer__link">Sobre mi</a></li>
<li><a href="index.html#skills" class="footer__link">Skills</a></li>
<li><a href="index.html#portfolio" class="footer__link">Portfolio</a></li>
<li><a href="index.html#contact" class="footer__link">Contacto</a></li>
<li><a href="index.html#articles" class="footer__link">Articulos</a></li>
</ul>
</div>
<div class="footer__data">
<h2 class="footer__title">FOLLOW</h2>
<a href="https://www.linkedin.com/in/rodrijuarez/" class="about__social-icon"><i class='bx bxl-linkedin' ></i></a>
<a href="https://github.com/RodriJOk" class="about__social-icon"><i class='bx bxl-github' ></i></a>
<a href="https://www.instagram.com/preguntastech" class="about__social-icon"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
</footer>
<script type="text/javascript">
document.querySelectorAll("#temario .lista a").forEach((elemento)=>{
elemento.addEventListener("click", ()=>{
document.querySelector("#temario .activo").classList.remove("activo")
elemento.parentElement.classList.add("activo")
})
})
</script>
</body>
</html>