Mostrando entradas con la etiqueta npm. Mostrar todas las entradas
Mostrando entradas con la etiqueta npm. Mostrar todas las entradas

domingo, 26 de marzo de 2017

¿Cómo instalar y utilizar npm?

Hellooooo :D Es hora de aprender, primero a instalar npm y despues la forma de utilizar npm en el proceso de desarrollo para ayudarnos con tareas que necesitamos realizar recurrentemente.

Primero instalaremos npm:

En windows:

  1. Descargar el instalador de https://nodejs.org/en/download/
  2. Instalar :D
En ubuntu (Linux en general):
  1. Instalamos: $ sudo apt-get install npm
  2. Instalamos n para el manejo de versiones: $ sudo npm install -g n
  3. Ahora utilizaremos n para descargar la última versión de nodejs: $ sudo n latest
Para ver la versión que tenemos instalada, en la consola debemos realizar:

$ npm --version

Ahora a comenzar un proyecto (si no utilizamos -y es necesario responder a algunas preguntas al hacer npm init):

$ npm init -y

Este comando creará un archivo llamado package.json en la raíz del proyecto, con los siguientes campos:

  • name: con el nombre del proyecto
  • version: con la versión del proyecto
  • description: una descripción pequeña del proyecto
  • main: el script principal del proyecto, usualmente index.js
  • scripts: donde podemos almacenar comandos utilizados recurrentemente en el proyecto
  • keywords: algunas palabras clave para referirse al proyecto
  • author: el autor del proyecto
  • license: la licencia del proyecto

Para instalar modulos en nuestro proyecto utilizamos npm install, ahora instalaremos un pequeño servidor de pruebas para desarrollo:

$ npm install live-server --save-dev

Con este comando estamos indicando que queremos que se instale el módulo live-server como una dependencia de desarrollo. Revisando el archivo package json ahora existe un nuevo campo:

"devDependencies": {
    "live-server": "^1.2.0"
  }

Esto nos indica que las una dependencia para el ambiente de desarrollo se llama live-server.
Ahora instalaremos una dependencia de producción que se utiliza bastante:

$ npm install request --save

  "devDependencies": {
    "live-server": "^1.2.0"
  },
  "dependencies": {
    "request": "^2.81.0"
  }

Ahora se ha creado un nuevo campo llamado dependencies, ahí se almacenó la dependencia instalada como una dependencia de producción.

Entonces, existen dos nuevos campos en el package,json que son muuuuy (muuuy :D) útiles:

  • dev-dependencies: que son dependencias que se utilizan solamente en ambientes de desarrollo, como librerias de testing (mocha, tape, etc.), aserciones (chai), transpilers (babel) u otros.
  • dependencies: son las dependencias que son necesarias para el proyecto en el ambiente de producción.

Además, es necesario ver las dependencias que estan desactualizadas en nuestro proyecto, para eso utilizamos:

$ npm outdated

Ejemplo de comando outdated
Como podemos observar, el comando nos muestra la versión actual, la esperada y a última. Idealmente me gusta realizar este proceso dependencia por dependencia para verificar que todo esta corriendo como debe ser.

Sin embargo, también se puede actualizar todo sin necesidad de hacer el proceso manualmente, para ello:

$ npm update --save-dev --save

Tambien podriamos actulizar solamente un paquete y no todos, por ejemplo para actuaizar un paquete con el nombre underscore:

$ npm update underscore

Con esto se actualiza tanto el paquete dentro de la carpeta node_modules como las versiones en el archivo package,json.

También podemos installar paquetes globalmente, para ello se utiliza -g, por ejemplo:

$ npm install mocha -g

Ahora, podemos revisar cuales son los paquetes que se tienen instalados:

$ npm list

Listado de paquetes utilizando npm list


Crear scripts Propios

También podemos crear nuestros propios scripts para iniciar, por ejemplo, para iniciar live server se debe hacer:

$ ./node_modules/.bin/live-server

Pero esta tarea debe realizarse varias veces, entonces la crearemos como una tarea en el archivo package.json:

  "scripts": {
    "start-server": "live-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Ahora para iniciar el servidor:

$ npm run start-server

Entonces, para ejecutar cualquier script del archivo package.json simplemente es necesario utilizar npm run <nombre-script>.

Y eso es todo por ahora, a golpear el teclado!!!! >_<







domingo, 5 de febrero de 2017

Chat con Websockets - NodeJS, npm, eslint y babel (Parte 1 - Preparando el proyecto)

Hola, ahora crearemos un pequeño chat para aprender un poco más sobre el funcionamiento de Express, Socket.io y Aurelia.

Primero crearemos el backend, con los siguientes comandos (dentro de la carpeta del proyecto que llamaremos chat-backend):

Primero creamos la estructura básica con npm init,

$ npm init

Ahora instalamos las dependencias que necesitaremos para iniciar (recordar que con --save las dependencias se guardan el en archivo package.json para ser instaladas posteriormente):

$ npm install express --save
$ npm install socket.io --save

Primero, habilitaremos algunas características nuevas propuestas de ecma6, para ello instalaremos tres dependencias más:

$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-es2017
$ npm install --save-dev babel-watch

La primera es para habilitar el transpilador que básicamente modificará el código que escribamos con las características de ecma6 a javascript que nodejs pueda entender, babel-preset-es2017 es para obtener esas caracteristicas y que babel pueda entenderlas y por ultimo utilizaremos babel-watch para recargar la aplicación automaticamente en caso de modificar algún archivo javascript.

Ahora, necesitamos crear el archivo .babelrc con el siguiente contenido:

{
  "presets": [
    "es2015",
    "es2017"
  ]
}


Además, modificaremos el archivo package.json, y agregamos las siguientes lineas en caso de que no existan:

"scripts": {
  "start": "babel-watch -L index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Babel-watch es como nodemon, se utiliza para reiniciar automaticamente la aplicación cuando se realice alguna modificación en los archivos del proyecto (similar a nodemon).

Por último utilizaremos eslint para que nos reporte de malas prácticas que nos encontremos utilizando en el código, para ello es necesario ejecutar el siguiente comando (copiar el comando entero en la consola):

$ (
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

Ahora, agregaremos el archivo de configuración el la raiz del proyecto con el nombre .eslintrc donde extenderemos las reglas de airbnb que son bastante buenas:

{
  "extends": "airbnb",
  "env": {
    "es6": true,
    "node": true
  },
  "globals": {
  }
}

Tambien, ignoraremos la carpeta node_modules que es el lugar donde estan nuestras librerias, para ello crear el archivo .eslintignore con el siguiente contenido:

node_modules/

Agregaremos también la regla para ejecutar el linter de manera sencilla, esto en el archivo package.json:

"scripts": {
  "start": "babel-watch -L index.js",
  "eslint": "eslint .",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Por último creamos el archivo index.js con arrow functions y constantes (uhhhh :D):

const mostrar = () => {
    console.log("funciona");
};

mostrar();

Ahora, primero ejecutaremos el linter con npm:

$ npm run eslint

Nos dara una advertencia sobre el console.log, que no es permitido, se debe utilizar un logger u otra opción, es buena práctica ejecutar el linter siempre que se pueda, al principio es bastante engorroso pero luego ya casi no se necesita porque uno se acostumbra a utilizar las buenas prácticas sugeridas.

Además, podemos probar la aplicación, para iniciarla usaremos start, justo como se configuró en el archivo package.json:

$ npm start

Ahora, al realizar cualquier cambio en el archivo  se puede ver como se reinicia automaticamente la aplicación.

Reinicio automático de la aplicación
Para obtener el proyecto desde git se debe obtener:

$ git clone https://github.com/feardarkness/chat-backend.git
$ git checkout tags/inicio

Puedes continuar con la segunda parte del tutorial, Express y Debug, creando la estructura del proyecto.

Eso es todo por ahora, keep coding >_<