¿Qué demonios son los comandos npm? | trucos CSS

npm es, como ya sabes, un administrador de paquetes. Pero similar a las herramientas anteriores que realizan tareas en la línea de comandos, como trueno y sorbonpm también puede realizar tareas, lo cual es perfecto para nosotros, porque ahora que instalamos el paquete Sass en el capítulo anterior, ¡podemos comenzar a usarlo!

Capítulos del manual

1. ¿Para quién diablos es esta guía?
2. ¿Qué diablos significa "npm"?
3. ¿Qué diablos es la línea de comando?
4. ¿Qué diablos es Nodo?
5. ¿Qué diablos es un administrador de paquetes?
6. ¿Cómo diablos se instala npm?
7. ¿Cómo diablos instalas los paquetes npm?
8. ¿Qué demonios son los comandos npm? (¡Estás aquí!)
9. ¿Cómo diablos se instala un proyecto npm existente?

Saltar a comandos npm

Abrir package.json archivo en su carpeta de prueba y no verá mucho en este momento; solo un dependencies propiedad, con una sola dependencia hasta el momento:

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

EN package.json Sin embargo, el archivo alberga mucho más que solo dependencias: contiene mucha metainformación. sobre Su proyecto también Una de las partes más interesantes es una propiedad opcional pero extremadamente útil llamada scripts.

Recuerde que se rastrean todas las dependencias de Sass package-lock.jsonque se genera automáticamente y no necesita ser editado a mano. package.json normalmente contiene solo las dependencias de más alto nivel y podemos personalizarlo libremente.

EN scripts objeto en tu package.json El archivo le permite crear comandos que puede ejecutar en este proyecto para manejar diferentes tareas para usted, ya sea como un proceso único o continuo. Por lo general, estas "tareas" se usan para cosas como ejecutar un servidor de desarrollo local, compilar activos y/o ejecutar pruebas. De hecho, a menudo hay uno start o dev comando incrustado en proyectos de procesamiento todo tareas que puede necesitar realizar al mismo tiempo, como compilar Sass y JavaScript en la misma secuencia.

Todavía no tenemos ningún script para ejecutar, ¡pero arreglemos eso!

Ejemplo: Compilar Sass en CSS

Dentro scripts Sección de package.json archivo, tenemos acceso a todos nuestros paquetes instalados. Aunque no podemos simplemente presentar sass comandos en la terminal ahora mismo, podemos empezar sass comandos como parte del script npm.

Podríamos correr sass comandos en la terminal si Sass se ha instalado globalmente, lo que significa en todo el sistema y no en una carpeta de proyecto específica.Hasta ahora hemos instalado Sass solo en esta carpeta (esto sucede de manera predeterminada cuando instala un paquete). Pero una instalación global serviría sass Comandos disponibles en todo el sistema.

Comience poniendo este bloque de código en el suyo package.json archivo inmediatamente después de abrir { corsé:

"scripts": {
  "sass:build": "sass style.scss style.css"
},

La sintaxis de JSON es muy estricta. Intente ejecutar el contenido del archivo usando un Validador JSON si se atasca.

Esto nos da acceso a npm run sass:build ¡un script que compilará Sass en CSS para nosotros!

El nombre del comando no es importante, siempre que sea una cadena continua. También vale la pena señalar que los dos puntos (:) no hace nada especial aquí; es solo una convención, ya que ambos build o sass en sí mismo probablemente sería demasiado general.

Si ha trabajado con comandos Sass antes, o si ha mirado hacia el futuro, probablemente sepa que esto significa que también debemos crear style.scss archivo en la raíz de nuestra carpeta de proyecto. Hagamos esto y agreguemos cualquier código Sass.

Aquí está el código Sass que utilicé si quieres copiarlo y pegarlo:

$myColor: #ffd100;

.a {
  .nested {
    .selector {
      color: $myColor;
    }
  }
}

¡Estupendo! Guardar este archivo como style.scss en la raíz de su proyecto e intentemos ejecutar nuestro nuevo comando:

npm run sass:build

Una vez que se completa esta tarea, debería ver dos archivos nuevos que aparecen casi inmediatamente en la carpeta de su proyecto: style.css y style.css.map.

Si quieres, puedes abrir style.css archivo, que contiene el código CSS compilado, para verificar si realmente es lo que esperamos:

EN sass El paquete incluso llega a compilar un mapa de salida para nosotros que nos permite ver qué estilos provienen de qué .scss archivos cuando los revisamos en el navegador DevTools. ¡Que agradable!

Si comete un error: verifique dos veces la sintaxis dentro package.json para asegurarse de que JSON sea válido (aquí hay uno validador JSON en línea puede usar), y que su .scss El archivo contiene sass válido (aquí hay uno convertidor descarado en líneaOtra cosa que debe verificar es si el nombre del archivo coincide con el nombre en el comando.

Crear solo un comando de desarrollo

Esto es bastante bueno, pero probablemente nos cansaremos de ejecutar este comando una y otra vez a medida que evolucionemos. Entonces, configuremos un segundo comando que le diga a Sass que Estoy viendo archivo para nosotros y compilarlo automáticamente cada vez que guardamos los cambios!

Agrega esto dentro del scripts objeto en package.json:

"sass:watch": "sass style.scss style.css --watch"

Nota IMPORTANTE: Asegúrate de que haya una coma (,) entre los dos guiones. El orden no importa, pero hay una coma entre ellos. Una vez más, JSON es estricto, así que apóyate en Validador JSON si necesario.

Ahora, si corremos sass:watch (que no debe confundirse con sasquatch), verá un mensaje en su terminal que dice: "Sass está buscando cambios. Presione Ctrl-C para detener.

Si abres el tuyo style.scss archivo ahora, haga un cambio y guárdelo, debería ver un mensaje emergente automático en la terminal que confirma que Sass se ha vuelto a compilar en CSS:

Ahora Está ¡útil! No solo eso, sino que una vez que configuremos estos archivos en nuestro repositorio, tendremos las instrucciones exactas para instalar e iniciar Sass con un comando simple, ¡como todos los demás que trabajan en este proyecto!

Dejaremos cosas aquí para este proyecto de prueba. Fue útil ver cómo empezar, pero con más frecuencia buscará un proyecto preconfigurado en lugar de crear comandos npm para ellos desde cero, que es exactamente lo que haremos más adelante en el último capítulo de esta guía npm.

Notas recientes sobre la instalación de paquetes npm

Debe saber que en realidad hay dos formas de instalar paquetes npm, y cuál desea depende de si el paquete está destinado a ser parte de un ensamblaje de producción o si solo tiene fines de desarrollo.

• npm install (o npm i) es la forma estándar (y predeterminada) de agregar un paquete a un proyecto.
• npm install --save-dev (o npm i -D) agrega el paquete solo a sus "dependencias de desarrollador", lo que significa que solo se instalarán cuando desarrollando el proyecto y no en la construcción de la versión final de producción del proyecto.

Los paquetes instalados como dependencias de desarrollo pueden incluir bibliotecas de prueba, enlazadores, servidores de visualización y otras herramientas que lo ayudan solo durante el proceso de desarrollo. Por lo general, no se utilizan para compilar o ejecutar el sitio web en sí.

Hay una última bandera que vale la pena conocer: npm install --global (o npm i -g). Esta es la forma de instalar un paquete globalmente, como discutimos un poco antes al instalar Sass. Puede usar esto si, por ejemplo, desea poder iniciar sass En todas partes en su máquina Otros usos comunes para la instalación global pueden incluir CLI herramientas que le gustaría usar en cualquier lugar, o incluso otro administrador de paquetes como Hilo.

Qué sigue

¡Nos acercamos al final de nuestro viaje! Hay una última cosa que necesita saber y cómo usar npm para desarrollar rápidamente todo lo que necesita en un proyecto existente. Entonces, digamos que heredas un proyecto que usa npm. ¿Donde empezar? ¿Cómo te aseguras de colaborar con los demás de manera constante? Este es el enfoque de la última sección de esta guía npm.