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

¿Tiene JavaScript algo similar a @import en CSS que te permite incluir un archivo javascript en otro archivo javascript?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart está programado para el 04 de junio de 2009 a las 14:59 2009-06-04 14:59
@ 56 respuestas
  • 1
  • 2

En versiones anteriores de JavaScript, no había importancia, inclusión o requisito, por lo que se desarrollaron muchos enfoques diferentes para este problema.

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

Para compatibilidad con navegadores más antiguos, puede usar las herramientas de compilación y / o transferencia .

Módulos ES6

Los módulos ECMAScript (ES6) son compatibles con Node.js desde la versión - --experimental-modules bandera - --experimental-modules . Todos .mjs archivos .mjs deben tener la extensión .mjs .

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

Módulos ECMAScript en navegadores

Los navegadores admiten la carga de módulos ECMAScript directamente (no se requieren herramientas como Webpack) a partir de Safari 10.1, Chrome 61, Firefox 60 y Edge 16. Consulte el soporte actual en Caniuse .

 // hello.mjs export function hello(text) { const div = document.createElement('div'); div.textContent = 'Hello ${text}'; document.body.appendChild(div); } 

Obtenga más información en https://jakearchibald.com/2017/es-modules-in-browsers/

Importación dinámica en los navegadores.

La importación dinámica permite que el script cargue otros scripts según sea necesario:

https://developers.google.com/web/updates/2017/11/dynamic-import. 

Node.js requiere

El antiguo estilo de importación de módulos, todavía ampliamente utilizado en Node.js, es el sistema module.exports / require .

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

Hay otras formas de habilitar el contenido externo de JavaScript en los navegadores que no requieren preprocesamiento.

Descargar AJAX

Puede cargar un script adicional usando una llamada AJAX, y luego usar eval para ejecutarlo. Esta es la forma más fácil, pero está limitada a su dominio debido al modelo de seguridad de sandbox de JavaScript. El uso de eval también abre el camino a errores, piratería y problemas de seguridad.

Descargar Descargar

Al igual que con las importaciones dinámicas, puede cargar uno o más scripts llamando a fetch usando promesas para controlar el orden en que se ejecutan las dependencias de script usando 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)}') }) 
border=0

JQuery cargando

La biblioteca jQuery proporciona carga de una sola línea :

Esta función agregará un nuevo <script> al final de la sección de encabezado de la página, donde el atributo src se establece en la URL, que se pasa a la función como primer parámetro.

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

Detección cuando se ejecutó el script.

Ahora hay un gran problema que debes tener en cuenta. Esto significa que usted descarga el código de forma remota. Los navegadores web modernos cargan el archivo y continúan ejecutando su script actual, ya que cargan todo de forma asíncrona para mejorar el rendimiento. (Esto se aplica tanto al método jQuery como al método manual de carga dinámica de scripts).

Esto significa que si usa estos trucos directamente, no podrá usar su código recién descargado en la siguiente línea después de que solicitó la descarga, ya que todavía se cargará.

Por ejemplo: my_lovely_script.js contiene MySuperObject :

 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 que el script se cargue en la función lambda :

 loadScript("my_lovely_script.js", myPrettyCode); 

Tenga en cuenta que el script puede ejecutarse después de cargar el DOM o antes, dependiendo del navegador y de si la línea script.async = false; está habilitada script.async = false; Hay un gran artículo sobre la descarga de Javascript en general, que discute esto.

Código fuente de combinación / preprocesamiento

Como se mencionó en la parte superior de esta respuesta, muchos desarrolladores utilizan herramientas de compilación / transferencia en sus proyectos, como Parcel, Webpack o Babel, que les permite usar la próxima sintaxis de JavaScript, proporcionan compatibilidad con versiones anteriores de navegadores más antiguos, combinan archivos, minimizan, dividen códigos y así sucesivamente

3838
04 июня '09 в 15:13 2009-06-04 15:13 la respuesta se da e-satis 04 de junio de 2009 a las 15:13 2009-06-04 15:13

Si alguien está buscando algo más avanzado, intente RequireJS . Obtendrá beneficios adicionales como la administración de dependencias, la concurrencia mejorada y evitar la duplicación (es decir, obtener el script más de una vez).

Puede escribir sus archivos JavaScript en "módulos" y luego referirse a ellos como dependencias en otros scripts. O puede usar RequireJS como una solución simple de "ir y obtener este script".

Ejemplo:

Definir dependencias como módulos:

some-dependency.js

border=0
 define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) { //Your actual script goes here. //The dependent scripts will be fetched if necessary. return libraryObject; //For example, jQuery object }); 

creation.js es su archivo javascript "principal", que depende de some-dependency.js

 require(['some-dependency'], function(dependency) { //Your script goes here //some-dependency.js is fetched. //Then your script is executed }); 

Extracto de GitHub README:

RequireJS carga archivos de JavaScript simples, así como módulos más específicos. Está optimizado para su uso en el navegador, incluido Web Worker, pero se puede usar en otros entornos de JavaScript como Rhino y Node. Implementa el módulo asíncrono API.

RequireJS utiliza etiquetas de script simples para cargar módulos / archivos, por lo que debería proporcionar una fácil depuración. Puede usarse simplemente para cargar archivos JavaScript existentes, por lo que puede agregarlo a un proyecto existente sin tener que volver a escribir los archivos JavaScript.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 La respuesta la da John Strickler el 7 de junio de 2012 a las 23:55 2012-06-07 23:55

De hecho, hay una forma de descargar un archivo javascript no de forma asíncrona, por lo que puede usar las funciones incluidas en su archivo recién cargado inmediatamente después de la descarga, y creo que funciona en todos los navegadores.

jQuery.append() usar jQuery.append() en el elemento <head> de su página, es decir:

 $("head").append('<script type="text/javascript" src="' + script + '"></script>'); 

Sin embargo, este método también tiene un problema: si se produce un error en el archivo JavaScript importado, Firebug (así como la Consola de errores de Firefox y las Herramientas para desarrolladores de Chrome también informarán su ubicación incorrectamente, lo cual es un gran problema si usa Firebug para rastrear mucho los errores de JavaScript (lo hago) Por alguna razón, Firebug simplemente no conoce el archivo que se acaba de cargar, por lo que si ocurre un error en este archivo, informa que ocurrió en su archivo HTML principal y tendrá problemas para encontrar la verdadera causa del error.

Pero si esto no es un problema para usted, entonces este método debería funcionar.

De hecho, escribí un complemento de jQuery llamado $ .import_js () que usa este método:

 (function($) {  var import_js_imported = []; $.extend(true, { import_js : function(script) { var found = false; for (var i = 0; i < import_js_imported.length; i++) if (import_js_imported[i] == script) { found = true; break; } if (found == false) { $("head").append('<script type="text/javascript" src="' + script + '"></script>'); import_js_imported.push(script); } } }); })(jQuery); 

Por lo tanto, todo lo que necesita hacer para importar JavaScript es:

 $.import_js('/path_to_project/scripts/somefunctions.js'); 

También hice una prueba simple para esto en Ejemplo .

Incluye el archivo main.js en el HTML principal, y luego el script en main.js usa $.import_js() para importar un archivo adicional llamado included.js , que define esta función:

 function hello() { alert("Hello world!"); } 

E inmediatamente después de incluir el included.js , se llama a la función hello() y recibirá una notificación.

(Esta respuesta es una respuesta al comentario de e-sat).

173
28 апр. Responder Kipras 28 abr. 2011-04-28 18:25 '11 a las 18:25 2011-04-28 18:25

Otra forma en que, en mi opinión, es mucho más limpia, es hacer una solicitud Ajax síncrona en lugar de usar <script> . Además, procesa Node.js.

Aquí hay un ejemplo del uso de jQuery:

 function require(script) { $.ajax({ url: script, dataType: "script", async: false, // <-- This is the key success: function () { // all good... }, error: function () { throw new Error("Could not load script " + script); } }); } 

Luego puede usarlo en su código, como si usualmente incluyera incluir:

 require("/scripts/subscript.js"); 

Y puede llamar a la función desde el script necesario en la siguiente línea:

 subscript.doSomethingCool(); 
138
08 сент. La respuesta es dada por Ariel Sep 08. 2011-09-08 21:22 '11 a las 21:22 2011-09-08 21:22

Buenas noticias para ti. Muy pronto podrás cargar fácilmente el código JavaScript. Esto se convertirá en la forma estándar de importar módulos de código JavaScript y formar parte del núcleo de JavaScript.

Solo tienes que escribir las condiciones de import cond from 'cond.js'; cargar la macro llamada cond desde el archivo cond.js

Por lo tanto, no necesita confiar en ninguna infraestructura de JavaScript y no hacer llamadas Ajax explícitamente.

Consulte:

90
03 июля '12 в 16:32 2012-07-03 16:32 la respuesta es dada Imdad 03 de julio de 2012 a las 4:32 2012-07-03 16:32

Puede generar dinámicamente una etiqueta de JavaScript y agregarla a un documento HTML desde otro código JavaScript. Esto cargará el archivo javascript de destino.

 function includeJs(jsFilePath) { var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js); } includeJs("/path/to/some/file.js"); 
78
04 июня '09 в 15:02 2009-06-04 15:02 respondió a Svitlana Maksymchuk el 4 de junio de 2009 a las 15:02 2009-06-04 15:02

Operador de import en ECMAScript 6.

Sintaxis

 import name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import name , { member [ , [...] ] } from "module-name"; import "module-name" as name; 
61
17 апр. Respuesta de draupnie el 17 de abr. 2015-04-17 04:56 '15 a las 4:56 2015-04-17 04:56

Tal vez pueda usar esta función que encontré en esta página. ¿Cómo incluyo un archivo javascript en un archivo javascript? :

 function include(filename) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = filename; script.type = 'text/javascript'; head.appendChild(script) } 
51
04 июня '09 в 15:04 2009-06-04 15:04 La respuesta es dada por Arnaud Gouder de Beauregard 04 de junio de 2009 a las 15:04 2009-06-04 15:04

Aquí está la versión síncrona sin jQuery :

 function myRequire( url ) { var ajax = new XMLHttpRequest(); ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous ajax.onreadystatechange = function () { var script = ajax.response || ajax.responseText; if (ajax.readyState === 4) { switch( ajax.status) { case 200: eval.apply( window, [script] ); console.log("script loaded: ", url); break; default: console.log("ERROR: script not loaded: ", url); } } }; ajax.send(null); } 

Tenga en cuenta que para obtener este dominio de trabajo, el servidor deberá establecer un encabezado de allow-origin permitido en su respuesta.

47
11 дек. La respuesta la da heinob el 11 de diciembre. 2013-12-11 14:54 '13 a las 14:54 2013-12-11 14:54

Acabo de escribir este código javascript (usando un prototipo para manipular el DOM ):

 var require = (function() { var _required = {}; return (function(url, callback) { if (typeof url == 'object') { // We've (hopefully) got an array: time to chain! if (url.length > 1) { // Load the nth file as soon as everything up to the // n-1th one is done. require(url.slice(0, url.length - 1), function() { require(url[url.length - 1], callback); }); } else if (url.length == 1) { require(url[0], callback); } return; } if (typeof _required[url] == 'undefined') { // Haven't loaded this URL yet; gogogo! _required[url] = []; var script = new Element('script', { src: url, type: 'text/javascript' }); script.observe('load', function() { console.log("script " + url + " loaded."); _required[url].each(function(cb) { cb.call(); // TODO: does this execute in the right context? }); _required[url] = true; }); $$('head')[0].insert(script); } else if (typeof _required[url] == 'boolean') { // We already loaded the thing, so go ahead. if (callback) { callback.call(); } return; } if (callback) { _required[url].push(callback); } }); })(); 

Uso:

 <script src="prototype.js"></script> <script src="require.js"></script> <script> require(['foo.js','bar.js'], function () {  }); </script> 

El resultado final: http://gist.github.com/284442 .

43
23 янв. respuesta dada nornagon ene 23 2010-01-23 08:20 '10 a las 8:20 2010-01-23 08:20

Aquí hay una versión generalizada de cómo Facebook hace esto por su omnipresente botón Me gusta:

36
08 июля '15 в 5:41 2015-07-08 05:41 Dan Dascalescu da la respuesta 08 de julio de 2015 a las 5:41 2015-07-08 05:41

Si quieres javascript puro, puedes usar document.write .

 document.write('<script src="myscript.js" type="text/javascript"></script>'); 

Si usa la biblioteca jQuery, puede usar el método $.getScript .

 $.getScript("another_script.js"); 
30
13 нояб. La respuesta la da Venu Immadi el 13 de noviembre. 2013-11-13 12:18 '13 a las 12:18 2013-11-13 12:18

Esta es probablemente la mayor debilidad de JavaScript en mi opinión. A lo largo de los años, no he tenido problemas para rastrear dependencias. En cualquier caso, parece que la única solución práctica es usar el script incluido en el archivo HTML y, por lo tanto, es terrible hacer que su código JavaScript dependa del usuario, incluida la fuente que necesita, y hacer que su reutilización sea hostil.

Lo siento si esto suena como una conferencia;) Este es mi (mal) hábito, pero quiero enfatizar esto.

El problema vuelve a todo lo demás en la web, a la historia de JavaScript. Realmente no fue diseñado para ser utilizado en la generalización que se usa en la actualidad. Netscape creó un lenguaje que le permitiría manejar varias cosas, pero no asumió su uso generalizado para muchas cosas, como es costumbre ahora, y por una razón u otra se expandió desde allí, sin afectar algunas de las debilidades fundamentales de la estrategia original.

Esto no es uno, por supuesto. HTML no fue diseñado para una página web moderna; fue diseñado para expresar la lógica del documento, de modo que los lectores (navegadores en el mundo moderno) pudieran mostrarlo en una forma adecuada que estuviera dentro de las capacidades del sistema, y ​​tardara años en resolverlo (aparte de piratear MS y Netscape). CSS resuelve este problema, pero ha pasado mucho tiempo e incluso más tiempo para que la gente lo use, en lugar de los métodos BAD establecidos. Sucedió, alabanza.

Esperamos que JavaScript (especialmente ahora es parte de la norma) se desarrolle para aceptar el concepto de modularidad correcta (así como algunas otras cosas), como cualquier otro lenguaje de programación (existente) en el mundo, y este disparate desaparecerá. Hasta que te guste y no lo acepto, me temo.

30
24 мая '12 в 12:51 2012-05-24 12:51 La respuesta es dada por Stephen Whipp el 24 de mayo de 2012 a las 12:51 2012-05-24 12:51

La mayoría de las soluciones presentadas aquí asumen carga dinámica. En su lugar, estaba buscando un compilador que recopila todos los archivos dependientes en un archivo de salida. Al igual que los @import Less / Sass @import con la regla CSS @import . Como no encontré nada decente como ese, escribí una herramienta simple para resolver un problema.

Entonces, aquí está el compilador https://github.com/dsheiko/jsic , que reemplaza de forma confiable $import("file-path") contenido del archivo solicitado. Aquí está el complemento Grunt apropiado: https://github.com/dsheiko/grunt-jsic .

En el hilo principal de jQuery, simplemente fusionan los archivos fuente atómicos en uno, comenzando con intro.js y terminando con outtro.js . Esto no me conviene, ya que no proporciona flexibilidad en el desarrollo del código fuente. Echa un vistazo a cómo funciona con JSIC:

Src / main.js

 var foo = $import("./Form/Input/Tel"); 

SRC / Form / login /Tel.js

 function() { return { prop: "", method: function(){} } } 

Ahora podemos ejecutar el compilador:

 node jsic.js src/main.js build/mail.js 

Y obtener el archivo combinado

construir /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 Dmitry Sheiko da la respuesta el 14 de julio de '13 a las 0:44 2013-07-14 00:44

También puedes construir tus scripts usando PHP :

Archivo main.js.php :

 <?php header('Content-type:text/javascript; charset=utf-8'); include_once("foo.js.php"); include_once("bar.js.php"); ?> // Main JavaScript code goes here 
24
28 дек. La respuesta es dada por Calmarius el 28 de diciembre. 2010-12-28 00:03 '11 a las 0:03 2010-12-28 00:03

Si su intención de cargar un archivo JavaScript usa funciones del archivo importado / incluido , también puede definir un objeto global y establecer funciones como elementos del objeto. Por ejemplo:

global.js

 A = {}; 

file1.js

 A.func1 = function() { console.log("func1"); } 

archivo2.js

 A.func2 = function() { console.log("func2"); } 

main.js

 A.func1(); A.func2(); 

Solo debe tener cuidado al incluir scripts en el archivo HTML. El orden debe ser como se muestra a continuación:

 <head> <script type="text/javascript" src="global.js"></script> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="main.js"></script> </head> 
20
24 июля '15 в 9:53 2015-07-24 09:53 la respuesta la da Adem İlhan el 24 de julio de '15 a las 9:53 2015-07-24 09:53

Esto debería hacer:

 xhr = new XMLHttpRequest(); xhr.open("GET", "/soap/ajax/11.0/connection.js", false); xhr.send(); eval(xhr.responseText); 
18
24 марта '13 в 22:32 2013-03-24 22:32 la respuesta se da tggagne 24 de marzo, 13 a las 10:32 2013-03-24 22:32

O en lugar de encenderlo en tiempo de ejecución, use un script para fusionar antes de cargar.

Uso asteriscos (no sé si hay otros). Usted construye su código JavaScript en archivos separados e incluye comentarios que son procesados ​​por el mecanismo Sprockets, al igual que los incluidos. Para el desarrollo, puede incluir archivos secuencialmente, y luego para producción, para combinarlos ...

Ver tambien

17
07 июня '12 в 23:48 2012-06-07 23:48 La respuesta la da JMawer el 7 de junio de 2012 a las 23:48 2012-06-07 23:48

Si utiliza Web Workers y desea incluir scripts adicionales en el área de empleados, otras respuestas sobre cómo agregar scripts a la etiqueta de head , etc. No trabajará para ti.

Afortunadamente, Web Workers tiene su propia función importScripts , que es una función global en el área de Web Worker, integrada en el navegador, ya que forma parte de la especificación .

Además, como la segunda respuesta mejor calificada a su pregunta , RequireJS también puede manejar la inclusión de scripts dentro del Trabajador Web (probablemente los importScripts llamada en sí, pero con otras características útiles).

14
01 янв. La respuesta es dada por Turnerj 01 de enero 2015-01-01 11:58 '15 a las 11:58 2015-01-01 11:58

Tenía un problema simple, pero me desconcertaron las respuestas a esta pregunta.