Por qué Parcel se ha convertido en mi proveedor preferido para el desarrollo | Programar Plus

Hoy hablaremos de los paquetes de aplicaciones, herramientas que simplifican nuestras vidas como desarrolladores. En esencia, los empaquetadores eligen su código de varios archivos y ponen todo junto en uno o más archivos en un orden lógico que están compilados y listos para usar en un navegador. Además, a través de diferentes complementos y cargadores, puede uglificar el código, agrupar otros tipos de activos (como CSS e imágenes), usar preprocesadores, dividir código, etc. Ellos administran el flujo de trabajo de desarrollo.

Existen muchos paquetes, como Browserify y webpack. Si bien esas son excelentes opciones, personalmente las encuentro difíciles de configurar. Por donde empiezas Esto es especialmente cierto para los principiantes, donde un “archivo de configuración” puede dar un poco de miedo.

Por eso tiendo a buscar Parcel. Me topé con él accidentalmente mientras veía un tutorial en YouTube. El orador estaba hablando de consejos para un desarrollo más rápido y confiaba mucho en Parcel como parte de su flujo de trabajo. Decidí intentarlo yo mismo.

Que hace que Parcel sea especial

Lo que más me gusta de este paquete: no necesita ninguna configuración. Literalmente, ¡ninguno en absoluto! Compare eso con el paquete web donde la configuración se puede esparcir por varios archivos que contienen toneladas de código … que puede haber recogido de las configuraciones de otras personas o heredado de otros proyectos. Claro, la configuración es tan compleja como la crea, pero incluso un flujo de trabajo modesto requiere un conjunto de complementos y opciones.

Todos usamos diferentes herramientas para simplificar nuestro trabajo. Hay cosas como preprocesadores, posprocesadores, compiladores, transpiladores, etc. Se necesita tiempo para configurarlos y, a menudo, una cantidad bastante decente. ¿No preferirías dedicar ese tiempo a desarrollar?

Por eso Parcel parece una buena solución. ¿Quieres escribir tus estilos en SCSS o MENOS? ¡Hazlo! ¿Quiere utilizar la última sintaxis de JavaScript? Incluido. ¿Necesita un servidor para el desarrollo? Lo entendiste. Eso es apenas una pequeña parte de la gran lista de otras funciones que admite.

Parcel le permite simplemente comenzar a desarrollar. Esa es la mayor ventaja de usarlo como un paquete, junto con su compilación ultrarrápida que utiliza procesamiento multinúcleo donde otros paquetes, incluido el paquete web, funcionan con transformaciones complejas y pesadas.

Donde tiene sentido usar Parcel

Parcel, como cualquier herramienta, no es una píldora de oro diseñada como una solución única para todo. Tiene casos de uso donde brilla más.

Ya he mencionado lo rápido que es poner en marcha un proyecto. Eso lo hace ideal cuando se trabaja con prototipos y plazos ajustados, donde el tiempo es precioso y el objetivo es acceder al navegador lo más rápido posible.

Eso no quiere decir que no esté a la altura de la tarea de manejar aplicaciones o proyectos complejos donde muchos desarrolladores podrían estar tocando el código. Es muy capaz de eso. Sin embargo, me doy cuenta de que esos proyectos pueden beneficiarse muy bien de un flujo de trabajo elaborado a mano.

Es como la diferencia entre conducir un automóvil con transmisión automática y una palanca de cambios. A veces necesita el control adicional y otras veces no.

He estado trabajando en un sitio web comercial de varias páginas con un montón de JavaScript bajo el capó, y Parcel me está funcionando muy bien. Proporciona mi servidor, compila mi Sass en CSS, agrega prefijos de proveedor cuando es necesario y me permite usar la importación y exportación en mis archivos JavaScript listos para usar sin ninguna configuración. Todo esto me permitió poner en marcha mi proyecto con facilidad.

Creemos un sitio simple juntos usando Parcel

Tomemos Parcel para una prueba de manejo para ver cuán relativamente simple es hacer algo con él.

Vamos a crear una página simple que use Sass y un poco de JavaScript. Buscaremos el día actual de la semana y una imagen aleatoria de Unsplash Source.

La estructura básica

No hay ningún andamio que debamos usar ni un marco necesario para inicializar nuestro proyecto. En cambio, vamos a crear tres archivos que deberían parecer muy familiares: index.html, style.scss y index.js. Puede configurar eso manualmente o en la Terminal:

mkdir simple-site
cd simple-site
touch index.html && touch style.scss && touch index.js

Espolvoreamos un poco de marcado estándar y el esquema básico en nuestro archivo HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.scss">
  <title>Parcel Tutorial</title>
</head>
<body>
  <div class="container">
    <h1>Today is:</h1>
    <span class="today"></span>
    <h2>and the image of the day:</h2>
    <img src="https://source.unsplash.com/random/600x400" alt="unsplash random image">
</div>
<script src="index.js"></script>
</body>
</html>

Es posible que haya notado que estoy introduciendo una fuente web (Lato) de Google, que es totalmente opcional. De lo contrario, todo lo que estamos haciendo es vincular los archivos CSS y JavaScript y colocar el HTML básico que mostrará el día de la semana y un enlace de Unsplash que mostrará una imagen aleatoria. Esto es todo lo que realmente necesitamos para nuestra línea de base.

¡Maravíllate con la configuración rápida de Parcel!

Ejecutemos la aplicación usando Parcel como paquete antes de entrar en estilo y scripts. La instalación de Parcel es como cualquier cosa:

npm install -g parcel-bundler
# or
yarn global add parcel-bundler

También creemos un package.json archivo en caso de que necesitemos dependencias de desarrollo. Aquí también es donde Parcel incluirá todo lo que necesita para funcionar de inmediato.

npm init -y
# or
yarn init -y

¡Eso es! ¡No más configuración! Solo necesitamos decirle a Parcel qué archivo es el punto de entrada para el proyecto para que sepa dónde apuntar su servidor. Ese será nuestro archivo HTML:

parcel index.html

Si abrimos la consola, veremos algo como esto que indica que el servidor ya se está ejecutando:

Server running at http://localhost:1234

El servidor de Parcel admite la recarga en caliente y reconstruye la aplicación a medida que se guardan los cambios.

Ahora, volviendo a la carpeta de nuestro proyecto, veremos cosas adicionales que Parcel creó para nosotros:

Lo que es importante para nosotros aquí es el dist carpeta, que contiene todo nuestro código compilado, incluidos los mapas fuente para CSS y JavaScript.

¡Ahora todo lo que hacemos es construir!

Vamos a style.scss y vea cómo Parcel maneja Sass. Creé variables para almacenar algunos colores y un ancho para el contenedor que contiene nuestro contenido:

$container-size: 768px;
$bg: #000;
$text: #fff;
$primary-yellow: #f9f929;

Ahora, un poco de estilo, incluidos algunos conjuntos de reglas anidados. Puede hacer lo suyo, por supuesto, pero esto es lo que preparé para fines de demostración:

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  background: $bg;
  color: $text;
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  max-width: $container-size;
  text-align: center;

  h1 {
    display: inline-block;
    font-size: 36px;
  }

  span {
    color: $primary-yellow;
    font-size: 36px;
    margin-left: 10px;
  }
}

Una vez que guardamos, la magia de Parcel se activa y todo se compila y se vuelve a cargar en el navegador para nosotros. No se necesita ningún comando porque ya está observando los archivos en busca de cambios.

Esto es lo que tenemos hasta ahora:

Página web con fondo negro, un encabezado y una imagen.

Lo único que queda es mostrar el día actual de la semana. Usaremos importaciones y exportaciones para ver cómo Parcel nos permite usar JavaScript moderno.

Creemos un archivo llamado today.js e incluyen una función que informa el día actual de la semana a partir de una variedad de días:

export function getDay() {
  const today = new Date();
  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return daysArr[today.getDay()];
}

💡 Vale la pena recordar que el getDay La función devuelve el domingo como primer día de la semana.

Observe que estamos exportando el getDay función. Vayamos a nuestro index.js e impórtelo allí para que se incluya cuando se realice la compilación:

import { getDay } from './today';

Podemos importar / exportar archivos, porque Parcel admite la sintaxis del módulo ES6 desde el primer momento; nuevamente, ¡no se necesita configuración!

Lo único que queda es seleccionar el <span> elemento y pasar el valor del getDay función para ello:

const day = document.querySelector('.today');
day.innerHTML = getDay();

Veamos el resultado final:

Página web con fondo negro, encabezado que incluye el día de la semana y una imagen a continuación.

Lo último es construir para la producción.

Hemos creado la aplicación, pero queremos servirla en algún lugar, ya sea en su servidor personal o en una implementación de configuración cero como Surge o Now, y queremos ofrecer código compilado y minimizado.

Aquí está el único comando que necesitamos:

parcel build index.js

Salida de terminal después de una compilación exitosa.

Esto nos brinda todos los activos listos para la producción de la aplicación. Puede leer más sobre el modo de producto de Parcel para obtener algunos consejos y trucos para aprovechar al máximo su entorno.

Lo he dicho varias veces y lo diré de nuevo: Parcel es una gran herramienta. Empaqueta, compila, sirve, preprocesa y posprocesa, minimiza y uglifica, y más. Es posible que hayamos visto un ejemplo bastante simple, pero es de esperar que ahora tenga una idea decente de lo que ofrece Parcel y cómo podría comenzar a usarlo en sus propios proyectos.

Me interesa si ya está usando Parcel y, de ser así, cómo lo ha estado usando. ¿Ha descubierto que funciona mejor para algunas cosas más que para otras? ¿Descubriste algún truco ingenioso que lo haga aún más poderoso? ¡Házmelo saber en los comentarios!