Crear una Librería Modular

Vamos a adentrarnos en el mundo de los Módulos ES6 y la construcción de una librería modular avanzada. Seguiremos estos pasos para guiarte desde el concepto hasta la implementación de una librería personalizada: 

 

Parte 1: Módulos ES6

Los módulos ES6 permiten dividir y estructurar tu código en varios archivos, lo que facilita la reutilización y el mantenimiento. Vamos a explorar cómo funcionan:

1. Uso de export

Se utiliza export para exponer funciones, objetos o valores de un archivo para que puedan ser usados en otros.

Ejemplo: Archivo utils.js

javascript

 // Exportación de una función
export function sumar(a, b) {
    return a + b;
}

// Exportación de una constante
export const PI = 3.14159;

// Exportación de una clase
export class Calculadora {
    static multiplicar(a, b) {
        return a * b;
    }
}

2. Uso de import

Con import puedes traer el contenido exportado desde otro archivo.

Ejemplo: Archivo main.js

javascript

 // Importar funciones específicas
import { sumar, PI } from './utils.js';

// Usar las funciones importadas
console.log(sumar(5, 10)); // 15
console.log(`El valor de PI es ${PI}`);

// Importar clases
import { Calculadora } from './utils.js';
console.log(Calculadora.multiplicar(3, 4)); // 12

3. Exportación e Importación por Defecto

También puedes exportar una sola función o valor como predeterminado.

Archivo math.js

javascript

 export default function dividir(a, b) {
    return a / b;
}

Archivo main.js

javascript

import dividir from './math.js';
console.log(dividir(10, 2)); // 5

Parte 2: Crear una Librería Modular con Utilidades Personalizadas

Vamos a construir una librería que incluye funciones estadísticas como cálculo de promedio, mediana y desviación estándar. Organizaremos las utilidades en módulos.

1. Estructura de Archivos

plaintext

 stats-library/ 
├──  src/ │  
├──  promedio.js │  
├──  mediana.js │  
├──  desviacionEstandar.js 
│  └──  index.js 
├──  package.json 
└──  README.md  

2. Implementación de Módulos

• Archivo promedio.js

javascript

 export function calcularPromedio(array) {
    const suma = array.reduce((acc, val) => acc + val, 0);
    return suma / array.length;
}
 

• Archivo mediana.js

javascript

export function calcularMediana(array) {
    const ordenado = [...array].sort((a, b) => a - b);
    const mitad = Math.floor(ordenado.length / 2);
    return ordenado.length % 2 === 0
        ? (ordenado[mitad - 1] + ordenado[mitad]) / 2
        : ordenado[mitad];
}

• Archivo desviacionEstandar.js

javascript

export function calcularDesviacionEstandar(array) {
    const promedio = array.reduce((acc, val) => acc + val, 0) / array.length;
    const variancia = array.reduce((acc, val) => acc + (val - promedio) ** 2, 0) / array.length;
    return Math.sqrt(variancia);
}

• Archivo index.js

javascript

export { calcularPromedio } from './promedio.js';
export { calcularMediana } from './mediana.js';
export { calcularDesviacionEstandar } from './desviacionEstandar.js';

Parte 3: Construcción de una Librería Reusable con Webpack o Vite

1. Configuración de Webpack

• Instala Webpack:

bash

 npm  install  webpack  webpack-cli  --save-dev  

• Crea un archivo de configuración webpack.config.js:

javascript

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'StatsLibrary',
        libraryTarget: 'umd',
    },
    mode: 'production',
};

• Compila la librería:

bash

 npx  webpack  

2. Usar la Librería en un Proyecto

Después de compilar, tu archivo bundle.js en la carpeta dist/ puede ser usado en cualquier proyecto. Ejemplo:

HTML

html

<script src="dist/bundle.js"></script>
<script>
    const numeros = [1, 2, 3, 4, 5];
    console.log(StatsLibrary.calcularPromedio(numeros)); // 3
</script>

Parte 4: Añade un README y Publica tu Librería

• Archivo README.md

markdown

  # Stats Library

Esta librería proporciona utilidades estadísticas para cálculos como promedio, mediana y desviación estándar.

## Instalación
```bash
npm install stats-library
 

Uso

javascript

 import { calcularPromedio } from 'stats-library';
console.log(calcularPromedio([1, 2, 3, 4, 5])); // 3
 

- **Publica en NPM**
Si deseas compartir tu librería con otros:
1. Asegúrate de tener una cuenta en [npmjs.com](https://www.npmjs.com/).
2. Ejecuta:
```bash
npm login
npm publish

Resumen

Acabamos de cubrir:

1. Conceptos básicos y avanzados de los módulos ES6 (import y export).

2. Creación de una librería modular con funciones estadísticas.

3. Uso de Webpack para empaquetar y distribuir tu librería.