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
Introducción
Implementación de Aplicaciones Web con Svelte
Introducción a Svelte: Creación de Interfaces de Usuario Simples
Elementos básicos de Svelte
Primeros Pasos con Svelte: Instalación y Configuración Básica
Estilos CSS y Variables Globales en Componentes Svelte
Creación e Importación de Componentes en Svelt
Reactividad en Svelt: Creación de un Contador Interactivo
Componentes Svelte: Uso de Propiedades y Valores por Defecto
Condicionales y Dark Mode en Componentes Svelte
Estructuras de Control en Svelte: Iteración de Arreglos y Componentes
Eventos DOM y Binding de Datos en Svelte
Manejo del ciclo de vida de componentes en Svelte
Reactividad en Svelte: Uso de Stores para Componentes Compartidos
Configuración del proyecto
Creación de una Red Social con Svelte y Git
Configuración de Webpack para Proyectos Svelte
Creación de un Proyecto Web con HTML5 y Svelte paso a paso
Desarrollo de la aplicación
Estructuración de Proyectos Svelte: Componentes y Configuración Básica
Estructuración de Headers y Sidebars en Aplicaciones Web
Estructura de Componente Timeline en Svelte para Pubstagram
Estilos CSS para Aplicaciones con Svelte
Conexión de Aplicaciones Svelte a APIs Públicas
Integración de API para Comentarios en Pubstragram
Creación de un Modal para Compartir en Facebook con Svelte
"Implementación de Likes y Stores en Svelte para Pubsstagram"
Deployment
Despliegue de Aplicaciones con Netlify y GitHub
Desarrollo de Aplicaciones Web con Svelte y PUXTgram
Programación en Python para Principiantes
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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:
npm install svelte --save-dev
.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:
Instalación de Babel y sus componentes:
npm install @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev
Verificación de la instalación:
Con Webpack, el proceso puede parecer intimidante al comienzo, pero es esencial para automatizar el flujo de trabajo. Aquí te mostramos cómo configurarlo:
Instalación de Webpack y plugins:
npm install webpack webpack-cli html-webpack-plugin --save-dev
Creación del archivo de configuración:
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'
})
]
};
Es crucial aprender a adaptar la configuración según los requisitos del proyecto. Analizar y personalizar estos ajustes nos permite:
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
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 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?