Cómo instalar el proyecto npm Trucos CSS

Obtuvimos una buena descripción general de cómo funciona npm y cómo usarlo para instalar paquetes y ejecutar comandos en este momento. Ahora avancemos un poco más y veamos cómo se ve la descarga y la instalación existente proyecto npm en lugar de empezar desde cero. Lo más probable es que lo hagas la mayor parte del tiempo. Esto es mucho, mucho más fácil que instalar y configurar todas las partes individuales una por una.

Esto es lo que cubrimos en este último capítulo de la guía npm y me basaré en la experiencia personal de mi proyecto de vida real.

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 comandos?
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?
9. ¿Cómo diablos se instala un proyecto npm existente? (¡Estás aquí!)

Aquí hay un proyecto real de npm

El proyecto que elegí para esto es mío. Lanzador de blog estático SvelteKitCreo que este es un buen ejemplo porque viene con muchos paquetes preinstalados que son excelentes para fines de demostración.

Este es mi proyecto real, que está diseñado para brindarle, como puede haber adivinado por el nombre, un punto de partida para construir un sitio de blog generado estáticamente ("Generado estáticamente" significa que nuestro código será compilado por .html archivos listos para implementar en cualquier lugar de la web. Este es uno de los pocos enfoques incluidos en la forma "Jamstack" de construir sitios).

Y no te preocupes si no sabes nada al respecto. SvelteKit"Es solo una demostración, y no vamos a escribir nada que no sepas". Sin embargo, vale la pena señalar que SvelteKit utiliza Vite debajo de la tapa, que en realidad es un paquete npm lo que nos da acceso a modernas herramientas de construcción y un servidor de desarrollo súper rápido.

Clonación de proyectos

Primero, necesitamos "clonar" el proyecto, que es una palabra fantástica para copiar un proyecto en nuestro sistema para que podamos trabajar en él localmente Hay dos formas de clonar un proyecto existente.

Si prefiere la forma visual en el navegador, vaya a el repositorio inicial en GitHub y haga clic en el menú desplegable "Código", que se encuentra directamente en la interfaz de usuario de GitHub, y seleccione la opción "Descargar ZIP".

Alternativamente, si prefiere usar la línea de comando en su lugar, ejecute este comando (solo asegúrese de estar en un lugar donde no le importe agregar una nueva carpeta de proyecto a su computadora, p. cd /path/to/folder):

npx degit https://github.com/josh-collinsworth/sveltekit-blog-starter.git sveltekit-blog-starter

Tal vez lo recuerdes npx nos permite ejecutar paquetes npm sin instalarlos constantemente. degit clonar el proyecto como git clone lo haría, pero sin su historia de Git (literalmente "de-git").

Sea cual sea el método que utilices, obtienes uno nuevo sveltekit-blog-starter Abramos en un editor de código, abramos la terminal y comencemos npm install (o npm i) equipo.

En este punto, verá una nota de vulnerabilidad, como se explica en la última sección de esta guía. Puede decir algo como "0 vulnerabilidades encontradas" (como en la captura de pantalla anterior), pero es posible que este número sea mayor que cero. Si ve vulnerabilidades, no se preocupe. Por ahora, puede ignorarlo, ya que este no es un proyecto que pretendemos poner en producción para que otros lo vean o lo usen. (Ver la sección sobre npm audit en el capítulo anterior para obtener más información).

Inicie el servidor y realice los cambios.

Si tuvieras que mirar dentro package.json archivo en el proyecto clonado, verá el comando para iniciar el servidor de desarrollo:

npm run dev

Ejecute este comando en la terminal y debería ver algo como esto casi de inmediato:

En VS Code puedes presionar CMD mientras hace clic http://localhost:3000 URL, o puede ingresarlo manualmente en su navegador. De todos modos, ¡el sitio debe mostrarse en el navegador!

¡Tomémonos un tiempo para apreciar lo rápido y simple que fue! Sí, es posible que necesitemos instalar un montón de andamios primero, pero este es un precio inicial único. Tenemos un proyecto completo ejecutándose en nuestra máquina con solo unos pocos comandos, ¡y podemos hacer lo mismo en cualquier momento que queramos instalar otro proyecto existente!

No entraré en los detalles de este proyecto en particular porque no es importante aprender npm, pero es un buen ejemplo porque hay muchas cosas geniales preconfiguradas y podemos hacer cambios fácilmente y ver cómo se actualizan inmediatamente en un navegador. Veamos algunos de estos comandos a continuación.

SvelteKit requiere Node 14 o posterior. Si ha instalado npm como parte de esta guía, esto no será un problema para usted. Pero si ya lo instaló antes de que comencemos, y si encuentra errores al intentar iniciar este proyecto, vale la pena rápidamente. node -v para estar seguro. nvm es tu amigo si necesitas actualizar.

Compile automáticamente Sass al guardar

Puede encontrar los archivos Sass del proyecto en src/lib/assets/scss/ Intenta abrir global.scss archivo directamente. Realice un cambio, guárdelo y debería ver la actualización automáticamente (y casi instantáneamente) en su navegador.

Hacer cambios en el contenido

La página de inicio en realidad usa el repositorio README.md archivo como página de inicio. si abres README.md y comience a hacer cambios (bueno, si no conoce Markdown, cualquier edición servirá), también debería ver estos cambios aparecer tan pronto como guarde, tal como lo hizo Sass en el último paso:

Si lo desea, puede abrir otra página, digamos src/routes/contact.svelte y actualice el HTML para ver cómo se actualiza en vivo en su navegador, y tan pronto como se guarde.

Incluso puede duplicar uno de los archivos de Markdown dentro src/lib/posts/ y realice ediciones para ver que aparece automáticamente en la lista de publicaciones en /blog página si quieres llegar tan lejos. (Solo asegúrese de darle un título único).

Comprender las importaciones

Hay una cosa importante sobre los proyectos de npm que mencionamos brevemente en el capítulo cuatro, pero que aún no hemos analizado: importar. Esta guía realmente no estaría completa si no la tocáramos. La idea básica es que podemos, fiel al nombre, importar un paquete simplemente sin instalarlo en la carpeta del proyecto o en su sistema. En su lugar, se utiliza en el sitio.

¿Cómo es eso? Abrir svelte.config.js carpeta en la raíz del proyecto y verá un bloque de import filas en la parte superior, algo como esto:

import adapter from '@sveltejs/adapter-static'
import { mdsvex } from 'mdsvex'
import preprocess from 'svelte-preprocess'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeSlug from 'rehype-slug'

Cada uno de ellos imports El paquete utilizado en este archivo está instalado. Lo que realmente hace cada paquete no importa en este momento; solo quiero prestar atencion import sintaxis. Así es como lo usamos paquetes en nuestros archivos de código reales; decimos JavaScript Qué para importación y De dondeEntonces podemos llamarlo en nuestro código.

Esta sintaxis se llama "importación ES6", que es solo importarant (¡¿lo entendiste?!) así que ya sabes, porque este es el estándar que, al igual que el basado en navegador Tanto JavaScript como Node JavaScript han acordado usar en el futuro.

Anteriormente, Node JavaScript usaba (y a menudo todavía usa) una sintaxis ligeramente diferente llamada CommonJS. Si ve una importación que se parece a esto, este es el estilo antiguo de CommonJS:

const myPackage = require('package-name')

La otra cosa importante que debes saber sobre el estilo del ES6 import es: la sintaxis es específica de npm, no un estándar de lenguaje.

Para ser claro: usted yo puedo usar import en JavaScript normal. Esta es una característica muy común del lenguaje. Pero debe proporcionar una ruta relativa o (en navegadores más modernos) una URL para todo lo que importa. Sin embargo, simplemente usar una cadena para atrapar el paquete, como vemos aquí, no es válido.

Entonces, ¿por qué usarlo si no es un código técnicamente válido? Porque manejar este estilo de importación es una de las cosas buenas que npm hace por nosotros. Cuando decimos npm sí import somePackage from 'name' como una cadena, npm sabe automáticamente cómo buscar a través de los paquetes instalados en el proyecto para encontrar la importación que solicitamos. Esto nos salva de ambos molestos caminos relativos, y de la necesidad real de saber dónde viven nuestros paquetes en lo profundo del laberinto de node_modules.

Esto es evidente, pero dado que la sintaxis no es válida, no podrá usarla con éxito a menos que su proyecto npm incluya un paquete o compilador de algún tipo para manejar módulos importados y en código válido en el navegador.

Construir el sitio final

La mayoría de los proyectos de npm como este tienen dos objetivos principales:

1. Ayudarle a desarrollar su sitio web o aplicación
2. Crear una versión de producción finalizada

SvelteKit no es una excepción. Cuando hayamos terminado con nuestra (excelente) configuración del servidor de desarrollo y estemos satisfechos con nuestros cambios, podemos ejecutar este comando:

npm run build

Si su servidor de desarrollo aún se está ejecutando, puede detenerlo con control+°Co abrir una nueva sección de la terminal. No podrá ingresar ningún comando en la misma ventana de la terminal donde se está ejecutando el proceso de desarrollo, ya que esta es una tarea activa y continua.

Cuando empecemos build SvelteKit revisa todos los archivos del proyecto y descarta una colección completamente empaquetada e implementable de archivos HTML, CSS y JavaScript estáticos y lo hace con bastante rapidez. Puede cargar esta colección de archivos dondequiera que pueda alojar un sitio web. herramientas modernas; buena producción a la antigua.

Cuando se complete el comando de compilación, debería ver uno nuevo build carpeta en la raíz (es decir, nivel superior) de la carpeta de su proyecto. Si miras a través de él, notarás que ya no está. .md, .svelteo cualquier otro archivo que no pueda ser leído por un navegador. Todo está compilado en HTML puro, CSS y JavaScript, sin mencionar que, como verá si abre un archivo JavaScript o CSS, están completamente minimizados para ser como pequeña tanto como sea posible para cargar en el navegador como rápido cuanto más se pueda.

Si quieres puedes correr npm run preview después de que se complete la compilación para ver cómo se carga el sitio compilado en el navegador. La diferencia aquí es que el contenido se cargará desde el final. build carpeta, no construida con archivos precompilados sobre la marcha, como sería el caso con dev bienvenidos. No lo haras ver alguna diferencia, a menos que abra la pestaña Red en DevTools (o intente actualizar algo), pero verá el producto final.

Es un paso opcional, pero creo que es genial tener una idea de los pocos archivos compilados que tenemos, dados todos los diferentes archivos que pusimos en el proyecto, y lo pequeño que es el paquete final, gracias a la increíble herramientas de compilación integradas en este proyecto. (Para que conste, eso es todo SvelteKit y Vite.)

Prácticas modernas de implementación

Este es un tema para otro momento, pero la implementación moderna a menudo no requiere que ejecute un build comando y cargue los archivos usted mismo (aunque esto sigue siendo una opción). En cambio, el host (como netlizar o Vercel) se conecta directamente al repositorio GitHub de su proyecto y cada vez que hace clic en los cambios a la rama principal del repositorio, el host ejecuta su comando de compilación por usted e implementa automáticamente los archivos compilados.

Esta es una de las muchas características extremadamente buenas de esta nueva era de desarrollo frontend. Sin jugar con FTP o arrastrar archivos manualmente a cualquier lugar; ¡Estamos seguros de que todo se crea y se implementa automáticamente cuando presionamos nuestro código sin tener que hacer nada!

Complete esta guía de npm

Si has llegado hasta aquí, ¡felicidades! Y gracias. Felicitaciones porque ha pasado mucho tiempo, largo leer. Y gracias, porque... bueno, ha pasado mucho tiempo, largo Leer.

Pero lo has conseguido y espero que hayas aprendido algunas cosas importantes. Al principio, mencioné que mi objetivo no era la brevedad, sino la eficiencia. Eso significa que cubrimos muchoComenzamos con una breve descripción general de npm y dónde encaja en la parte delantera moderna del desarrollo antes familiarizado con la línea de comandos. A partir de ahí, desglosamos los términos "Nodo" y "administrador de paquetes" para averiguar exactamente qué es y qué hace npm. Después de aprender sobre el papel que juegan los administradores de paquetes en el desarrollo, nos sumergimos directamente en npm, incluido cómo instalarlo, agregar paquetes a un proyecto, configurar comandos y, finalmente, cómo saltar a un proyecto existente que usa npm.

Espero que todo lo que hemos cubierto en esta guía de npm al menos le abra la puerta lo suficiente para que explore más npm y suba el nivel cuando esté listo. A menudo tengo que repetir algo muchas veces y probar muchos enfoques para sumergirme realmente en algo. Entonces, si te sientas ahí y te sientes casi tan confundido como antes, tómate un poco más de tiempo para eso. Piense en lo que sabe y en lo que ha aprendido, y regrese, ¡o intente un nuevo enfoque cuando esté listo!

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 comandos?
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?
9. ¿Cómo diablos se instala un proyecto npm existente? (¡Estás aquí!)