"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Requiere importación Vs en JavaScript

Requiere importación Vs en JavaScript

Publicado el 2024-11-07
Navegar:420

require Vs import In JavaScript

Recuerdo que cuando comencé a codificar veía algunos archivos js usando require() para importar módulos y otros archivos usando import. Esto siempre me confundió porque no entendía realmente cuál era la diferencia o por qué había inconsistencia entre los proyectos. Si te preguntas lo mismo, ¡sigue leyendo!

¿Qué es CommonJS?

CommonJS es un conjunto de estándares utilizados para implementar módulos en JavaScript del lado del servidor, principalmente entornos Node.js. En este sistema, los módulos se cargan sincrónicamente, lo que significa que la ejecución del script se bloquea hasta que se carga el módulo. Esto lo convierte en un enfoque sencillo, pero la desventaja es un impacto en el rendimiento si intentas cargar varios módulos diferentes, ya que tendrían que cargarse uno tras otro antes de que se pueda ejecutar cualquier otra cosa.

Al usar CommonJS, usarías module.exports para exportar la funcionalidad y usar require() para importarla.

Aquí hay un ejemplo de cómo se vería eso en el código.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};
// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

¿Qué es ECMAScript (ES6)?

ES6, también conocido como ECMAScript, es una versión más nueva de JavaScript que se lanzó en 2015. Con esta versión llegó la capacidad de importar módulos de forma asincrónica utilizando las declaraciones de importación y exportación. Esto significa que el script que está ejecutando puede continuar ejecutándose mientras se carga el módulo, por lo que no habrá cuellos de botella. Esto también permite una eficiencia llamada agitación de árboles que cubriré en una publicación posterior, pero básicamente, esto significa que solo carga JavaScript desde un módulo que está usando y el código muerto (código que no se usa) no se carga. en el navegador. Todo esto es posible porque ES6 admite importaciones tanto estáticas como dinámicas.

Aquí está el mismo ejemplo anterior, pero esta vez usamos importación y exportación.

// In file multiply.js

export const multiply = (x, y) => x * y;
// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

Las principales diferencias: requiere importación frente a

require() es parte del sistema de módulos CommonJS, mientras que la importación es parte del sistema de módulos ES6. Verá require() utilizado en entornos Node.js para el desarrollo del lado del servidor, principalmente en proyectos heredados que aún no han adoptado ES6. Verá que la importación se utiliza tanto en el lado del servidor como en el desarrollo frontend, especialmente en proyectos más nuevos y con cualquiera de los marcos frontend como React o Vue.

¿Por qué importar es mejor que requerir?

Como mencionamos anteriormente, la importación es asincrónica, lo que puede conducir a un mejor rendimiento, especialmente en aplicaciones grandes. Además, dado que la importación se puede analizar estáticamente, herramientas como linters y empaquetadores pueden optimizar el código de manera más efectiva e implementar la vibración del árbol, lo que conduce a tamaños de paquetes más pequeños y tiempos de carga más rápidos. La sintaxis también es más fácil de leer que require(), lo que mejora la experiencia del desarrollador, ¡y todos queremos eso!

¿Cuándo usaría requerir importación Vs?

Usarías require() cuando:

  • Estás trabajando en un proyecto heredado de Node.js que se inició antes de que saliera ES6 y no se actualizó.

  • Necesita cargar módulos dinámicamente en tiempo de ejecución, como en un archivo de configuración, o si necesita cargar módulos condicionalmente.

Usarías importar cuando:

  • En cualquier otro momento, ya que este es el estándar ahora y es más eficiente.

Resumen

En general, se recomienda utilizar la importación siempre que sea posible, ya que proporciona más beneficios y es el sistema de módulos más nuevo y más ampliamente adoptado. Sin embargo, puede haber casos en los que require() siga siendo la mejor opción, según sus requisitos específicos y el entorno en el que esté trabajando.

Si este artículo te resultó útil, suscríbete a mi boletín, donde enviaré más contenido como este directamente a tu bandeja de entrada semanalmente.

Declaración de liberación Este artículo se reproduce en: https://dev.to/travislramos/require-vs-import-in-javascript-1ah4?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3