Uso de npm para gestionar dependencias y scripts de un proyecto

Una de las herramientas cruciales en cualquier desarrollador, principalmente frontend, es NodeJS, después de su descarga, eligiendo el sistema operativo, y su posterior instalación. En este momento ya deberemos tener disponible el comando npm. En esta entrada veremos cómo utilizar de manera cómoda npm para gestionar las dependencias y los scripts del proyecto.

Lo primero que debemos hacer es abrir una terminal para poder empezar a ejecutar comandos.

Después podremos empezar a escribir los comandos.

Recordad siempre tener actualizado npm.


pepesan@sauron:/home/pepesan$ sudo npm i -g npm

Nota: El sudo es la manera de ejecutar con permisos root, en Linux y MacOSX, tal como explicamos en su momento.

Empezaremos por crear una carpeta para un proyecto:


pepesan@sauron:/home/pepesan$ mkdir miproyecto
pepesan@sauron:/home/pepesan$ cd miproyecto

Después empezamos a crear la estructura del proyecto ejecutando:


pepesan@sauron:/home/pepesan/miproyecto$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (proyecto)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/pepesan/proyecto/package.json:

{
«name»: «proyecto»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»
}

Is this OK? (yes) yes

Como podemos ver nos preguntará los datos de nuestro proyecto, esto se reflejará en el fichero package.json:

pepesan@sauron:/home/pepesan/miproyecto$ cat package.json

{
«name»: «proyecto»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»
}

En este fichero es donde se configurarán todos los detalles del proyecto, incluidas las dependencias y los scripts a ejecutar.

PAra instalar dependencias en el proyecto deberemos ejecutar:

pepesan@sauron:/home/pepesan/miproyecto$ npm install –save nombre_paquete

Por ejemplo, Jquery:

pepesan@sauron:/home/pepesan/miproyecto$ npm install –save jquery

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN proyecto@1.0.0 No description
npm WARN proyecto@1.0.0 No repository field.

+ jquery@3.4.1
added 1 package from 1 contributor and audited 1 package in 1.15s
found 0 vulnerabilities

De esta manera se descargará la dependencia de jquery en el directorio node_modules y podremos utilizarla en el proyecto

pepesan@sauron:/home/pepesan/miproyecto$  ls -la node_modules/
total 12
drwxr-xr-x 3 pepesan pepesan 4096 nov 2 03:53 .
drwxr-xr-x 3 pepesan pepesan 4096 nov 2 03:53 ..
drwxr-xr-x 5 pepesan pepesan 4096 nov 2 03:53 jquery
pepesan@sauron:/home/pepesan/miproyecto$ ls -la node_modules/jquery/
total 48
drwxr-xr-x 5 pepesan pepesan 4096 nov 2 03:53 .
drwxr-xr-x 3 pepesan pepesan 4096 nov 2 03:53 ..
-rw-r–r– 1 pepesan pepesan 11945 oct 26 1985 AUTHORS.txt
-rw-r–r– 1 pepesan pepesan 190 oct 26 1985 bower.json
drwxr-xr-x 2 pepesan pepesan 4096 nov 2 03:53 dist
drwxr-xr-x 3 pepesan pepesan 4096 nov 2 03:53 external
-rw-r–r– 1 pepesan pepesan 1095 oct 26 1985 LICENSE.txt
-rw-r–r– 1 pepesan pepesan 3598 nov 2 03:53 package.json
-rw-r–r– 1 pepesan pepesan 2054 oct 26 1985 README.md
drwxr-xr-x 15 pepesan pepesan 4096 nov 2 03:53 src
pepesan@sauron:/home/pepesan/miproyecto$ ls -la node_modules/jquery/dist/
total 924
drwxr-xr-x 2 pepesan pepesan 4096 nov 2 03:53 .
drwxr-xr-x 5 pepesan pepesan 4096 nov 2 03:53 ..
-rw-r–r– 1 pepesan pepesan 9165 oct 26 1985 core.js
-rw-r–r– 1 pepesan pepesan 280364 oct 26 1985 jquery.js
-rw-r–r– 1 pepesan pepesan 88145 oct 26 1985 jquery.min.js
-rw-r–r– 1 pepesan pepesan 136397 oct 26 1985 jquery.min.map
-rw-r–r– 1 pepesan pepesan 227022 oct 26 1985 jquery.slim.js
-rw-r–r– 1 pepesan pepesan 71037 oct 26 1985 jquery.slim.min.js
-rw-r–r– 1 pepesan pepesan 108757 oct 26 1985 jquery.slim.min.map

De esta manera disponemos de todo lo necesario para jugar con jquery, además el fichero package.json habrá reflejado esta dependencia:

pepesan@sauron:/home/pepesan/miproyecto$ cat package.json

{
«name»: «proyecto»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»,
«dependencies»: {
«jquery»: «^3.4.1»
}
}

Para quitar una dependencia bastará con ejecutar el comando:

pepesan@sauron:/home/pepesan/miproyecto$ npm uninstall –save jquery

npm WARN proyecto@1.0.0 No description
npm WARN proyecto@1.0.0 No repository field.

removed 1 package in 1.018s
found 0 vulnerabilities

Este comando también quitará la dependencia del package.json

Por otra parte si instalamos una dependencia más complicada, también descargará todas las bibliotecas de las que dependa

pepesan@sauron:/home/pepesan/miproyecto$ npm install –save-dev nodemon

> nodemon@1.19.4 postinstall /home/pepesan/proyecto/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate

npm WARN proyecto@1.0.0 No description
npm WARN proyecto@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {«os»:»darwin»,»arch»:»any»} (current: {«os»:»linux»,»arch»:»x64″})

+ nodemon@1.19.4
added 87 packages from 31 contributors and audited 8778 packages in 5.504s
found 0 vulnerabilities

Como puede verse se instalan las 86 dependencias que tiene nodemon, a parte del paquete de nodemon. Esta vez como una dependencia de desarrollo, porque no es necesario para su ejecución en producción. Esto también se reflejará en el package.json

pepesan@sauron:/home/pepesan/miproyecto$ cat package.json

{
«name»: «proyecto»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»,
«dependencies»: {},
«devDependencies»: {
«nodemon»: «^1.19.4»
}
}

De cara a gestionar los scripts de arranque es necesario modificar el fichero package.json

Por ejemplo para lanzar un servidor de node:

pepesan@sauron:/home/pepesan/miproyecto$ cat package.json

{
«name»: «proyecto»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«start»: «./node_modules/nodemon/bin/nodemon.js index.js»,
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»,
«dependencies»: {},
«devDependencies»: {
«nodemon»: «^1.19.4»
}
}

Si incluimos un fichero index.js en el proyecto:

pepesan@sauron:/home/pepesan/miproyecto$ cat index.js
const http = require(‘http’);

const hostname = ‘127.0.0.1’;
const port = 3000;

const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader(‘Content-Type’, ‘text/plain’);
res.end(‘Hello World\n’);
});

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

y ejecutamos el comando:

pepesan@sauron:/home/pepesan/miproyecto$ npm start

> proyecto@1.0.0 start /home/pepesan/proyecto
> ./node_modules/nodemon/bin/nodemon.js index.js

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Server running at http://127.0.0.1:3000/

Entonces ya tendremos un servidor de desarrollo para gestionar el proyecto nodejs. en la url:

http://localhost:3000/

Para cerrar el servidor bastará con pulsar control+c para finalizar la ejecución.

Es una buena práctica crear un fichero .gitignore que evite subir las dependencias al servidor cuando lo manejemos con el gestor de versiones git.

pepesan@sauron:/home/pepesan/miproyecto$ cat .gitignore

node_modules

Comments

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Categorías de Cursos

RSS Cursos de Desarrollo

  • Introducción a las PWA (Progressive Web Apps) 21/02/2020
    Las PWA se han convertido es una alternativa a las aplicaciones web para colonizar de una manera más eficiente los móviles debido a que pueden funcionar de manera offline y optimizar el rendimiento de la aplicación desde el móvil. Si quieres enterarte de cómo crearlas, de los pros y contras no te pierdas el último […]
  • Introducción al Testing Web 10/02/2020
    Hemos publicado en nuestro canal de Youtube un vídeo grabado durante las clases de un curso de Python Avanzado. El tema es el de Testing Opensource hablado sobre la teoría de Testing, indicando los distintos tipos de pruebas e identificando las herramientas que se usan a la hora de probar una web.
  • Entrevista a Alejandro López CEO de Slimbook 10/02/2020
    Esta semana hemos entrevistado en República Web, a Alejandro López, CEO de Slimbook. Hablamos de sus productos y sobre equipos para desarrolladores, diseñadores web, fotógrafos, editores de vídeo y data scientist. Te lo vas a perder?
  • Gadgets para el formador itinerante: Router Wifi de Viaje 08/02/2020
    Muchas veces los formadores y profesionales itinerantes tenemos el problema de tener que conectarnos a Internet desde hoteles o cafeterías para seguir haciendo nuestro trabajo, en esta entrada veremos un router wifi de viaje muy interesante que he estado utilizando desde hace un tiempo y que me ha dado muy buenos resultados. Como todo en […]
  • Balanceadores de Carga 27/01/2020
    Dentro de la arquitectura web necesitamos cumplir con dos condiciones si queremos que nuestra arquitectura sea suficientemente sólida: Alta Disponibilidad y Alto Rendimiento, en esta entrada veremos cómo cumplir con estos dos principios. La alta disponibilidad trata de conseguir que un servicio tenga el máximo posible de tiempo de disponibilidad, es decir, que el servicio […]
  • Serie de Artículos de Docker 13/01/2020
    En esta entrada veremos cómo manejar Docker, en una serie de artículos explicativos. No te los pierdas He instalado Docker, ¿Y ahora qué? Docker Compose, para cuando quieres arrancar varios contenedores de manera coordinada
  • ¿Que Frameworks de Frontend son los más utilizados en el millón de páginas del Top de Alexa? 09/01/2020
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Artículos de administración de Servidores 08/01/2020
    Esta serie de artículos nos permiten saber cómo se instala y se configura un servidor desde cero: Nuevo Servidor NAS reciclado Acceso a servidor de la oficina desde fuera gracias a dinaip Configuración de un firewall de manera sencilla en Debian/Ubuntu
  • ¿Cuál es el uso de WordPress en los principales sitios de Internet según Alexa? 14/12/2019
    Empezamos con nuestra serie de publicaciones sobre tecnologías concretas que más se usan en Internet, en este caso con WordPress. ¿Quieres saber cómo es de importante y cuánto se utiliza? No te pierdas esta entrada.
  • Estudio de Uso de Tecnologías en el millón de páginas más vistas según Alexa 13/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies