Parcel es mi creador de proyectos favorito

Hoy hablaremos sobre los creadores de proyectos (agrupadores), herramientas que facilitan la vida de los desarrolladores. La esencia del trabajo de los bundlers es que toman el código JavaScript contenido en muchos archivos y lo empaquetan en uno o más archivos, ordenándolos y preparándolos para trabajar en los navegadores de cierta manera. Además, gracias a varios complementos (plug-ins) y cargadores, el código se puede minimizar, otros recursos (como archivos e imágenes CSS) se pueden empaquetar, además del código. Los paquetes le permiten usar preprocesadores, pueden dividir el código en fragmentos que se cargan cuando se necesitan. Pero sus capacidades no se limitan a esto. De hecho, estamos hablando del hecho de que ayudan a organizar el proceso de desarrollo.



Hay muchos paquetes. Por ejemplo, Browserify y webpack . Aunque estos creadores de proyectos son excelentes herramientas, personalmente me pareció difícil de configurar. ¿Dónde comenzar la configuración? Esta pregunta es especialmente relevante para los principiantes, para aquellos que pueden estar un poco asustados por algo como un "archivo de configuración".

Es por eso que generalmente uso el generador de proyectos Parcel . Me topé con este paquete por accidente cuando vi un video de entrenamiento en YouTube. Hubo consejos para acelerar el desarrollo. El ambiente de trabajo que se muestra en este video estaba muy relacionado con Parcel. Después de eso, decidí que debería probar este paquete.

Características del paquete

Lo que más me gusta de Parcel es que no requiere ninguna configuración. Así es: no necesita configurarlo. En este sentido, Parcel supera al paquete web , donde la configuración se puede dispersar en varios archivos y representar "hojas" de código completas. El desarrollador, al configurar el paquete web, puede haber tomado algo de los archivos de configuración de otros programadores. Es posible que la configuración se copie simplemente de otros proyectos. Está claro que la complejidad de la configuración depende del desarrollador, pero incluso cuando se configura un paquete web para un proyecto pequeño, debe usar un cierto conjunto de complementos e instalar ciertas opciones.

Es por eso que el uso de Parcel me parece un golpe de estado. Por ejemplo, si un desarrollador planea estilizar su proyecto usando SCSS o LESS, entonces puede, sin movimientos innecesarios, simplemente escribir el código apropiado. ¿Quieres usar las últimas funciones de JavaScript? Si es así, puede, sin pensar en nada, escribir código usando estas características. ¿Necesita un servidor para el desarrollo? El que usa Parcel tiene dicho servidor. De hecho, aquí apenas tocamos la punta del iceberg de las vastas capacidades de Parcel.

Parcel permite al programador, sin perder tiempo en nada secundario, simplemente tomar y comenzar a trabajar en el proyecto. Esta es la principal ventaja de usarlo como un paquete. Parcel, además, procesa archivos y construye proyectos muy rápidamente, utilizando las capacidades de los procesadores multi-core, mientras que otros paquetes, incluido webpack, realizan transformaciones de código más lentas y complejas que trabajan más lentamente.

Alcance del uso del paquete

Parcel, como cualquier otra herramienta, no es una herramienta universal, que sea igualmente aplicable siempre y en todas partes. Pero hay situaciones en las que Parcel es particularmente exitoso.

Ya he hablado sobre la rapidez con que Parcel le permite ingresar a un proyecto en funcionamiento. Gracias a esto, es ideal para trabajar en plazos ajustados y para crear prototipos. Estamos hablando de situaciones en las que el tiempo es costoso y cuando el objetivo de los desarrolladores es crear una aplicación que funcione lo más rápido posible.

Esto no significa que Parcel no sea adecuado para aplicaciones complejas o para proyectos en los que participan grandes equipos de programadores. El paquete funciona bien en tales condiciones. Sin embargo, me di cuenta de que los proyectos a gran escala pueden beneficiarse al ajustar manualmente los flujos de trabajo.

Para comparar un paquete que no necesita configuraciones con un paquete que necesita ser configurado es cómo comparar autos con una transmisión automática y manual. A veces, el conductor puede necesitar controlar más detalles y, a veces, menos.

Estaba trabajando en un sitio de varias páginas, en las profundidades de las cuales había mucho código JavaScript. El paquete funcionó bien en este proyecto. Me dio un servidor, compiló Sass en CSS, agregó prefijos de fabricantes de navegadores al código, si es necesario, y permitió, sin ninguna configuración, usar comandos de exportación e importación en archivos JavaScript. Todo esto facilitó enormemente mi trabajo en el proyecto.

Crear un sitio web simple usando Parcel

Arreglemos una prueba de manejo de paquetes. Esto nos permitirá ver que crear algo con este paquete es relativamente simple. Aquí está la página en la que trabajaremos.


Página del proyecto piloto

Vamos a crear un sitio simple que usará Sass y un poco de JavaScript. Mostraremos información sobre el día actual de la semana y una imagen aleatoria descargada de Unsplash Source en la página del sitio.

▍ Estructura básica del proyecto.

El proyecto, que se planea usar Parcel, no necesita una estructura especial de archivos y carpetas. No tiene que usar un cierto marco. La estructura básica del proyecto consistirá en tres archivos cuyos nombres hablan por sí mismos. Estos son index.html , style.scss e index.js . Puedes crearlos como quieras. Por ejemplo, usando la línea de comando:

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

Agregue un pequeño código de plantilla y marcado al archivo index.html en el que se basará la funcionalidad del proyecto:

 <!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><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" 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 aquí descargo la fuente web ( Lato ) de Google Fonts. El uso de fuentes descargables es voluntario. Aquí vale la pena prestar atención a la conexión de archivos CSS y JavaScript, y al código HTML del cuerpo del documento, que proporciona un lugar para generar información sobre el día de la semana, y un lugar para generar una imagen aleatoria desde Unsplash. En realidad, en este trabajo se completa la estructura básica del proyecto.

▍ Milagro de preparación rápida de Parcela para trabajar

Ahora, antes de pasar al estilo y las secuencias de comandos, intentemos ejecutar nuestro proyecto usando Parcel. No hay nada inusual en la instalación de Parcel:

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

Ahora inicialice el proyecto usando npm o yarn, lo que conducirá a la creación del archivo package.json :

 npm init -y #  yarn init -y 

Eso es todo! No es necesario realizar más ajustes. Todo lo que nos queda por hacer es decirle a Parcel qué archivo es el punto de entrada del proyecto. Esto permitirá que el bundler descubra lo que su servidor necesita dar a los clientes.

En nuestro caso, dicho archivo sería index.html :

 parcel index.html 

Después de que el servidor se inicie correctamente, se mostrará lo siguiente en la consola:

 Server running at http://localhost:1234 √ Built in 13ms. 

El servidor Parcel admite un arranque en caliente. El paquete reconstruye la aplicación cada vez que se guardan los cambios realizados en los archivos del proyecto.

Volvamos a la carpeta del proyecto. Aquí puede ver las nuevas carpetas y archivos creados por el paquete.


Nuevas carpetas y archivos creados por el paquete

Estamos particularmente interesados ​​en la carpeta dist . Contiene todo el código compilado, incluidos los mapas de código para CSS y JavaScript.

▍ Continuación del trabajo en el proyecto.

Vayamos style.scss archivo style.scss y style.scss cómo Parcel procesa el código Sass. Creé aquí varias variables utilizadas para almacenar los colores y el ancho del contenedor en el que se ubican los contenidos de la página:

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

Ahora, en el mismo archivo, agregue descripciones de estilo. Aquí puedes crear lo que quieras. Por ejemplo, hice esto:

 *, *::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;  } } 

Tan pronto como se guarde este archivo, Parcel se pondrá a trabajar, compilará todo y volverá a cargar la página en el navegador. No necesitamos hacer nada excepto guardar el archivo. El paquete, por defecto, monitorea los cambios de archivo.

Así es como se verá la página después del estilo.


Página estilizada

Solo queda mostrar aquí el nombre del día actual de la semana. En el curso de resolver este problema, utilizaremos los equipos de importación y exportación . Esto pondrá a prueba la capacidad de Parcel para trabajar con mecanismos JavaScript modernos.

Cree un archivo today.js y exporte de él una función que devuelva, utilizando una matriz con los nombres de los días de la semana, el nombre del día actual:

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

Tenga en cuenta que la función getDay primer día de la semana.

today.js función getDay de getDay . Ahora vayamos al archivo index.js e today.js esta función desde el archivo today.js . Esto hará que el archivo today.js se procese durante el ensamblaje del proyecto.

 import { getDay } from './today'; 

Parcel, sin ninguna configuración adicional, admite la sintaxis de los módulos ES6 , por lo que podemos usar los comandos de importación y exportación en los archivos JS.

Ahora solo tenemos que seleccionar el elemento <span> correspondiente y pasarle el valor devuelto por la función getDay . Agregue el siguiente código a index.html :

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

Después de guardar el archivo, el proyecto se reconstruirá, su página en el navegador cambiará.


Proyecto terminado

▍ Construir un proyecto para producción

Creamos la aplicación, y ahora queremos ponerla en algún lugar. Puede ser nuestro propio servidor, o algo así como Surge o Now , lo que hace que publicar proyectos web sea lo más simple posible. Al mismo tiempo, necesitamos que el código del proyecto sea compilado y minimizado.

Para llevar el proyecto a un formulario adecuado para su publicación, solo necesitamos un solo comando:

 parcel build index.html 

Después de ejecutar este comando, la consola obtendrá algo similar al que se muestra en la siguiente figura.


Asamblea de proyecto

Ahora tenemos a nuestra disposición los recursos de la aplicación, listos para implementarla en producción. Aquí puede leer los detalles sobre cómo Parcel recopila versiones de producción de proyectos y encontrar algunos consejos que mejorarán la eficiencia de trabajar con este paquete.

Resumen

Ya lo he dicho varias veces, pero lo repetiré nuevamente: Parcel es una gran herramienta. Le permite recopilar proyectos, compilar código, le da al servidor de desarrollo un programador, recursos de preprocesos y postprocesos, minimiza el código. Y sus habilidades no se limitan a esto. Aquí observamos probablemente un ejemplo extremadamente simple, pero espero que te haya permitido sentir las posibilidades de Parcel y te haya ayudado a aprender cómo usar este paquete en tus proyectos.

Estimados lectores! ¿Qué paquete utilizas?