Introducción

1

Implementación de Aplicaciones Web con Svelte

2

Introducción a Svelte: Creación de Interfaces de Usuario Simples

Elementos básicos de Svelte

3

Primeros Pasos con Svelte: Instalación y Configuración Básica

4

Estilos CSS y Variables Globales en Componentes Svelte

5

Creación e Importación de Componentes en Svelt

6

Reactividad en Svelt: Creación de un Contador Interactivo

7

Componentes Svelte: Uso de Propiedades y Valores por Defecto

8

Condicionales y Dark Mode en Componentes Svelte

9

Estructuras de Control en Svelte: Iteración de Arreglos y Componentes

10

Eventos DOM y Binding de Datos en Svelte

11

Manejo del ciclo de vida de componentes en Svelte

12

Reactividad en Svelte: Uso de Stores para Componentes Compartidos

Configuración del proyecto

13

Creación de una Red Social con Svelte y Git

14

Configuración de Webpack para Proyectos Svelte

15

Creación de un Proyecto Web con HTML5 y Svelte paso a paso

Desarrollo de la aplicación

16

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

17

Estructuración de Headers y Sidebars en Aplicaciones Web

18

Estructura de Componente Timeline en Svelte para Pubstagram

19

Estilos CSS para Aplicaciones con Svelte

20

Conexión de Aplicaciones Svelte a APIs Públicas

21

Integración de API para Comentarios en Pubstragram

22

Creación de un Modal para Compartir en Facebook con Svelte

23

"Implementación de Likes y Stores en Svelte para Pubsstagram"

Deployment

24

Despliegue de Aplicaciones con Netlify y GitHub

25

Desarrollo de Aplicaciones Web con Svelte y PUXTgram

26

Programación en Python para Principiantes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuración de Webpack para Proyectos Svelte

14/26
Recursos

¿Cómo configurar y optimizar nuestro entorno de desarrollo con Webpack?

La transición hacia un entorno de desarrollo optimizado puede sembrar curiosidad y entusiasmo, sobre todo cuando introducimos herramientas potentes como Webpack. Este artículo te guiará, con sencillos pasos, para configurar un entorno donde trabajarás más cómodamente al desarrollar aplicaciones con Svelte, Babel, y Webpack. No solo cargarás las herramientas necesarias, sino que también adquirirás habilidades para personalizar este entorno según tus preferencias.

¿Cuáles son los pasos iniciales para integrar Svelte?

Para comenzar con nuestra configuración, es crucial entender que nuestro proyecto de Pushstagram se desarrollará utilizando Webpack. Al emplear este potente empaquetador de módulos, seguimos los siguientes pasos:

  1. Instalar Svelte:
    • Usamos el comando: npm install svelte --save-dev.
    • Asegúrate de tener instalada la última versión, que en este caso es la 3.18.

¿Cómo se integra Babel en nuestro proyecto?

Babel es una herramienta indispensable para transpilar JavaScript moderno. De esta manera, aseguramos que nuestro código sea compatible con la mayoría de los navegadores. Para configurarlo, realizamos:

  1. Instalación de Babel y sus componentes:

    npm install @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev
    
  2. Verificación de la instalación:

    • Antes de ejecutar, aseguramos que no haya errores tipográficos en los paquetes y flags.

¿Cómo se configura Webpack para gestionar nuestro proyecto?

Con Webpack, el proceso puede parecer intimidante al comienzo, pero es esencial para automatizar el flujo de trabajo. Aquí te mostramos cómo configurarlo:

  1. Instalación de Webpack y plugins:

    npm install webpack webpack-cli html-webpack-plugin --save-dev
    
  2. Creación del archivo de configuración:

    • En la raíz del proyecto, crea webpack.config.js.
    • Este archivo incluirá instrucciones para Webpack sobre cómo compilar y gestionar los recursos del proyecto.

¿Qué importancia tiene estructurar nuestro archivo webpack.config.js?

El archivo de configuración es el núcleo donde definimos cómo queremos que funcionen las distintas herramientas dentro de nuestro proyecto. A continuación, un vistazo a su estructura básica:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['*', '.mjs', '.js', '.svelte']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: 'svelte-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: 'public/index.html',
      filename: 'index.html'
    })
  ]
};

¿Por qué es vital adaptarse a las configuraciones personalizadas?

Es crucial aprender a adaptar la configuración según los requisitos del proyecto. Analizar y personalizar estos ajustes nos permite:

  • Maximizar la eficiencia del proyecto.
  • Identificar y controlar los puntos críticos del flujo de trabajo.
  • Configurar herramientas que aseguren compatibilidad y optimización.

A través de estos pasos, has configurado exitosamente un entorno de desarrollo profesional, adaptando herramientas modernas para la creación de proyectos robustos con Svelte. ¡Sigue experimentando y ampliando tus conocimientos para integrar nuevas tecnologías y mejorar continuamente!

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

npm i svelte

npm i -D @babel/core @babel/polyfill @babel/preset-env babel-loader html-webpack-plugin svelte-loader webpack webpack-cli webpack-dev-server

Hay que crear el archivo .babelrc e insertarle esto:

{
  "presets": [
    "@babel/preset-env"
  ]
}
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*','.mjs','.js','.svelte']
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                } 
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader'
                }
            }
   
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

Aquí yo recomiendo el curso de webpack para que puedan entender las directivas y el curso sobre gestor de dependencias npm para que sean unos Pros en esta herramienta. 💪😎
🎉Sin olvidar claramente sus respectivas documentaciones:

Dentro del vídeo falto crear el archivo de configuración de babel, recuerden descargarlo en la sección de enlaces

Para los que vengan a futuro, para no tener errores de compatibilidad y comandos, donde seguro las librerias ya vayan avanzando, actualizandose y/o mutando, mi recomendación para poder seguir el curso igual que el profe, es agregar al package.json las dependencies y devDependencies con las versiones que utiliza el profesor, y correrlas sin instalar de la forma que hace el profe sino así:

  "dependencies": {
    "svelte": "^3.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }

Y luego correr el comando npm install, de esta forma instala las mismas versiones que el profesor a la hora de hacer el curso y debería andar todo correctamente sin tener problemas.

Mucha suerte con el curso 😃

Es importante crear el archivo .babelrc con lo siguiente:

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

Es necesario hacer todo esto con cada proyecto o se puede usar directamente : npx degit svelte/template nombre del proyecto?

Eso me agrada mucho, que se configure un proyecto desde el inicio, así se pone en practica el curso de webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte']
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclue: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}```

Importarte hacer el curso de webpack, será el próximo a tomar.

Al instalar las dependencias no me creó el archivo .babelrc
¿Lo tengo que crear manualmente?

Si despues de configurar el entorno de trabajo desean subir los cambios hasta ahora realizados de pugstagram en el repositorio, recuerden añadir el archivo .gitignore :

/node_modules/
/public/build/

.DS_Store

Ya que se corre el riesgo de subir node_modules por no existir el archivo .gitignore.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['*', '.mjs', '.js', '.svelte']
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    })
  ]
} 

Anotado el curso de Webpack!

Importante que si no corre tu codigo o note aparece algun problema con el babel loader o algo similar, primeor crear un archivo .babelrc.

👌

Nunca fue tan sencillo instalar Babel jajaja 😄