Gestión de dependencias frontEnd con npm

Aprende a gestionar tus dependencias o librerías FrontEnd de una forma más eficaz, facilidad de actualización, instalación y su gestión en general.

Gestión de dependencias frontEnd con npm

NPM Es el sistema de manejo de paquetes y gestión de módulos de node.js, es como una base de datos donde se encuentran alojados miles de paquetes desarrollados por personas de todo el mundo. Aunque npm es mayormente utilizado en el desarrollo de aplicaciones node.js para BackEnd, también se puede utilizar para la gestión de dependencias en el desarrollo frontEnd JavaScript y Css,  ya que, existen un gran número de librerías utilizas para el desarrollo frontend alojadas en el directorio de npm.

Desde la versión 0.6.3 de nodejs, npm ya está integrado en el instalador de node, así que basta con instalar node.js en una versión superior a la 0.8.0 o superior.

Para saber la versión de node.js que tenemos instalado, utilizamos el comando node -v

Instalación de node.js y NPM en Windows 7

Para instalar nodejs en windows 7, debemos descargar el instalador desde la web oficial de node.js.

Instalamos atreves del ejecutable y luego comprobamos que se ha instalado correctamente, con los siguientes comandos.

  • Node –v: nos muestra la versión actual de node.js instalada en nuestro sistema.
  • Npm –v: nos muestra la versión actual de npm instalada en nuestro sistema.

Para la instalación en Ubuntu, Debian, Linux Mint, etc, visiten este repositorio en github.

Ya teniendo nodejs y npm instalado procedemos a crear nuestro archivo package.json para configurar las dependencias necesarias en nuestro proyecto.

Crear y configurar el archivo package.json

Para empezar a agregar las dependencias que necesitamos en nuestro proyecto, vamos a crear el archivo package.json, dentro de este archivos configuraremos las dependencias de desarrollo y producción de nuestra aplicación.

Este archivo podemos crearlo de dos formas:

  • De forma manual: Podemos crearlo directamente en el editor de nuestra preferencia, con el nombre package.json y basta con escribir {} dentro del archivo.
  • De forma automática: Tecleando desde la consola npm init, esto iniciara el proceso de creación con una serie de preguntas opcionales.
    Estos meta datos no nos sirven para trabajar en nuestro proyecto, son meta datos que utiliza npm en su directorio cuando el archivo package.json es utilizado para crear un módulo que posteriormente será subido al directorio de npm, con lo cual estos datos si queremos podemos dejarlo vacío.

Ahora solo tenemos que instalar todas las dependencias de nuestro proyecto utilizando la consola.

Instalación de dependencias de desarrollo:

En el desarrollo de una aplicación tenemos dos tipos de dependencias, las cuales están claramente definidas en nuestro archivo package.json, estas son:

  • Dependencias de desarrollo (devDependencies): Estas son las dependencias que utilizamos para agilizar el proceso de desarrollo, tanto en frontEnd como enBackEnd.
  • Dependencias de producción (dependencies): estas son las dependencias que necesita nuestra aplicación para su correcto funcionamiento.

Ya tenemos instalado node.js, npm y nuestro archivo package.json.

Imaginemos el siguiente escenario. Hemos iniciado un proyecto el cual desarrollaremos en HTML5 y CSS3, para trabajar el CSS3 utilizaremos el preprocesador de CSS LESS, para trabajar de forma más ágil la codificación del HTML, utilizamos liveReload, de forma que iremos escribiendo html y cada vez que guardemos nuestro archivo los cambios se muestren de forma instantánea.

Para la gestión automática de estas tareas utilizaremos Gulp o Grunt de los cuales hablaremos más a fondo en otros tutoriales, por ahora sólo instalaremos las dependencias del proyecto las cuales debemos buscar en el directorio de npm si no sabemos su nombre correcto.

¿Qué librerías necesitamos para esto? Para organizar nuestro entorno de trabajo FrontEnd con el escenario anterior, utilizaremos las siguientes librerías.

Estos son los paquetes que utilizaremos como dependencias de desarrollo, con sus respectivos comandos de instalación.

  • npm install less –save-dev
  • npm install livereload –save-dev
  • npm install watch –save-dev

Como puedes notar para guardar las dependencias de desarrollo en nuestro Proyecto, utilizamos la sentencia –-save-dev, esto crea una carpeta node_modules donde se guardarán todas las dependencias que instalemos.

Al instalar cada paquete, nuestro archivo package.json tendrá el siguiente aspecto.

  • less: Esta librería compila el código LESS a CSS y guarda el css en nuestra carpeta de producción.
  • livereload: Este paquete trabaja cuando un archivo es modificado, actualizando el navegador.
  • watch: Con este estaremos observando los archivos LESS, cuando cambien lo compilamos a css.

Instalación como dependencia de producción:

Hasta ahora solo hemos trabajado las dependencias de desarrollo, en nuestro package.json tenemos la opción de agregar también las dependencias de producción, que son aquella que utilizara nuestra aplicación para su funcionamiento.

Para instalar dependencias para producción en nuestro proyecto, utilizamos el comando:

npm install [] –save

Estas dependencias habilitan en nuestro archivo el apartado dependencies que hace referencia a las dependencias que serán usadas en producción por nuestra aplicación.

Eje: npm install --save jquery bootstrap El resultado de esto sería:

Ahora nuestro archivo package.json tendrá el siguiente aspecto.

Como había mencionado antes, npm en este caso sólo nos ayuda a mantener nuestras dependencias actualizadas de una forma más profesional y eficaz, pero cuando hablamos de optimización de tareas en el desarrollo, necesitamos incluir otras herramientas a nuestro flujo de trabajo, me refiero a gestores de tareas como Grunt y Gulp.

En esta misma serie hay dos tutoriales donde hablamos sobre automatización de tareas frontEnd con Grunt y Automatización de tareas con Gulp, en estos tutoriales aprenderemos como utilizar estas dos herramientas para que realicen tareas repetitivas por nosotros.

¿Comandos de utilidad para gestionar las dependencias npm?

Ya con esta configuración podemos gestionar nuestras dependencias, podemos eliminar, actualizar y agregar dependencias de forma sencilla a nuestro proyecto.
Básicamente es la facilidad que nos brinda npm, facilidad de actualización de librerías, facilidad de eliminación de librerías que no estemos utilizando, etc.

Comando de información:

  • npm info : Muestra información
  • npm config list: muestra la configuración actual de npm
  • npm info versions: Muestra las versiones disponibles de ese paquete.
  • npm info version: a diferencia del anterior, este comando muestra la última versión del paquete
  • npm ls, npm list: Lista todos los paquetes que tenemos instalados en el proyecto actual.
  • npm ls –g: Lista todos los paquetes instalados de forma global.
  • npm view npm show : Muestra toda la información del paquete especificado. Si quieres ser más espeficico puedes utilizar cada campo para mostrar su información.
    por ejemplo: muestra el nombre npm view repository: muestra información sobre el repositorio utilizado. Nos muestra la información en formato JSON, con lo cual podemos navegar fácilmente por ella.

Comando de instalación de dependencias:

  • npm install []: Instala de forma el paquete especificado en el proyecto actual.
  • npm install [] –g : instala de forma global el paquete especificado.

Actualización de dependencias:

  • npm outdated: Busca actualizaciones de los módulos instalados en el proyecto actual.
  • npm update –g: actualiza los paquetes instalados de forma global
  • npm update: actualiza los paquetes instalado en el proyecto actual.

Eliminar o desinstalar paquetes:

  • npm uninstall [nombre]: Elimina de forma local el paquete especificado
  • npm uninstall [nombre] -g : Elimina el paquete especificado del entorno global
  • npm rm [nombre], npm r [nombre],npm un [nombre]: Eliminan el paquete de la carpeta node_module, pero no del archivo package.json
  • npm prune [nombre]: Elimina los paquetes que no estén listados
    en las dependencias del package.json
  • npm prune [nombre] [–production]: Elimina todos los paquetes especificados en devDependencies.

Conclusión:

Ya hemos dado el primer paso para empezar a trabajar como todo un profesional, sigue esta serie de tutoriales que tiene como propósito mostrarte el flujo de trabajo PRO de un frontEnd.

En los próximos tutoriales aprenderemos a automatizar tareas y a estructurar correctamente nuestros proyectos, espero que te hayan quedado claro los conceptos aplicados en este tutorial, pero si tienes alguna duda, pregunta y te echamos una mano.

Si estás leyendo esto es porque te lo ha leído todo. Genial!!! Esto quiere decir que te ha gustado, compártelo con tus seguidores en las redes sociales.

Hasta el próximo tutorial!

Referencias de NPM:

  • wgerez

    Gracias Giordano por la explicación, me ha quedado muy claro los conceptos de deDependecies y dependecies. Desde ya compartiendo en mis redes sociales. Un cordial saludo!.