馃殌 驴C贸mo Aprovechar al M谩ximo una Mentor铆a? 50% de descuento.

Hola Mundo en Svelte + Webpack +  Babel

Hola Mundo en Svelte + Webpack + Babel

Oscar Barajas Tavares
Oscar Barajas Tavares

Svelte es un nuevo framework de JavaScript con el cual podemos crear interfaces de usuario. Svelte ha cambiado la forma en que trabajan los frameworks o librer铆as populares del momento, Svelte se ejecuta en tiempo de compilaci贸n convirtiendo sus componentes en c贸digo imperativo altamente eficiente.

Otro de los puntos a considerar de Svelte es que no utiliza un Virtual DOM, escribe el c贸digo que actualiza minuciosamente el DOM cuando es necesario actualizar el estado de la aplicaci贸n.

En este recurso aprenderemos a instalar, configurar y dejar un proyecto funcional para empezar con Svelte configurando paso a paso cada detalle que necesita.

Aprenderemos:

  1. Configurar Proyecto
  2. Instalar Svelte
  3. Configurar Babel
  4. Configurar Webpack
  5. Crear Aplicaci贸n con Svelte
  6. Compilar proyecto

Ahora ha llegado el momento de la diversi贸n鈥

Configurar proyecto

Lo primero que tenemos que crear e Inicializar el proyecto que vamos a utilizar.

mkdir svelte-base && cd svelte-base

Inicializar el repositorio git

git init

Inicializar proyecto con npm para las dependencias y configuraciones.

npm init -y

instalar Svelte

Ya que tenemos el proyecto Inicializado con git y npm vamos a instalar Svelte y crear la estructura necesaria para trabajar con el proyecto.

Instalar Svelte

npm install svelte --save

Estructura del proyecto

  • src/ : Carpeta donde vive el c贸digo del proyecto
  • src/components/ : Carpeta donde almacenaremos los componentes
  • public/index.html : Archivo HTML base para la construcci贸n del proyecto
  • src/index.js Documento principal de la aplicaci贸n

Configurar Babel

Para trabajar con todas las bondades de Svelte y JavaScript moderno vamos a utilizar Babel para transpilar nuestro proyecto.

    npm install @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev

M谩s adelante explicare a detalle y su implementaci贸n en el proyecto cuando configuremos Webpack.

Crear archivo de configuraci贸n de Babel en la ra铆z del proyecto y le asignamos el nombre 鈥.babelrc鈥

     {
          "presets": [
            "@babel/preset-env"
         ],
     }

Configurar Webpack

Webpack nos permite a帽adir la configuraci贸n necesaria para compilar el proyecto y todos los recursos necesarios.

npm install webpack webpack-cli html-webpack-plugin --save-dev

Creamos el archivo 鈥渨ebpack.config.js鈥 donde vamos a a帽adir la configuraci贸n necesaria.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js", // Elegimos nuestro punto de entrada
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  }, // A帽adimos nuestro punto de salida
  resolve: {
    extensions: ["*", ".mjs", ".js", ".svelte"],
  }, // A帽adimos el soporte para las extensiones que utiliza svelte
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      }, // Creamos la regla para nuestros archivos JS
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: "svelte-loader",
        },
      }, // Utilizamos svelte-loader para trabajar con los archivos .svelte
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ], // utilizamos este plugin para a帽adir el recurso compilado al documento HTML
};

Crear Aplicaci贸n con Svelte

Con la configuraci贸n previa tenemos todos los recursos necesarios para crear un proyecto con Svelte.

En nuestro archivo 鈥渋ndex.js鈥 creamos la configuraci贸n necesaria.

import App from "./components/App.svelte"; // importamos el componente App

// Creamos una app que extiende del App compoenente que creamos con la l贸gica de nuestra aplicaci贸n.
const app = new App({
  target: document.querySelector("main"), // punto de entrada
  props: {
    name: "Svelte",
  }, // props de la aplicaci贸n
});

// Exportamos por defecto app.

Dentro de la carpeta 鈥渃omponents鈥 creamos el archivo App.svelte y a帽adimos los recursos necesarios para nuestra aplicaci贸n.

    // Asignamos la logica de nuestra aplicaci贸n
    <script>
      export let name; // Hacemos referenccia al Prop Name
    </script>

    // Creamos los estilos de la aplicaci贸n.
    <style>
      :global(body) {
        background-color: #676778;
        color: white;
      }
      .main {
        display: flex;
        justify-content: center;
      }
    </style>

    // Llamamos el HTML de nuestro sitio.
    <div class="main">
      <h1>Hello {name}!</h1>
    </div>

Ya por 煤ltimo dentro de la carpeta 鈥減ublic/鈥 vamos a crear el archivo 鈥渋ndex.html鈥 para crear el punto de entrada de nuestra aplicaci贸n.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Svelte Base</title>
  </head>

  <body>
    <main></main>
  </body>
</html>

Ahora que tenemos los recursos necesarios para nuestro proyecto vamos a compilar nuestro proyecto para verlo funcionando en nuestro navegador.

En 鈥減ackage.json鈥 en la secci贸n de 鈥渟cripts鈥 creamos el script de 鈥渂uild鈥 con la configuraci贸n necesaria para compilar el proyecto.

    "scripts": {
         "build": "webpack --mode production",
     },

Ahora podemos ejecutar en la terminal nuestro script para compilar.

npm run build

Se ha creado una carpeta 鈥渄ist/鈥 en la cual encontraremos los archivos 鈥渋ndex.html鈥 y 鈥渂undle.js鈥 con nuestra aplicaci贸n. Ahora ejecutamos el archivo 鈥渋ndex.html鈥 en nuestro navegador y podemos visualizar la aplicaci贸n creada.

Repositorio

En este repositorio de GitHub puedes encontrar el proyecto completo 鈥Svelte Base鈥.

En Conclusi贸n

Aprendiste a crear la estructura para un proyecto, configurar Webpack e implementar Babel para transpilar Svelte y crear los archivos necesarios para crear una simple aplicaci贸n con Svalte.

Ahora puedes compartir este proyecto configurando a detalle cada uno de los puntos necesarios para implementar un sitio con Svelte.

Quieres aprender m谩s de Svelte, te invito al sitio oficial donde encontraras toda la informaci贸n, documentaci贸n y ejemplos. Visita: Svelte.dev

He creado un grupo en Facebook: 鈥Svelte JS Espa帽ol鈥 con la finalidad de compartir m谩s recursos y unir a todos los desarrolladores de habla hispana.