...

Instalar un paquete nuevo

Para instalar un nuevo paquete, utilizaremos npm install paquete (se puede acortar como npm i paquete). Esto descargará el paquete especificado y añadirá la dependencia al archivo package.json de nuestro proyecto. Veamos las diferentes opciones que tenemos a la hora de instalar un nuevo paquete.

Última versión

Para instalar un paquete en nuestro proyecto Vue, nos iremos a la terminal de Visual Studio Code (o nos situaremos con una terminal en la raíz del proyecto) y ejecutaremos:

npm install --save nombrePaquete

De esta forma, se nos descargará la última versión del paquete que indiquemos. 

Con esto, se nos descargará el paquete y se añadirá a la sección dependencies de nuestro package.json:

"dependencies": {
  "axios": "^0.19.2",
  "core-js": "^3.4.4",
  "vue": "^2.6.10",
  "vue-router": "^3.1.3",
  "vuex": "^3.1.2"
}

Como podemos ver se indica el número de versión precedido por ^, lo que indica que se descargará la última versión disponible en esa versión "major". Es decir, los números de versión corresponden a [major, minor, patch], pues cuando estén precedidos por ^, se pondrá la última versión disponible dentro de ese lanzamiento major. Por ejemplo, en el caso de vuex tenemos ^3.1.2, pues esto instalaría la 3.X, siendo X la última versión disponible.

Especificar versión

Para especificar la versión del paquete a instalar, lo indicaremos tras el nombre del paqete, con @:

npm install --save nombrePaquete@version

Es importante saber que esto también nos incluirá la dependencia precedida por ^, es decir, igualmente nos podrá descargar paquetes con actualizaciones menores de la versión mayor que hayamos indicado.

Especificar versión exacta

Si queremos indicar la versión exacta, añadiendo la dependencia sin ^, lo haremos con --save-exact:

npm install --save-exact nombrePaquete@version

En este caso, veremos que las dependencias se añadirán sin el prefijo ^, indicando sólo el número de versión:

"dependencies": {
  "axios": "0.19.2",
  "core-js": "3.4.4",
  "vue": "2.6.10",
  "vue-router": "3.1.3",
  "vuex": "3.1.2"
}

Dependencias en desarrollo

En el package.json tenemos las dependencies que hemos visto, y las devDependencies para las dependencias de desarrollo. La diferencia es que las primeras son dependencias que se incluirán en producción, las de desarrollo no, las tendremos sólo en desarrollo. Las instalaremos así:

npm install --save-dev nombrePaquete
npm install --save-dev nombrePaquete@version
npm install --save-dev --save-exact nombrePaquete@version

Instalar dependencias de un proyecto

Cuando subamos un proyecto a nuestro repositorio, no subiremos la carpeta node_modules, que es donde se encuentran los paquetes descargados. Las dependencias estarán incluidas en el package.json, y podremos descargarlas todas ejecutando. Para instalar las dependencias que tenemos en package.json, tenemos dos opciones.

La primera opción, que será más rápida, la podemos hacer cuando tengamos el archivo package-lock.json. Este archivo se genera automáticamente y contiene el árbol de dependencias exacto que tenemos. Es decir, nos descargaremos exactamente las mismas dependencias, con las mismas versiones, que había en el proyecto cuando se subió a GitLab. Para descargar las dependencias tirando de package-lock.json, tenemos que ejecutar:

npm ci

Por el contrario, podemos hacer una instalación que consulte directamente package.json, descargando las versiones que se indiquen, buscando si hay más recientes en los casos que así se especifique, etc. De esta forma será más lento, pero si no disponemos del archivo package-lock.json, tendremos que hacerlo con:

npm installi