Uso de Parcel como agrupador para aplicaciones React | Programar Plus

0

Es posible que ya esté familiarizado con el paquete web para la gestión de activos en proyectos. Sin embargo, existe otra herramienta genial llamada Parcel, que es comparable al paquete web en el sentido de que ayuda con la agrupación de activos sin problemas. Donde Parcel realmente brilla es que no requiere ninguna configuración para comenzar a funcionar, mientras que otros paquetes a menudo requieren escribir un montón de código solo para comenzar. Además, Parcel es súper rápido cuando se ejecuta porque utiliza procesamiento multinúcleo donde otros trabajan con transformaciones complejas y pesadas.

Entonces, en pocas palabras, estamos analizando una serie de características y beneficios:

  • División de código mediante importaciones dinámicas
  • Manejo de activos para cualquier tipo de archivo, pero por supuesto para HTML, CSS y JavaScript
  • Reemplazo de módulo en caliente para actualizar elementos sin actualizar la página durante el desarrollo
  • Los errores en el código se resaltan cuando se registran, lo que facilita su localización y corrección
  • Variables ambientales para distinguir fácilmente entre desarrollo local y productivo
  • Un “modo de producción” que acelera la construcción al evitar pasos de construcción innecesarios

Con suerte, está comenzando a ver buenas razones para usar Parcel. Eso no quiere decir que deba usarse al 100% o todo el tiempo, sino que hay buenos casos en los que tiene mucho sentido.

En este artículo, veremos cómo configurar un proyecto React usando Parcel. Mientras estamos en eso, también veremos una alternativa para Create React App que podemos usar con Parcel para desarrollar aplicaciones React. El objetivo aquí es ver que hay otras formas de trabajar en React, usando Parcel como ejemplo.

Configurar un nuevo proyecto

Bien, lo primero que necesitamos es una carpeta de proyecto para trabajar localmente. Podemos crear una nueva carpeta y navegar a ella directamente desde la línea de comando:

mkdir csstricks-react-parcel && $_

A continuación, obtengamos nuestro obligatorio package.json archivo allí. Podemos hacer uso de npm o Yarn ejecutando uno de los siguientes:

## Using npm
npm init -y

## Using Yarn, which we'll continue with throughout the article
yarn init -y

Esto nos da una package.json archivo en nuestra carpeta de proyecto que contiene las configuraciones predeterminadas que necesitamos para trabajar localmente. Hablando de eso, el paquete de paquetes se puede instalar globalmente, pero para este tutorial, lo instalaremos localmente como una dependencia de desarrollo.

Necesitamos Babel cuando trabajamos en React, así que pongámonos en marcha:

yarn add parcel-bundler babel-preset-env babel-preset-react --dev

A continuación, instalamos React y ReactDOM …

yarn add react react-dom

… luego crea un babel.rc archivo y agréguele esto:

{
  "presets": ["env", "react"]
}

A continuación, creamos nuestra base App componente en un nuevo index.js Archivo. Aquí hay uno rápido que simplemente devuelve un título “Hola”:

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h2>Hello!</h2>
      </React.Fragment>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Necesitaremos un archivo HTML donde el App se montará el componente, así que creemos un index.html archivo dentro del src directorio. Nuevamente, aquí hay un shell bastante simple para trabajar:

<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">
    <title>Parcel React Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://css-tricks.com/using-parcel-as-a-bundler-for-react-applications/./index.js"></script>
  </body>
</html>

Usaremos el paquete Parcel que instalamos anteriormente. Para que eso funcione, necesitamos editar el start guión en package.json archivo para que se vea así:

"scripts": {
  "start": "NODE_ENV=development parcel src/index.html --open"
}

Finalmente, regresemos a la línea de comando y ejecutemos yarn start. La aplicación debería iniciarse y abrir una nueva ventana del navegador apuntando a http://localhost:1234/.

Trabajando con estilos

El paquete se envía con PostCSS listo para usar pero, si quisiéramos trabajar con otra cosa, podemos hacerlo por completo. Por ejemplo, podemos instalar node-sass para usar Sass en el proyecto:

yarn add --dev node-sass autoprefixer

Ya tenemos autoprefixer ya que es un complemento PostCSS, por lo que podemos configurarlo en el postcss bloque de package.json:

// ...
"postcss": {
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
      "flexbox": "no-2009"
    }
  }
}

Configurar un entorno de producción

Vamos a querer asegurarnos de que nuestro código y activos estén compilados para uso en producción, así que asegurémonos de decirle a nuestro proceso de compilación adónde irán. De nuevo, en package-json:

"scripts": {
  "start": "NODE_ENV=development parcel src/index.html --open",
  "build": "NODE_ENV=production parcel build dist/index.html --public-url ./"
}

Ejecutando el yarn run build ahora compilará la aplicación para producción y la enviará en el dist carpeta. Hay algunas opciones adicionales que podemos agregar para refinar un poco más las cosas si quisiéramos:

  • --out-dir directory-name: Esto es para usar otro directorio para los archivos de producción en lugar del predeterminado dist directorio.
  • --no-minify: La minificación está habilitada por defecto, pero podemos deshabilitarla con este comando.
  • --no-cache: Esto nos permite deshabilitar la caché del sistema de archivos.

💩 CRAP (Crear paquete de aplicación React)

Create React App Parcel (CRAP) es un paquete creado por Shawn Swyz Wang para ayudar a configurar rápidamente las aplicaciones de React para Parcel. De acuerdo con la documentación, podemos arrancar cualquier aplicación ejecutando esto:

npx create-react-app-parcel my-app

Eso creará los archivos y directorios que necesitamos para comenzar a trabajar. Luego, podemos migrar a la carpeta de la aplicación e iniciar el servidor.

cd my-app
yarn start

¡El paquete está listo!

Vale la pena explorar el paquete en su próxima aplicación React. El hecho de que no se requiera una configuración y que el tiempo del paquete esté súper optimizado hace que valga la pena considerar a Parcel en un proyecto futuro. Y, con más de 30.000 estrellas en GitHub, parece algo que está ganando terreno en la comunidad.

Recursos adicionales

  • Ejemplos de parcelas: ejemplos de parcelas que utilizan diversas herramientas y marcos.
  • Awesome Parcel: una lista seleccionada de increíbles recursos, bibliotecas, herramientas y modelos estándar de Parcel.

El código fuente de este tutorial está disponible en GitHub