Cómo configurar un proyecto React con Parcel

Introducción

ParcelJS se describe a sí mismo como un empaquetador de aplicaciones web increíblemente rápido y que no requiere configuración.

Parcel se basa en la premisa de que crear aplicaciones con paquetes de JavaScript podría ser más fácil. Webpack ofrece una mayor capacidad de configuración, pero puede haber casos de uso en los que no se requiera ese grado de configuración.

Aquí es donde entra en juego Parcel. Se promociona como una herramienta de paquete rápida que no requiere configuración: todo lo que necesita hacer es apuntarla al punto de entrada de su aplicación.

Parcel también ofrece las siguientes características:

• Tiempos de agrupación rápidos: Parcel tiene un tiempo de agrupación considerablemente más rápido que otras herramientas de agrupación disponibles. A continuación, se muestra una captura de pantalla de la página de Parcel en GitHub .

• Agrupamiento de activos: Parcel tiene soporte listo para usar para JS, CSS, HTML y activos de archivos.
• Transformaciones automáticas: todo su código se transforma automáticamente utilizando Babel, PostCSS y PostHTML.
• División de código: Parcel le permite dividir su paquete de salida mediante la sintaxis de importación dinámica ().
• Reemplazo de módulo en caliente (HMR): Parcel actualiza automáticamente los módulos en el navegador a medida que realiza cambios durante el desarrollo, sin necesidad de configuración.
• Registro de errores: Parcel imprime marcos de código resaltados de sintaxis cuando encuentra errores para ayudarlo a identificar el problema.

Otra cosa a tener en cuenta sobre Parcel es que permite a los desarrolladores utilizar un index.htmlarchivo como punto de entrada en lugar de módulos JS.

En este tutorial, configurará una aplicación web React con Parcel.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v14.4.0, npmv6.14.5, parcel-bundlerv1.12.4, reactv16.13.1 y react-domv16.13.1.

Paso 1: Cómo empezar a utilizar Parcel

Primero, crea un nuevo directorio de trabajo:

mkdir parcel-test

Luego, navegue hasta el nuevo directorio de trabajo:

cd parcel-test

E instale Parcel globalmente ejecutando el siguiente comando en su terminal:

npm install -g parcel-bundler

El siguiente paso es crear un package.jsonarchivo en el directorio. Para ello, ejecute el siguiente comando:

npm init -y

Esto genera un trabajo package.jsonpara usted:

paquete.json

{  "name": "parcel-test",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo "Error: no test specified""  exit 1""  }