Configure su aplicación React con Webpack 4, Babel y un servidor Nodejs (PARTE 1)

Hoy voy a explicar cómo uso babel para configurar un proyecto en enable ES6 cuando trabajo en node, y cómo se puede usar webpack cuando trabajo con react.

En esta aplicación de configuración, obviamente necesitaríamos tener un nodo instalado junto con npm (o yarn); la instalación de esto está más allá del alcance de este tutorial. Para instalar nodejs sigue el enlace a este tutorial Como instalar nodejs.

Para verificar que tiene node y npm instalados, ejecute este comando en su terminal. node -v, npm -v

A continuación, crearemos un proyecto vacío para esta aplicación de configuración y navegaremos hasta él.

mkdir setup_application
cd setup_application

A continuación utilizaremos el npm init comando para crear un archivo package.json para su aplicación. Este comando le solicita una serie de cosas, incluido el nombre y la versión de su aplicación y el nombre del archivo de punto de entrada inicial (de manera predeterminada, es index.js). Por ahora, solo acepte los valores predeterminados.
Para un uso de configuración rápida

npm init -y

Si muestra el archivo package.json cat package.jsonverá los valores predeterminados que aceptó, terminando con la licencia.

{
  "name": "setup_application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

A continuación instalaremos Expresar en la aplicación.

npm install express --save

A continuación, crearemos un archivo de entrada donde configuraremos nuestro servidor express en el puerto para escuchar 8000.

const express = require('express');
const path = require('path');

const app = express();

app.get('*', (req, res) => {
  return res.send('Welcome to our setup application');
});

const { log } = console;

const PORT = 8000;

app.listen(PORT, () => {
  log('Server started on port: ', PORT);
});

Configuración de Babel

Babel le permite escribir su código en la versión de JavaScript ES6 (ES2015) y posteriores, que aún no son compatibles con la mayoría de los navegadores. Con Babel, el código se volverá a transpilar a JavaScript estándar para que todos los navegadores, sin tener implementadas todas las funciones de JavaScript ES6 y posteriores, puedan interpretarlo. Para que Babel funcione, debe instalar dos de sus dependencias principales.

npm install --save-dev @babel/core @babel/preset-env

Similar Posts

Leave a Reply

Your email address will not be published.