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

En JavaScript nativo antes de que se introdujera ES6 Modules 2015 no tenía funcionalidades de importación, inclusión o requerimiento. Antes de eso, podemos cargar un archivo JavaScript en otro archivo JavaScript usando una etiqueta de script dentro del DOM, ese script se descargará y ejecutará de inmediato.

Ahora, después de la invención de los módulos ES6, se han desarrollado y discutido a continuación muchos enfoques diferentes para resolver este problema.

Módulos ES6: los módulos ECMAScript (ES6) se admiten en Node.js desde la versión 8.5. En este módulo, definimos funciones exportadas en un archivo y las importamos en otro ejemplo.
Hay dos formas populares de llamar a un archivo JavaScript desde otra función que se enumeran a continuación:

Técnicas de Ajax
Concatenar archivos

Ejemplo de técnicas Ajax:

Archivo JavaScript externo llamado «main.js»

// This alert will export in the main file

alert("Hello Geeks")

Archivo principal: este archivo importará el archivo «main.js» anterior

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Calling JavaScript file from
        another JavaScript file
    </title>
      
    <script type="text/javascript">
        var script = document.createElement('script');
          
        script.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js";
          
        document.head.appendChild(script)
    </script>
</head>
  
<body>
</body>
  
</html>

Producción:

Concatenar archivos Ejemplo: aquí se importan varios archivos JavaScript en un solo archivo JavaScript y se llama a ese archivo maestro JavaScript desde una función.

Archivo JavaScript externo llamado «main.js»

// This alert will export in the main file

alert("Hello Geeks")
Archivo JavaScript externo «segundo.js»

// This alert will export in the main file

alert("Welcome to Geeksforgeeks")

Archivo JavaScript externo «master.js»

function include(file) {
  
  var script  = document.createElement('script');
  script.src  = file;
  script.type = 'text/javascript';
  script.defer = true;
  
  document.getElementsByTagName('head').item(0).appendChild(script);
  
}
  
/* Include Many js files */
include('https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js');
include('https://media.geeksforgeeks.org/wp-content/uploads/20190704162640/second.js');

Archivo principal: este archivo importará el archivo «master.js» anterior

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Calling JavaScript file from
        another JavaScript file
    </title>
      
    <script type="text/javascript"
src="https://media.geeksforgeeks.org/wp-content/uploads/20190704162730/master.js">
    </script>
</head>
  
<body>
</body>
</html>           

Salida:
importación del archivo main.js:

importación del archivo second.js:

Publicación traducida automáticamente

Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta