Empezando con Svelte - un breve tutorial

Cómo empezar con Svelte

Desde que comencé a usar Hugo como un generador de sitios estáticos para crear sitios web, he aprendido a amar este enfoque para publicar en la web, en comparación con el uso de un CMS que generaba páginas dinámicamente, como estaba acostumbrado a hacerlo en el pasado.

Sveltees un marco de JavaScript que me da la misma sensación. En comparación con React, Vue, Angular y otros marcos, una aplicación creada con Svelte escompiladode antemano, los visitantes de su sitio no tienen que recibir el marco y el código de las bibliotecas y, como resultado, toda la experiencia es más fluida, consume menos ancho de banda y todo se siente más rápido y liviano.

Al igual que con Hugo, que desaparece en 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 con Svelte.

Necesitas tener Node.js instalado. Echa un vistazo a micómo instalar Node.jspublicar si aún no lo tiene!

Y asegúrese de que sea la última versión (cómo actualizar Node.js).

El nodo instala elnpxcomando, que es una forma práctica de ejecutar comandos de nodo. En particular, vamos a ejecutar esto:

npx degit sveltejs/template firstapp

Esto descargará y ejecutará elcomando degit, que a su vez descarga el código más reciente de la plantilla del proyecto Svelte que se encuentra enhttps://github.com/sveltejs/template, en elfirstappcarpeta.

Ahora entra en esofirstappcarpeta y ejecutarnpm installpara descargar las dependencias adicionales de la plantilla. En el momento de escribir este artículo, esas son las dependencias de esa plantilla de proyecto:

"npm-run-all"
"rollup"
"rollup-plugin-commonjs"
"rollup-plugin-livereload"
"rollup-plugin-node-resolve"
"rollup-plugin-svelte"
"rollup-plugin-terser"
"svelte"
As you can see, it’s the Svelte core, plus Rollup (a Webpack alternative) and some of its plugins. Plus npm-run-all, a CLI tool that is used to run multiple npm scripts in parallel, or sequential.


We’re now ready to run our Svelte site in development mode, by running


npm run dev


This will start the app on localhost, on port 5000, by default:


CLI


If you point your browser there, you’ll see the “Hello world!” example:


Browser


You’re now ready to open the code in your favorite editor. The src folder contains all you need to tweak the app: the main.js file:


Editor


This file is the entry point and in this case initializes the App component, which is defined in App.svelte, a single file component:


<script>
export let name;
</script>

<style>
h1 {
color: purple;
}
</style>


<h1>Hello {name}!</h1>


If you are familiar with Vue.js, it’s a similar concept. You define the markup, the style and the JavaScript for each component in a single .svelte file.

  

  
Download my free Svelte Handbook

  




More svelte tutorials:

Tech Wiki en línea!