Introduccion

1

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

2

Módulos y empaquetadores en JavaScript: fundamentos esenciales

3

Empaquetadores de Módulos en JavaScript: Webpack, Parcel, Sbuild y Más

4

Empaquetadores de Módulos JavaScript: Webpack y Alternativas

Webpack

5

Configuración y Uso de Webpack para Proyectos Web

6

Configuración de Webpack para Aplicación Web Dinámica

7

Creación de una Landing Page con JavaScript y Tailwind CSS

8

Manipulación del DOM con JavaScript: Creación de Funciones y Templates

9

Configuración y despliegue de aplicaciones web con Webpack y GitHub Pages

Parcel

10

Creación de Proyectos Web con Parcel y Fake API de Platzi

11

Creación de una Aplicación Web con Fake API y Parcel

12

Creación de SPA con Vanilla JavaScript y Parcel

13

Configuración y Uso de Parcel para Proyectos Web

ESBuild

14

Configuración de Proyectos React y TypeScript con SBuild

15

Desarrollo de Aplicaciones con React y TypeScript: Primeros Pasos

16

Integración de UseState y UseCallback en React con SBuild

17

Configuración de Servidor Local con sbuild en JavaScript

Rollup

18

Configuración de Proyectos con Roloop y Plugins Avanzados

19

Configuración de Plugins en Rollup para Optimización de Proyectos

20

Construcción de Aplicación Web con JavaScript y Fake API

21

Instalación y configuración de DevServer con Rollup

Vite

22

Configuración y uso de herramientas de empaquetado en JavaScript

Conclusiones

23

Empaquetadores JavaScript: Ventajas y Desventajas

No tienes acceso a esta clase

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

Configuración y uso de herramientas de empaquetado en JavaScript

22/23
Recursos

¿Qué herramienta podría revolucionar el entorno de empaquetadores?

Platzi ofrece educación profesional efectiva, y uno de sus recursos trata sobre una poderosa herramienta para empaquetadores. Se trata de un sistema que combina tecnología avanzada y ofrece una serie de recursos automatizados listos para usar. Esta herramienta no solo proporciona un rendimiento óptimo en la optimización de proyectos, sino que también ha generado una norma que mejora nuestros desarrollos, siendo adoptada por varios proyectos importantes en producción.

¿Cuáles son las tecnologías y opciones que se integran?

La herramienta permite trabajar con un entorno local de desarrollo, frameworks y librerías modernas, y es compatible con una API totalmente funcional. Lo mejor es que ofrece soporte para plugins sin importar el framework usado, siempre que sea JavaScript. En sus opciones, podemos elegir entre:

  • Manila: JavaScript puro.
  • Frameworks populares: Vue, React, Preact (versión más ligera de React), LitElement y Svelte.
  • TypeScript: Opciones adaptadas tanto para JavaScript como TypeScript.

¿Cómo iniciar un proyecto con esta herramienta?

Iniciar un proyecto es sencillo gracias a los comandos que simplifican la configuración inicial. Aquí te dejamos los pasos clave:

  1. Terminal: Copia el comando básico en tu terminal para iniciar un nuevo proyecto.
  2. Selección del proyecto: Decide el framework o lenguaje que usarás (por ejemplo, Svelte con TypeScript).
  3. Configuración del proyecto: Nombrar el proyecto y esperar la instalación de las dependencias.

Con todo listo, se puede abrir en Visual Studio Code donde verás una estructura de archivos completa, listos para personalizar y empezar el desarrollo.

¿Qué contiene la estructura del proyecto?

La estructura del proyecto está preconfigurada para maximizar la eficiencia durante el ciclo de vida del desarrollo. Aquí se destacan algunos elementos clave:

  • Visual Studio Code: Configuraciones apropiadas.
  • No Modules: Gestión adecuada de las dependencias.
  • Archivos base: Main.ts, variaciones de entorno, y el archivo de aplicación de Svelte.
  • Scripts y configuraciones: Ya configurados en el archivo package.json.

¿Cómo ejecutar y compilar el proyecto?

Una vez listo el proyecto, puedes ejecutarlo e iniciar el entorno de desarrollo local utilizando:

npm run dev

Este comando lanzará la aplicación en el puerto 3000, accesible desde localhost. Al ejecutar:

npm run build

La herramienta compilará la aplicación, generando archivos esenciales para la puesta en producción, incluyendo archivos minificados y optimizados.

¿Por qué es importante elegir bien las herramientas?

Usar la herramienta correcta hace una gran diferencia. Antes de construir, se recomienda leer la documentación y explorar plugins y mejoras. La elección de tecnología puede influir en:

  • La eficiencia del proceso de desarrollo.
  • La capacidad de escalado del proyecto.
  • La integración con otras herramientas y recursos externos.

Explora y experimenta para encontrar la fórmula ideal que te permitirá llevar tus proyectos al siguiente nivel. ¡Sigue motivado y nunca dejes de aprender!

Aportes 11

Preguntas 1

Ordenar por:

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

Creo que me quedaré con vite para proyectos medianos / grandes, y Rollup se me hizo interesante para optimizar proyectos con vanilla JavaScript

Que impresionante la facilidad que da Vite, Definitivamente seguiré con el curso del mismo

Vite está muy bueno por la facilidad de uso que tiene y por su velocidad al completar procesos

Desde que conocí Vite con el curso de Diana Martínez me encantó su facilidad y rapidez. Lo amo

Me encanta Vite

Me gusta Vite, aunque la mayoria de los trabajos piden conocimiento en webpack, quizas esto cambie con el tiempo.

Para que les aparezca en gh-pages recomiendo:
agregar esto en vite.config.ts: base: ‘/nombre-repositorio/’,

quedaria así:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/nombre-de-su-repositorio-de-github/',
  plugins: [svelte()],
})

y modificar un poco el package.json así:

    "deploy": "vite build && gh-pages -d dist",
    "predeploy": "rm -rf dist"

ya el resto lo conocen para publicar en gh-pages… good luck!

Vite usa rollup y ESBuild por detrás, de ahí su poder! 😅

Al parecer todos dicen Vite entonces…

Vite ⚡