Muy buenas, me llamo Miguel y esta vez les traigo este nuevo artículo.
En un proyecto típico de React, usamos Babel y Webpack. Babel se utiliza para convertir JSX y ES6 en código ES5 puro. Webpack se utiliza como paquete.
Será útil si tenemos una base de código para comenzar con cualquier proyecto de React. Eso es lo que estamos intentando hacer.
Índice
Instalar Node.js
y NPM
Necesitamos Node.js
y NPM
para descargar e instalar paquetes de Node como React, Webpack, etc. Podemos descargar e instalar desde su sitio oficial. Cuando instalamos Node.js
, automáticamente también se instala NPM
.
También podemos instalar Node.js
usando NVM
. Si usamos NVM
, es muy fácil cambiar entre múltiples versiones de Node.
Una vez que completamos la instalación de Node.js
y NPM
, podemos verificarlo escribiendo
> node --version v12.14.1> npm --version 6.13.4
Crear carpeta de proyecto
Creemos una nueva carpeta en cualquier lugar con nombre react-starter
. En la terminal, navegue hasta la carpeta del proyecto.
Package.json
En un proyecto de Node, archivo package.json
almacena la información sobre el proyecto como su nombre, licencia, scripts, dependencias y así sucesivamente. Podemos crear un archivo package.json
con valores predeterminados usando
npm init -y
Bandera -y
es para establecer valores predeterminados. Ahora el archivo package.json
se crea dentro de la carpeta del proyecto con los siguientes contenidos.
{ "name": "react-starter", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo "Error: no test specified" && exit 1" , "keywords": [], "author": "", "license": "ISC" }
Crear fuente
Estructuramos nuestra carpeta de proyecto de manera que todos los archivos de origen residan en una carpeta llamada src
.
Más tarde, cuando construyamos nuestro proyecto, los archivos desplegables se generarán y residirán en carpeta /dist
.
Entonces, primero crea una carpeta src
en la raíz. Ahora esta carpeta contendrá todo el código del componente React escrito usando JSX, estilos escritos usando SCSS y una plantilla HTML para renderizar los componentes React.
Cuando construimos el proyecto, todo el JSX se convertirá a JavaScript, todo el SCSS se convertirá a CSS puro, el HTML se actualizará con las referencias de archivo necesarias y se copiará a la carpeta /dist
.
HTML
de plantilla
Como punto de partida, creemos el archivo index.html
dentro de la carpeta src
. Este archivo es la plantilla HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Starter</title> </head> <body> <div id="root"></div> </body> </html>
Algunos puntos sobre esto archivo index.html
fuente. Los componentes de React a punto de crearse se renderizarán dentro de la etiqueta div
.
En este momento, no vemos ninguna referencia a ningún archivo JavaScript o CSS dentro de html. Estos se agregarán en el archivo html generado durante el paso de compilación. ¿Cómo? Veremos más tarde.
Reaccionar componente
Preparamos el HTML para mostrar nuestro componente React. Es hora de crear nuestro componente React. Para eso, crea index.js
presentar en la carpeta /src
. Pega el siguiente código.
import React from "react"; import ReactDOM from "react-dom";const App = () => return <h1>Hello React 16,Webpack 4 & Babel 7!</h1>; ;ReactDOM.render(<App />, document.getElementById("root"));
Entendamos lo que está sucediendo arriba. Importamos react
paquete para crear nuestro App
componente. Importamos react-dom
package para representar nuestro componente en html.
Podrías estar pensando que el
App
el componente no está usandoReact
en cualquier lugar para crear el componente.Entonces, ¿por qué agregar el
React
¿importar? Es porque, cuando JSX se convierte a JavaScript, el código tendrá una línea conReact.createElement
en eso. En ese momento, se requiere esta dependencia de React.
Pero no hemos agregado react
y los paquetes react-dom
a nuestro proyecto. Hagámoslo ahora.
npm install react react-dom --save
Ahora cumplimos con todas las dependencias para el archivo index.js
.
Webpack
Hasta ahora, nuestros códigos fuente están en carpeta /src
. No tenemos archivos que se puedan implementar en el servidor.
¿Qué pasa si copiamos ambos index.html
y index.js
a un servidor web como nginx
o Apache
? Simplemente hace que el index.html
en el navegador. Dado que no hay referencia a index.js
, se ignora.
Por lo tanto, necesitamos a alguien para unir ambos archivos y prepararlos para su implementación en la carpeta /dist
. Ese alguien es Webpack
.
Webpack
es un paquete. En términos simples, podemos decir que Webpack
envuelve todas las dependencias de un proyecto en un solo archivo de paquete y lo coloca en el carpeta /dist
.
Así es como podemos instalar Webpack
.
npm install --save-dev webpack
Una vez el paquete webpack
está instalado, necesitamos dar instrucciones al paquete web sobre qué hacer. Para eso necesitamos crear archivo webpack.config.js
en la raíz del proyecto. Webpack
siempre comprueba este archivo para comprender cómo agrupar el proyecto.
Configuración del paquete web
Crear el archivo webpack.config.js
en la raíz del proyecto. Pegue los siguientes contenidos.
var path = require('path');module.exports = entry: './src/index.js', output: path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } };
Ahora, cuando el paquete web lee este archivo de configuración, entiende que necesita comenzar a crear el archivo empaquetado desde el archivo index.js
dentro de la carpeta src
.
Después de crear el paquete, debe encontrar la carpeta dist
y coloque el archivo incluido y asígnele el nombre bundle.js
.
Ejecutar paquete web
Ahora es el momento de decirle a webpack que haga la tarea según el archivo de configuración. Para eso, creemos un script en el archivo package.json
. Dentro de nuestra corriente archivo package.json
, podemos ver:
"scripts": "test": "echo "Error: no test specified" && exit 1"
No necesitamos el comando test
ahora. En su lugar, reemplace esa línea con un comando start
que ejecuta webpack
. El bloque de scripts se ve así:
"scripts": "start": "webpack"
Ahora para ejecutar el script start
, vaya a la carpeta raíz del proyecto en una terminal y escriba lo siguiente.
npm start
Esperamos nuestro archivo bundle.js
para estar presente en carpeta /dist
. En cambio, estamos viendo un error en la consola.
One CLI for webpack must be installed. ... You need to install 'webpack-cli' to use webpack via CLI.
Lo que dice el mensaje de error es que, dado que queremos usar webpack
como una herramienta de línea de comandos, necesitamos instalar además webpack-cli
. Para eso, vaya a la terminal y escriba:
npm install webpack-cli --save-dev
Después de instalar webpack-cli
, intentemos con el comando npm start
de nuevo.
Cuando ejecutamos el comando, webpack
inicia el proceso de agrupación. Cuando se acercó, /src/index.js
, encontró algunos caracteres que no deberían encontrarse en un archivo JavaScript. Y ahora webpack
está arrojando un error diferente en la consola.
Module parse failed: Unexpected token (5:9) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Ahora bien, este error no tiene nada que ver con el paquete web. Básicamente, webpack
es un paquete. Está intentando crear un solo paquete.
En el camino, no puede procesar la sintaxis JSX dentro index.js
. Para comprender y convertir la sintaxis JSX a JavaScript, Babel está ahí para ayudar.
Babel
Babel
es un transpilador, lo que significa que puede convertir un tipo de código en un tipo diferente. En nuestro proyecto, usamos Babel para convertir JSX a JavaScript.
Babel puede ser independiente y convertir JSX a JavaScript. Pero, hemos dado el trabajo de empaquetar el archivo en Webpack
. Entonces, para que webpack
use Babel
para manejar archivos JSX, Webpack
requiere babel-loader
.
Los cargadores son como diferentes tipos de colección de municiones de
Webpack
.Webpack
podría usar unbabel-loader
para procesar un archivo JSX o un archivo ES6. Nuevamente, podría usar unsass-loader
entender un archivo SCSS.
Babel-loader
simplemente carga la funcionalidad de Babel
en el paquete web. No tiene otros poderes. Así que para babel-loader
para que funcione, necesitamos instalar el paquete básico de babel @babel/core
.
También necesitamos instalar @babel/preset-env @babel/preset-react
para convertir ES6 y JSX a ES5 respectivamente.
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
Ahora, todos los requisitos de babel están instalados. Pero no le hemos dicho a webpack
que use babel-loader
para analizar un archivo JavaScript. Agreguemos esa parte en el archivo webpack.config.js
. Agregue el siguiente código en el mismo nivel que le de llave entry
.
module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, se: { loader: "babel-loader" } } ] }
El código anterior establece una regla en el archivo de configuración del paquete web. La regla es aplicable para archivos .js
o .jsx
, excluyendo archivos en carpeta node_modules
.
Dado que esta regla está presente, siempre que el paquete web necesita agregar un archivo JavaScript o un archivo JSX al paquete, usa babel para transpilar el código y luego agregar la salida al paquete.
.babelrc
Webpack
llama a babel usando babel-loader
. Babel
necesita saber todas las capacidades que necesita tener o, en otras palabras, todos los ajustes preestablecidos que deben definirse.
Para eso, creamos un archivo .babelrc
en la raíz del proyecto y agregue el siguiente texto.
"presets": ["@babel/preset-env", "@babel/preset-react"]
Vayamos ahora a la terminal y corramos npm start
. Esta vez, el paquete web crea correctamente el bundle.js
y colócalo dentro carpeta /dist
. Podemos ver una salida como la siguiente en la consola.
> webpack Hash: 8e96f900f4a0ada759de Version: webpack 4.41.6 Time: 7229ms Built at: 02/18/2020 09:43:53 Asset Size Chunks Chunk Names bundle.js 1.08 MiB main [emitted] main Entrypoint main = bundle.js [./src/index.js] 255 bytes main [built] + 11 hidden modules
HtmlWebpackPlugin
Nuestro estado actual es que ahora tenemos un bundle.js
en la carpeta /dist
. No hay archivo HTML en la carpeta /dist
que se implementará.
Durante el proceso de compilación, queremos que Webpack
cree un archivo HTML en la carpeta /dist
para servir el archivo bundle.js
. HtmlWebpackPlugin
es un complemento de paquete web que puede ayudarnos aquí. Instálelo primero usando:
npm install --save-dev html-webpack-plugin
Una vez que está instalado, necesitamos decirle a Webpack
que lo use. Necesitamos modificar webpack.config.js
por lo mismo. Por favor, eche un vistazo al código a continuación para conocer las modificaciones que se deben realizar.
var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path');module.exports = entry: './src/index.js', //... module: /*...*/ , plugins: [new HtmlWebpackPlugin( template: './src/index.html' })] }
Aquí agregamos el HtmlWebpackPlugin
a plugins
matriz dentro webpack.config.js
. El complemento acepta una opción template
, donde podemos especificar el archivo html de la plantilla de origen que hemos creado.
Ahora cuando corremos npm start
, el paquete web crea ambos bundle.js
y index.html
dentro de la carpeta /dist
. El generado archivo index.html
contiene la referencia a bundle.js
.
Podemos abrir el archivo index.html
en el navegador para ver nuestro componente React renderizado.
WebpackDevServer
Nuestro proyecto está funcionando bien. Pero durante el proceso de desarrollo, cada vez que necesitamos ejecutar el comando webpack
y esperar a que se complete la compilación. Luego abra el archivo html en el navegador para ver el resultado. Esto lleva mucho tiempo.
Webpack
tiene su propio servidor web llamado webpack-dev-server
. Actualiza automáticamente el navegador con nuevos cambios si se cambia algún archivo en la fuente. Primero instalemos webpack-dev-server
.
npm i webpack-dev-server --save-dev
Ahora podemos actualizar los scripts en el archivo package.json
de la siguiente manera.
"scripts": "start": "webpack-dev-server --open --hot", "build": "webpack" }
En el script start
, en lugar de construir el proyecto, estamos sirviendo directamente la salida en el navegador. webpack-dev-server
puede usar webpack
internamente y almacenar bundle.js
e index.html
en la memoria.
Luego sirva el archivo html directamente desde la memoria. No creará un archivo físico en carpeta /dist
.
Bandera --open
es abrir el navegador predeterminado automáticamente. --hot
es establecer una vigilancia para los cambios de archivos y recarga automáticamente el navegador cuando ocurre un cambio.
Correr npm start
en la terminal.
Podemos ver webpack-dev-server
sirviendo la salida en un navegador. Podemos ir a /src/index.js
y realizar modificaciones en el componente React. Tan pronto como guardamos el archivo, la salida en el navegador se actualiza. Así es como webpack-dev-server
facilita el desarrollo.
Resumen
Ahora tenemos una base de código para comenzar a probar cualquier proyecto de React. Esto es solo un comienzo. Se puede mejorar mucho antes de pasar a la producción real. A través de este curso, aprendimos que:
- Nosotros necesitamos
Node.js
yNPM
para instalar y ejecutar paquetes usados en nuestro proyecto. - El archivo
package.json
almacena las dependencias del proyecto. - Podemos crear una estructura de carpetas simple y legible usando
/src
y/dist
para distinguir entre nuestros archivos fuente y archivos implementables. -
Webpack
es un paquete que crea un archivo de paquete único que contiene todas las dependencias de nuestro proyecto. - Todas las configuraciones necesarias para el paquete web están escritas en un archivo
webpack.config.js
en la raíz del proyecto. - Para ejecutar
webpack
comando en la línea de comando, necesitamos instalar el paquetewebpack-cli
. -
Babel
se puede usar con webpack usandobabel-loader
. - Especificamos los ajustes preestablecidos utilizados por babel dentro archivo
.babelrc
que se encuentra en la raíz del proyecto. -
HtmlWebpackPlugin
es un complemento de paquete web que puede crear dinámicamente nuestro archivo html desplegable con referencia al archivobundle.js
. - Durante el proceso de desarrollo, podemos hacer uso de
WebpackDevServer
para servir nuestro archivo de salida en un navegador y actualizar automáticamente el navegador cuando se produce un cambio en el archivo. Esto se llama recarga en caliente.
Gracias por leer este artículo.
Añadir comentario