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.

[terminal user=“pepesan” computer=“sauron” cwd=“/home/pepesan”] $ sudo npm i -g npm [/terminal]

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: [terminal user=“pepesan” computer=“sauron” cwd=“/home/pepesan”] $ mkdir miproyecto $ cd miproyecto [/terminal]

Después empezamos a crear la estructura del proyecto ejecutando: [terminal user=“pepesan” computer=“sauron” cwd=“/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 ` 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

[/terminal]

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

[terminal user=“pepesan” computer=“sauron” cwd=“/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” }

[/terminal]

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:

[terminal user=“pepesan” computer=“sauron” cwd=“/home/pepesan/miproyecto”]

$ npm install —save nombre_paquete

[/terminal]

Por ejemplo, Jquery:

[terminal user=“pepesan” computer=“sauron” cwd=“/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

[/terminal]

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

[terminal user=“pepesan” computer=“sauron” cwd=“/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 $ 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 $ 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

[/terminal]

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

[terminal user=“pepesan” computer=“sauron” cwd=“/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” } }

[/terminal]

Para quitar una dependencia bastará con ejecutar el comando:

[terminal user=“pepesan” computer=“sauron” cwd=“/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

[/terminal]

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

[terminal user=“pepesan” computer=“sauron” cwd=“/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

[/terminal]

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

[terminal user=“pepesan” computer=“sauron” cwd=“/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” } }

[/terminal]

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

Por ejemplo para lanzar un servidor de node:

[terminal user=“pepesan” computer=“sauron” cwd=“/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” } }

[/terminal]

Si incluimos un fichero index.js en el proyecto:

[terminal user=“pepesan” computer=“sauron” cwd=“/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}/`); });

[/terminal]

y ejecutamos el comando:

[terminal user=“pepesan” computer=“sauron” cwd=“/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/

[/terminal]

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.

[terminal user=“pepesan” computer=“sauron” cwd=“/home/pepesan/miproyecto”]

$ cat .gitignore

node_modules

[/terminal]