En nuestro proyecto existen dependencias del tipo desarrollo y del tipo core con sus respectivas versiones, por eso usaremos NPM para administrarlas e instalar Werbpack que viene a ser una dependencia (de desarrollo) más en nuestro proyecto de JavaScript.
Para realizar la configuración de nuestro proyecto seguimos los siguientes pasos:
- Ejecutamos el comando
npm init
. - Llenamos los campos que npm nos solicite.
- Verificamos que los campos sean correctos.
- Estamos listos para comenzar el desarrollo de nuestro proyecto JavaScript.
Para instalar un módulo con npm usamos el comando
npm install <módulo>
Para instalar una versión en concreto:
npm install <módulo>@<version>
// Ejemplo
//npm install webpack@4.32.2 --save-dev --save-exact
Al correrlo, el módulo se instalará con todas sus dependencias pero no quedara registrado el package.json. Es importante que cada dependencia que instalemos quede registrada en este archivo. De lo contrario, cuando un colaborador se una al desarrollo del proyecto tendrá que instalar manualmente cada dependencia y esto puede generar incompatibilidades si se instalan versiones diferentes, además de retrasar el desarrollo del proyecto.
Así que, antes de instalar webpack o cualquier otro módulo hay que tener en claro unas cuantas cosas. Existen dos tipos de módulos:
- Las dependencias son módulos o paquetes que son requeridos para el funcionamiento de nuestro proyecto y que se necesitaran de estos en producción. Para que quede registrada en el package.json como una dependencia corremos:
npm install<modulo> --save
O con el shorthand-S:
npm install <módulo> -S
- Las dependencias de desarrollo son módulos o paquetes que solo serán necesarias para el desarrollo local o para testing. Para que quede registrada en el package.json como una dependencia de desarrollo corremos:
npm install <modulo> --save-dev
O con la shorthand -D:
npm install <módulo> -D
Por defecto, al instalar cualquier tipo de dependencia estas serán registrada de la siguiente forma, en el package.json:
// Ejemplo
"devDependencies": {
"webpack": "^4.36.1"
}
Si nos fijamos, el número de la versión viene acompañado por el caracter “^”. Esto significa que instalará la versión del módulo mayor o igual a la indicada en el package.json. Tratará de instalar la versión más actual primero, de no encontrarse ninguna instalara la marcada el package.json.
Es importante, independientemente del tipo de dependencia que requiramos; que las versiones sean las mismas para todo nuestro equipo de trabajo. Para que en el package.json quede registrada solo la versión exacta podemos eliminar el acento circunflejo (^) o al instalar el modulo correr el comando:
npm install <módulo> <tipo de modulo> --save-exact
O con la shorthand -D:
npm install <módulo> <tipo de módulo> -E
Ahora el registro quedará de la siguiente forma:
// Ejemplo
"devDependencies": {
"webpack": "4.36.1"
}
Esto es útil para cuando queramos automatizar el proceso de instalación de las dependencias en un proyecto avanzado o existente; al que nos unamos. Ya que contando con el package.json podemos correr npm install
y automáticamente consultará las dependencias y dependencias de desarrollo de package.json que tendrá que instalar y la versión que este le indique. De esta forma todos los miembros del proyecto tendrán la misma versión.
Curso de Webpack 2019