Cómo incluir un archivo JS dentro de otro: 5 métodos que funcionan

«Arma tu código pieza por pieza»: por qué no puedes simplemente insertar un archivo JS dentro de otro

Cualquiera que haya escrito JavaScript por más de un par de semanas, tarde o temprano se topa con una pared: «¿Y cómo uso funciones de otro archivo? ¡No voy a copiarlas de un lado a otro!» El viejo y querido Stack Overflow lo sabe de primera mano: la pregunta "How do I include a JavaScript file in another JavaScript file?" recibe miles de visitas cada mes. Y es lógico: en proyectos reales, el código crece rápidamente y mantenerlo todo en un solo archivo es el camino al caos.

En este artículo, analizaremos 5 formas comprobadas de incluir un archivo JS dentro de otro. Desde métodos antiguos hasta estándares modernos. ¡Allá vamos!

Método 1: El clásico <script> en HTML

La forma más simple y prehistórica es simplemente agregar varias etiquetas <script> en tu archivo HTML. Pero hay un detalle: los archivos se cargan secuencialmente. Si tu main.js depende de utils.js, entonces utils.js debe estar arriba.

<!DOCTYPE html><html><head>    <script src="utils.js"></script>    <script src="main.js"></script></head><body>    ...</body></html>

Problema: Esto no es incluir un archivo JS dentro de otro archivo JS, sino simplemente un orden de carga. Si tienes 20 scripts, corres el riesgo de enredarte con las dependencias. Además, todas las variables y funciones se vuelven globales: ¡hola, conflictos de nombres!

Método 2: Módulos ES6 (estándar moderno)

A partir de ES6 (ECMAScript 2015), JavaScript incorporó un sistema de módulos nativo. Esta es la forma más correcta de incluir un archivo JS dentro de otro en proyectos modernos.

Exportación desde un archivo (math.js)

// math.jsexport function add(a, b) {    return a + b;}

export const PI = 3.14159;

export default function multiply(a, b) {    return a * b;}

Importación en otro archivo (app.js)

// app.jsimport multiply, { add, PI } from './math.js';

console.log(add(2, 3));      // 5console.log(PI);             // 3.14159console.log(multiply(4, 5)); // 20

Importante: Para que esto funcione en el navegador, debes agregar el atributo type="module" en el HTML:

<script type="module" src="app.js"></script>

Este método resuelve todos los problemas: aislamiento del código, dependencias claras, ausencia de variables globales. Ideal para aplicaciones web modernas.

Método 3: Node.js require (CommonJS)

Si programas para Node.js, el estándar es CommonJS con la función require(). Esta forma de incluir un archivo JS dentro de otro archivo JS se sigue utilizando en el desarrollo del lado del servidor (aunque los módulos ES6 ya han llegado también allí).

Exportación (utils.js)

// utils.jsfunction greet(name) {    return `¡Hola, ${name}!`;}

const secret = 'myPassword123';

module.exports = {    greet,    secret};

Importación (server.js)

// server.jsconst utils = require('./utils.js');

console.log(utils.greet('Alejandro')); // ¡Hola, Alejandro!console.log(utils.secret);          // myPassword123

Simple, confiable, funciona en cualquier lugar donde haya Node.js. Para navegadores, no; solo a través de empaquetadores (Webpack, Vite).

Método 4: Carga dinámica de scripts (creando una etiqueta script)

A veces es necesario incluir un archivo JS desde otro archivo JS directamente durante la ejecución. Por ejemplo, cuando cargas análisis o un plugin solo cuando es necesario. Para ello, puedes crear dinámicamente una etiqueta <script>.

// loadScript.jsfunction loadScript(src, callback) {    const script = document.createElement('script');    script.src = src;    script.onload =