El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Configuración de un Proyecto Node.js

Siguiente ►
►

En este tema, aprenderemos cómo configurar un proyecto Node.js utilizando Webpack. Este proceso incluye la instalación de dependencias necesarias, la configuración del archivo webpack.config.js, y la creación de scripts para la compilación y el desarrollo. Al final de este tema, tendrás un proyecto Node.js completamente funcional y optimizado con Webpack.

  1. Instalación de Dependencias

Primero, necesitamos instalar Node.js y npm (Node Package Manager) si aún no los tienes instalados. Puedes descargar Node.js desde nodejs.org.

Luego, crea un nuevo directorio para tu proyecto y navega a él en tu terminal:

mkdir my-nodejs-project
cd my-nodejs-project

Inicializa un nuevo proyecto npm:

npm init -y

Esto creará un archivo package.json con la configuración predeterminada.

Instalación de Webpack y Webpack CLI

Instalemos Webpack y Webpack CLI como dependencias de desarrollo:

npm install --save-dev webpack webpack-cli

Instalación de Babel

Para asegurarnos de que nuestro código sea compatible con versiones anteriores de Node.js, utilizaremos Babel. Instala Babel y sus presets:

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

  1. Configuración del Archivo webpack.config.js

Crea un archivo webpack.config.js en la raíz de tu proyecto. Este archivo contendrá la configuración de Webpack.

const path = require('path');

module.exports = {
  entry: './src/index.js', // Punto de entrada
  output: {
    path: path.resolve(__dirname, 'dist'), // Directorio de salida
    filename: 'bundle.js', // Nombre del archivo de salida
  },
  target: 'node', // Especifica que el entorno de destino es Node.js
  module: {
    rules: [
      {
        test: /\.js$/, // Aplica esta regla a archivos .js
        exclude: /node_modules/, // Excluye la carpeta node_modules
        use: {
          loader: 'babel-loader', // Usa babel-loader para transpilar el código
          options: {
            presets: ['@babel/preset-env'], // Usa el preset-env de Babel
          },
        },
      },
    ],
  },
  mode: 'development', // Modo de desarrollo
};

  1. Estructura del Proyecto

Crea la estructura básica del proyecto:

mkdir src
touch src/index.js

En src/index.js, escribe un simple código de ejemplo:

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}/`);
});

  1. Scripts de npm

Agrega scripts en tu package.json para facilitar la compilación y el desarrollo:

"scripts": {
  "build": "webpack",
  "start": "node dist/bundle.js"
}

  1. Compilación y Ejecución

Compila tu proyecto ejecutando:

npm run build

Esto generará un archivo bundle.js en la carpeta dist.

Para ejecutar tu servidor Node.js, usa:

npm start

Deberías ver el mensaje Server running at http://localhost:3000/ en tu terminal. Abre tu navegador y navega a http://localhost:3000/ para ver el mensaje "Hello, World!".

Ejercicio Práctico

Ejercicio

  1. Modifica el mensaje de respuesta del servidor para que incluya la fecha y hora actual.
  2. Configura Webpack para que soporte archivos .json y carga un archivo de configuración JSON en tu servidor.

Solución

  1. Modifica src/index.js:
const http = require('http');

const server = http.createServer((req, res) => {
  const now = new Date();
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`Hello, World!\nCurrent date and time: ${now}\n`);
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}/`);
});
  1. Instala el loader para archivos JSON y modifica webpack.config.js:
npm install --save-dev json-loader
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.json$/,
        use: 'json-loader',
      },
    ],
  },
  mode: 'development',
};

Crea un archivo src/config.json:

{
  "message": "Hello from JSON!"
}

Modifica src/index.js para cargar el archivo JSON:

const http = require('http');
const config = require('./config.json');

const server = http.createServer((req, res) => {
  const now = new Date();
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`${config.message}\nCurrent date and time: ${now}\n`);
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}/`);
});

Conclusión

En este tema, hemos configurado un proyecto Node.js utilizando Webpack, incluyendo la instalación de dependencias, la configuración del archivo webpack.config.js, y la creación de scripts de npm para la compilación y ejecución. También hemos realizado un ejercicio práctico para reforzar los conceptos aprendidos. Ahora estás listo para avanzar a temas más avanzados y optimizar tu proyecto Node.js con Webpack.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados