Cómo empezar a utilizar Svelte
Desde que comencé a usar Hugo como generador de sitios estáticos para crear sitios web, me encantó este enfoque de publicación en la web, en comparación con el uso de un CMS que generaba páginas dinámicamente, como estaba acostumbrado en el pasado.
Svelte es un framework de JavaScript que me da la misma sensación. En comparación con React, Vue, Angular y otros frameworks, una aplicación creada con Svelte se compila de antemano, los visitantes de su sitio no tienen que recibir el código del framework y de las bibliotecas y, como resultado, toda la experiencia es más fluida, consume menos ancho de banda y todo parece más rápido y liviano.
Al igual que con Hugo, que desaparece durante la implementación y genera HTML simple, Svelte desaparece y todo lo que obtienes es JavaScript simple.
Pero vayamos al meollo del artículo: cómo empezar a utilizar Svelte.
Necesitas tener instalado Node.js. ¡Consulta mi publicación sobre cómo instalar Node.js si aún no lo tienes!
Y asegúrese de que sea la última versión ( cómo actualizar Node.js ).
Node instala el npx
comando, que es una forma práctica de ejecutar comandos de Node. En particular, vamos a ejecutar esto:
npx degit sveltejs/template firstapp
Esto descargará y ejecutará el comando degit , que a su vez descarga el código más reciente de la plantilla del proyecto Svelte que se encuentra en https://github.com/sveltejs/template , en la firstapp
carpeta.
Ahora, vaya a esa firstapp
carpeta y ejecute el comando npm install
para descargar las dependencias adicionales de la plantilla. En el momento de escribir esto, esas son las dependencias de esa plantilla de proyecto: Actualidad y noticias
"npm-run-all""rollup""rollup-plugin-commonjs""rollup-plugin-livereload""rollup-plugin-node-resolve""rollup-plugin-svelte""rollup-plugin-terser""svelte"
Como puedes ver, es el núcleo de Svelte, más Rollup (una alternativa a Webpack) y algunos de sus complementos. Además npm-run-all
, una herramienta CLI que se utiliza para ejecutar varios scripts npm en paralelo o secuencialmente.
Ahora estamos listos para ejecutar nuestro sitio Svelte en modo de desarrollo, ejecutando
npm run dev
Esto iniciará la aplicación en el host local, en el puerto 5000, de forma predeterminada:
Si apunta su navegador allí, verá el ejemplo “¡Hola mundo!”:
Ya está listo para abrir el código en su editor favorito. La src
carpeta contiene todo lo que necesita para modificar la aplicación: el main.js
archivo:
Este archivo es el punto de entrada y en este caso inicializa el componente App, que está definido en App.svelte
un componente de archivo único:
scriptexport let name;/scriptstyleh1 {color: purple;}/styleh1Hello {name}!/h1
Si estás familiarizado con Vue.js , se trata de un concepto similar. Defines el marcado, el estilo y el código JavaScript para cada componente en un solo .svelte
archivo.
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Introducción a Svelte: un breve tutorial
Desde que comencé a usar Hugo como generador de sitios estáticos para crear sitios web, me encantó este enfoque de publicación en la web, en comparación c
programar
es
https://aprendeprogramando.es/static/images/programar-introduccion-a-svelte-un-breve-tutorial-2106-0.jpg
2024-11-02
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente