¿Cómo incluyo un archivo JavaScript en otro archivo JavaScript?

Las versiones antiguas de JavaScript no importaban, incluían ni requerían, por lo que se han desarrollado muchos enfoques diferentes para este problema.

Pero desde 2015 (ES6), JavaScript tiene el estándar de módulos ES6 para importar módulos en Node.js, que también es compatible con la mayoría de los navegadores modernos .

Para lograr compatibilidad con navegadores más antiguos, se pueden utilizar herramientas de compilación como Webpack y Rollup y/o herramientas de transpilación como Babel .

Módulos ES6

Los módulos ECMAScript (ES6) han sido compatibles con Node.js desde v8.5, con la --experimental-modulesbandera, y desde al menos Node.js v13.8.0 sin la bandera. Para habilitar "ESM" (en comparación con el sistema de módulos de estilo CommonJS anterior de Node.js ["CJS"]), puede usar "type": "module"o package.jsonasignar a los archivos la extensión .mjs. (De manera similar, los módulos escritos con el módulo CJS anterior de Node.js se pueden nombrar .cjssi su valor predeterminado es ESM).

Usando package.json:

{
    "type": "module"
}

Entonces module.js:

export function hello() {
  return "Hello";
}

Entonces main.js:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

Usando .mjs, tendrías module.mjs:

export function hello() {
  return "Hello";
}

Entonces main.mjs:

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";

Módulos ECMAScript en navegadores

Los navegadores han admitido la carga de módulos ECMAScript directamente (no se requieren herramientas como Webpack) desde Safari 10.1, Chrome 61, Firefox 60 y Edge 16. Consulte el soporte actual en caniuse . No es necesario utilizar .mjsla extensión de Node.js; Los navegadores ignoran por completo las extensiones de archivos en los módulos/scripts.

<script type="module">
  import { hello } from './hello.mjs'; // Or the extension could be just `.js`
  hello('world');
</script>

// hello.mjs -- or the extension could be just `.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Leer más en https://jakearchibald.com/2017/es-modules-in-browsers/

Importaciones dinámicas en navegadores

Las importaciones dinámicas permiten que el script cargue otros scripts según sea necesario:

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Lea más en https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js requiere

El estilo de módulo CJS más antiguo, todavía ampliamente utilizado en Node.js, es module.exports/require system.

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

Hay otras formas de que JavaScript incluya contenidos JavaScript externos en navegadores que no requieren preprocesamiento.

Cargando AJAX

Puede cargar un script adicional con una llamada AJAX y luego usarlo evalpara ejecutarlo. Esta es la forma más sencilla, pero está limitada a su dominio debido al modelo de seguridad de la zona de pruebas de JavaScript. El uso evaltambién abre la puerta a errores, hackeos y problemas de seguridad.

Recuperar carga

Al igual que las importaciones dinámicas, puede cargar uno o varios scripts con una fetchllamada mediante promesas para controlar el orden de ejecución de las dependencias de los scripts mediante la biblioteca Fetch Inject :

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Cargando jQuery

La biblioteca jQuery proporciona funcionalidad de carga en una línea :

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Carga de secuencias de comandos dinámicas

Puede agregar una etiqueta de secuencia de comandos con la URL del script en el HTML. Para evitar la sobrecarga de jQuery, esta es una solución ideal.

El script puede incluso residir en un servidor diferente. Además, el navegador evalúa el código. La <script>etiqueta se puede insertar en la página web <head>o insertarse justo antes de la </body>etiqueta de cierre.

Aquí hay un ejemplo de cómo esto podría funcionar:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL
   
    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

Esta función agregará una nueva <script>etiqueta al final de la sección de encabezado de la página, donde el srcatributo se establece en la URL que se proporciona a la función como primer parámetro.

Ambas soluciones se analizan e ilustran en JavaScript Madness: carga dinámica de scripts .

Detectar cuándo se ha ejecutado el script

Ahora bien, hay un gran problema que debes conocer. Hacer eso implica que cargas el código de forma remota . Los navegadores web modernos cargarán el archivo y seguirán ejecutando el script actual porque cargan todo de forma asincrónica para mejorar el rendimiento. (Esto se aplica tanto al método jQuery como al método de carga manual de scripts dinámicos).

Significa que si usa estos trucos directamente, no podrá usar el código recién cargado en la siguiente línea después de haber solicitado que se cargue , porque aún se estará cargando.

Por ejemplo: my_lovely_script.jscontiene MySuperObject:

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

Luego recargas la página presionando F5. ¡Y funciona! Confuso...

Entonces, ¿qué hacer al respecto?

Bueno, puedes usar el truco que sugiere el autor en el enlace que te di. En resumen, para las personas que tienen prisa, utiliza un evento para ejecutar una función de devolución de llamada cuando se carga el script. Entonces puedes poner todo el código usando la biblioteca remota en la función de devolución de llamada. Por ejemplo:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

Luego escribe el código que desea usar DESPUÉS de cargar el script en una función lambda :

var myPrettyCode = function() {
   // Here, do whatever you want
};

Luego ejecutas todo eso:

loadScript("my_lovely_script.js", myPrettyCode);

Tenga en cuenta que el script puede ejecutarse después de que se haya cargado el DOM o antes, dependiendo del navegador y de si incluyó la línea script.async = false;. Hay un gran artículo sobre la carga de Javascript en general que trata esto.

Fusión/preprocesamiento de código fuente

Como se menciona al principio de esta respuesta, muchos desarrolladores utilizan herramientas de compilación/transpilación como Parcel, Webpack o Babel en sus proyectos, lo que les permite utilizar la próxima sintaxis de JavaScript, proporcionar compatibilidad con versiones anteriores para navegadores más antiguos, combinar archivos, minimizar, realizar división de código, etc.

Jun 04 '2009 12:06 Bite code