Usando Babel y Webpack para configurar un proyecto React desde cero

Hay muchas herramientas disponibles para preparar el entorno para el desarrollo de React. Por ejemplo, nuestro tutorial React utiliza la herramienta create-react-app para crear un proyecto de plantilla que contiene todo lo que necesita para desarrollar aplicaciones React. El autor del artículo, cuya traducción publicamos hoy, quiere hablar sobre cómo configurar de forma independiente el entorno para desarrollar proyectos de React utilizando Babel y Webpack. Estas herramientas también se utilizan en proyectos creados con las herramientas create-react-app, y creemos que cualquiera que estudie el desarrollo de React estará interesado en conocerlos y la metodología para crear proyectos de React a un nivel más profundo. Es decir, hablaremos sobre cómo configurar Webpack para que esta herramienta use Babel para compilar código JSX en código JavaScript, y cómo configurar el servidor utilizado para desarrollar proyectos React.

Paquete web

Webpack se utiliza para compilar módulos JavaScript. Esta herramienta a menudo se llama un "paquete" (de paquete) o "generador de módulos". Después de instalarlo , puede trabajar con él utilizando la interfaz de línea de comandos o su API . Si no está familiarizado con Webpack, se recomienda que lea sobre los principios básicos de su funcionamiento y vea su comparación con otros constructores de módulos. Así es como se ve Webpack a un alto nivel.


Webpack work

Webpack toma todo de lo que depende el proyecto y lo convierte en recursos estáticos que pueden transferirse al cliente. El empaquetado de aplicaciones es muy importante, ya que la mayoría de los navegadores limitan la capacidad de descargar recursos simultáneamente. Además, le permite ahorrar tráfico enviando al cliente solo lo que necesita. En particular, Webpack utiliza una memoria caché interna, debido a que los módulos se descargan al cliente solo una vez, lo que finalmente lleva a una carga más rápida de los sitios.

Babel

Babel es un transpilador, que se utiliza principalmente para convertir construcciones adoptadas en versiones recientes del estándar ECMAScript en un formato que sea comprensible para los navegadores modernos y no para los últimos navegadores y otros entornos en los que se puede ejecutar JavaScript. Babel, además, puede convertir a JavaScript y código JSX usando @ babel / preset-react .


Babel

Gracias a Babel, nosotros, al desarrollar aplicaciones React, podemos usar JSX. Por ejemplo, aquí está el código que usa JSX:

import React from "react"; function App(){ return(  <div>     <b>Hello world!</b>  </div> ) } export default App; 

Tal código se ve ordenado, es claro, es fácil de leer y editar. Al mirarlo, puede comprender de inmediato que describe un componente que devuelve un elemento <div> que contiene el texto Hello world! en negrita Y aquí hay un ejemplo de código que hace lo mismo en el que JSX no se usa:

 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement(   "div",   null,   _react2.default.createElement(     "b",     null,     "Hello world!"   ) ); } exports.default = App; 

Las ventajas del primer ejemplo sobre el segundo son obvias.

Prerrequisitos

Para configurar un proyecto de aplicación React, necesitaremos los siguientes módulos npm.

• reaccionar - Reaccionar biblioteca.
• react-dom es una biblioteca que nos ayudará a usar las capacidades de React en el navegador.
• babel / core - Transpilación JSX en JS.
• babel / preset-env: crea código adecuado para navegadores antiguos.
• babel / preset-react: configura el transpiler para que funcione con el código React.
• babel-loader: configure Webpack para que funcione con Babel.
• css-loader: configuración de Webpack para trabajar con CSS.
• webpack - montaje de módulos.
• webpack-cli: trabaje con Webpack desde la línea de comandos.
• cargador de estilo: carga todo el código CSS utilizado en el encabezado del archivo HTML.
• webpack-dev-server: configuración de un servidor de desarrollo.

Ahora cree, en la carpeta react-scratch , un nuevo proyecto usando npm ( npm init ) e instale algunos de los paquetes anteriores con el siguiente comando:

 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server 

El punto de entrada al programa será el archivo index.js , que está contenido en la carpeta src ubicada en el directorio raíz del proyecto. La estructura de este proyecto se muestra a continuación. Algunos archivos y carpetas se crean automáticamente, algunos necesitará crearlos usted mismo.


Estructura del proyecto

El proyecto terminado, que trataremos aquí, se puede encontrar en este repositorio.

La carpeta de component contendrá componentes del proyecto (en nuestro caso, aquí solo hay un componente). En la carpeta dist , en el archivo main.js , se main.js el código compilado y index.html es, como ya se mencionó, el archivo HTML principal de nuestra aplicación.

Configuración de paquete web

Webpack se puede configurar de muchas maneras. En particular, la configuración de esta herramienta puede tomar la forma de argumentos de línea de comandos o estar presente en el proyecto como un archivo de configuración con el nombre webpack.config.js . En él, debe describir y exportar el objeto que contiene la configuración. Comenzaremos a configurar este archivo con una descripción del objeto que se ve así (lo consideraremos en partes y a continuación le daremos su código completo):

 { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, } 

La propiedad de entry establece el archivo principal con el código fuente del proyecto. El valor de la propiedad de mode indica el tipo de entorno para compilar (en nuestro caso, este es el entorno de development ) y dónde colocar el archivo compilado.

Proyecto de trabajo

Coloque el siguiente código en el archivo index.html de nuestro proyecto, ubicado en la carpeta dist :

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head>   <meta charset="utf-8">   <title>React From Scratch</title> </head> <body>   <div id="root">   </div> </body> <script type="text/javascript" src="main.js"> </script> </html> 

Presta atención a la etiqueta de script presente en este archivo. Apunta al archivo main.js , que se obtendrá durante la compilación del proyecto. Utilizaremos el elemento <div> con el identificador root para mostrar la aplicación React.

Ahora instale los paquetes react y react-dom:

 npm install react react-dom 

Agregue el siguiente código a index.js :

 import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root")); 

Este es el código estándar para dichos archivos de aplicación React. Aquí conectamos las bibliotecas, conectamos el archivo componente y mostramos la aplicación en la <div> con el identificador root .

Aquí está el código para el archivo app.component.js :

 import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() {   return <div className={s.intro}>Hello World</div>; } } export default MyComponent; 

Aquí está el código para el archivo app.component.css :

 .intro { background-color: yellow; } 

Configurar Babel

Babel es un transportista con gran potencial. En particular, puede convertir MENOS a CSS, JSX a JS, TypeScript a JS. Usaremos solo dos configuraciones con él: react y env (también se denominan "presets"). Babel se puede configurar de diferentes maneras, en particular, estamos hablando de herramientas de línea de comandos, sobre un archivo de configuración especial, sobre el archivo package.json estándar. Estamos satisfechos con la última opción. Agregue la siguiente sección a package.json :

 "babel": {   "presets": [     "@babel/env",     "@babel/react"   ] } 

Gracias a esta configuración, Babel sabrá qué preajustes necesita usar. Ahora configure Webpack para usar Babel.

Configurar Webpack para trabajar con Babel

Aquí usaremos la biblioteca babel-loader, que le permite usar Babel con Webpack. De hecho, el punto es que Babel podrá interceptar y procesar archivos antes de que Webpack los procese.

▍JS archivos

Estas son las reglas sobre el trabajo con archivos JS (este código irá al archivo webpack.config.js ), representan una de las propiedades del objeto de configuración exportado por este archivo:

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },   ] } 

Una matriz de reglas se almacena en la propiedad de reglas del objeto representado aquí, según el cual se debe procesar el archivo especificado por la expresión regular descrita en la propiedad de test . En este caso, la regla se aplicará a todos los archivos con las extensiones .m y .js , y no queremos node_modules archivos de la carpeta node_modules y bower_components . Además, aquí indicamos que queremos usar babel-loader. Después de eso, nuestros archivos JS serán procesados ​​por Babel primero y luego empaquetados usando Webpack.

▍ archivos CSS

Agregue la configuración para procesar archivos CSS a la matriz de rules del objeto del module :

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },  ] } 

Resolveremos la tarea de procesar archivos CSS usando style-loader y css-loader. La propiedad use puede aceptar una matriz de objetos o cadenas. Los cargadores se llaman, comenzando desde el último, por lo que nuestros archivos se procesarán primero con css-loader. Configuramos esta herramienta escribiendo true en la propiedad de modules del objeto de options . Gracias a esto, los estilos CSS se aplicarán solo a los componentes en los que se importan. Css-loader permitirá importar comandos en archivos CSS, después de lo cual Style-Loader agregará lo que resulta en forma de una etiqueta de style en la sección <head> de la página:

 <style> <--  css --> </style> 

▍Recursos estáticos

Continuaremos trabajando en el objeto de configuración del module , describiendo las reglas para procesar recursos estáticos en él:

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] } 

Si el sistema encuentra un archivo con la extensión PNG, SVG, JPG o GIF, se utilizará el cargador de archivos para procesar dicho archivo. Procesar dichos archivos es importante para la preparación y optimización adecuadas del proyecto.

Configurar un servidor de desarrollo

Ahora, en el archivo webpack.config.js , configure el servidor de desarrollo:

 devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true }, 

La propiedad contentBase devServer configuración contentBase apunta a la carpeta en la que se encuentran nuestros recursos y el archivo index.html . La propiedad port permite especificar el puerto en el que escuchará el servidor. La propiedad watchContentBase permite monitorear los cambios a los archivos en la carpeta especificada por la propiedad contentBase .

Aquí está el código completo para el archivo webpack.config.js :

 const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true }, module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] } }; 

Ahora agregaremos al package.json , en la sección de scripts , el comando para iniciar el servidor de desarrollo y el comando para comenzar a construir el proyecto:

 "scripts": {   "dev": "webpack-dev-server",   "start": "webpack" }, 

Ahora todo está listo para iniciar el servidor de desarrollo con el siguiente comando:

 npm run dev 

Si ahora va a la dirección http: // localhost: 9000 , puede ver la página de nuestro proyecto.


Página del proyecto en el navegador

Para construir un proyecto, use el siguiente comando:

 npm run start 

Después de eso, puede abrir el archivo index.html en un navegador y ver lo mismo que puede ver al iniciar el servidor de desarrollo y dirigirse a la dirección http: // localhost: 9000 .

Resumen

Este artículo proporciona una descripción general de la configuración de Webpack y Babel para su uso en proyectos React. De hecho, se pueden crear configuraciones mucho más complejas en la base que hemos desarmado hoy. Por ejemplo, en lugar de CSS, puede usar MENOS, en lugar de JS normal, escribir en TypeScript. Si es necesario, puede, por ejemplo, configurar la minificación de archivos y mucho más. Por supuesto, si hoy tuvo su primer contacto con el proceso de configuración de proyectos de React por su cuenta, puede parecerle que todo esto es muy complicado y es mucho más fácil usar una plantilla preparada. Sin embargo, después de descubrirlo un poco, se dará cuenta de que un ligero aumento en la complejidad de la configuración le da más libertad, lo que le permite personalizar sus proyectos tal como lo necesita, sin depender completamente de algunas soluciones "estándar" y reducir su dependencia de ellos.

Estimados lectores! ¿Qué enfoque utiliza con más frecuencia al preparar su entorno de trabajo para los proyectos React?