Comment inclure un fichier javascript dans un autre fichier javascript?

Est-ce que JavaScript a quelque chose de similaire à @import dans CSS qui vous permet d'inclure un fichier javascript dans un autre fichier javascript?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart est prévu pour le 04 juin 09 à 14:59 2009-06-04 14:59
@ 56 réponses
  • 1
  • 2

Dans les anciennes versions de JavaScript, il n'y avait aucune importation, inclusion ou exigence, aussi de nombreuses approches différentes de ce problème ont été développées.

Mais depuis 2015 (ES6), la norme des modules ES6 pour l'importation de modules dans Node.js est apparue en JavaScript, également pris en charge par la plupart des navigateurs modernes .

Pour assurer la compatibilité avec les anciens navigateurs, vous pouvez utiliser les outils de génération et / ou de transfert .

Modules ES6

Les modules ECMAScript (ES6) sont pris en charge dans Node.js depuis la version - --experimental-modules indicateur - --experimental-modules . Tous .mjs fichiers .mjs doivent avoir l'extension .mjs .

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

Modules ECMAScript dans les navigateurs

Les navigateurs prennent en charge le chargement direct des modules ECMAScript (aucun outil tel que Webpack n'est requis) à partir de Safari 10.1, Chrome 61, Firefox 60 et Edge 16. Consultez le support actuel dans caniuse .

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

En savoir plus sur https://jakearchibald.com/2017/es-modules-in-browsers/

Importation dynamique dans les navigateurs

L'importation dynamique permet au script de charger d'autres scripts selon les besoins:

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

Node.js nécessite

L'ancien style d'importation de module, encore largement utilisé dans Node.js, est le système module.exports / require .

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

Il existe d'autres moyens d'activer le contenu externe JavaScript dans les navigateurs qui ne nécessitent pas de prétraitement.

AJAX Télécharger

Vous pouvez charger un script supplémentaire à l'aide d'un appel AJAX, puis utiliser eval pour l'exécuter. C'est le moyen le plus simple, mais il est limité à votre domaine en raison du modèle de sécurité JavaScript du sandbox. L'utilisation de eval ouvre également la voie aux problèmes de bogues, de piratage et de sécurité.

Télécharger Télécharger

Comme pour les importations dynamiques, vous pouvez charger un ou plusieurs scripts en appelant fetch aide de promesses pour contrôler l'ordre dans lequel les dépendances de script s'exécutent à l'aide de la bibliothèque 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)}') }) 

JQuery chargement

La bibliothèque jQuery fournit un chargement sur une seule ligne :

Cette fonction ajoutera un nouveau <script> à la fin de la section d'en-tête de la page, où l'attribut src est défini sur l'URL, qui est transmise à la fonction en tant que premier paramètre.

Ces deux solutions sont discutées et illustrées dans JavaScript Madness: chargement de script dynamique .

Détection lors de l'exécution du script

Il y a maintenant un gros problème dont vous devriez être au courant. Cela signifie que vous téléchargez le code à distance. Les navigateurs Web modernes chargent le fichier et continuent d'exécuter votre script actuel, car ils chargent tout de manière asynchrone pour améliorer les performances. (Cela s'applique à la méthode jQuery et à la méthode de chargement manuel dynamique des scripts.)

Cela signifie que si vous utilisez ces astuces directement, vous ne pourrez plus utiliser le code que vous venez de télécharger sur la ligne suivante, après l'avoir demandé à le télécharger, car il sera toujours chargé.

Par exemple: my_lovely_script.js contient 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); } 

Ensuite, vous écrivez le code que vous voulez utiliser APRÈS que le script soit chargé dans la fonction lambda :

 loadScript("my_lovely_script.js", myPrettyCode); 

Notez que le script peut être exécuté après le chargement du DOM ou avant, selon le navigateur et si la ligne script.async = false; est activée script.async = false; Il existe un excellent article sur le téléchargement de Javascript en général, qui en parle.

Fusion de code source / prétraitement

Comme mentionné en haut de cette réponse, de nombreux développeurs utilisent des outils de génération / transfert dans leurs projets, tels que Parcel, Webpack ou Babel, qui leur permet d'utiliser la syntaxe JavaScript à venir, d'assurer la compatibilité avec les anciens navigateurs, de fusionner des fichiers, de réduire ou de scinder le code. et ainsi de suite

3838
04 июня '09 в 15:13 2009-06-04 15:13 la réponse est donnée e-satis 04 juin '09 à 15:13 2009-06-04 15:13

Si quelqu'un recherche quelque chose de plus avancé, essayez RequireJS . Vous obtiendrez des avantages supplémentaires, tels que la gestion des dépendances, l'amélioration de la concurrence et l'évitement de la duplication (c'est-à-dire obtenir le script plusieurs fois).

Vous pouvez écrire vos fichiers JavaScript dans des "modules", puis les qualifier de dépendances dans d'autres scripts. Ou vous pouvez utiliser RequireJS en tant que solution simple «allez chercher ce script».

Exemple:

Définissez les dépendances en tant que modules:

un-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 est votre fichier "principal" javascript, qui dépend de some-dependency.js

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

Extrait de GitHub README:

RequireJS charge des fichiers JavaScript simples, ainsi que des modules plus spécifiques. Il est optimisé pour une utilisation dans le navigateur, y compris Web Worker, mais peut être utilisé dans d'autres environnements JavaScript tels que Rhino et Node. Il implémente l'API du module asynchrone.

RequireJS utilise de simples balises de script pour charger des modules / fichiers, il devrait donc permettre un débogage facile. Il peut être utilisé simplement pour charger des fichiers JavaScript existants. Vous pouvez donc l'ajouter à un projet existant sans avoir à réécrire les fichiers JavaScript.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 La réponse est donnée par John Strickler le 07 juin 12 à 23:55. 2012-06-07 23:55

En fait, il existe un moyen de télécharger un fichier javascript de manière non asynchrone. Vous pouvez donc utiliser les fonctions incluses dans le fichier que vous venez de télécharger immédiatement après le téléchargement. Je pense que cela fonctionne dans tous les navigateurs.

Vous devez utiliser jQuery.append() dans l'élément <head> de votre page, à savoir:

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

Cependant, cette méthode pose également un problème: si une erreur se produit dans le fichier JavaScript importé, Firebug (ainsi que la console d’erreur de Firefox et les outils de développement Chrome) rapporteront également leur emplacement de manière incorrecte, ce qui pose un gros problème si vous utilisez Firebug pour suivre beaucoup les erreurs JavaScript Pour une raison quelconque, Firebug ignore tout simplement le fichier récemment téléchargé. Par conséquent, si une erreur se produit dans ce fichier, il le signale dans votre fichier HTML principal et vous aurez du mal à trouver la cause réelle de l'erreur.

Mais si cela ne vous pose pas de problème, cette méthode devrait fonctionner.

En fait, j’ai écrit un plugin jQuery appelé $ .import_js () qui utilise cette méthode:

 (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); 

Par conséquent, tout ce que vous devez faire pour importer du JavaScript est:

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

J'ai également fait un test simple pour cela dans l' exemple .

Il inclut le fichier main.js dans le code HTML principal, puis le script dans main.js utilise $.import_js() pour importer un fichier supplémentaire appelé included.js , qui définit cette fonction:

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

Et immédiatement après avoir included.js le hello() included.js , la fonction hello() est appelée et vous recevrez une notification.

(Cette réponse est une réponse au commentaire de l'e-sat).

173
28 апр. Répondre Kipras 28 avr. 2011-04-28 18:25 '11 à 18:25 2011-04-28 18:25

Une autre façon, à mon avis, beaucoup plus propre, est de faire une demande Ajax synchrone au lieu d'utiliser <script> . En outre, il traite Node.js.

Voici un exemple d'utilisation 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); } }); } 

Ensuite, vous pouvez l’utiliser dans votre code, comme si vous utilisiez habituellement include, notamment:

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

Et vous pouvez appeler la fonction à partir du script nécessaire à la ligne suivante:

 subscript.doSomethingCool(); 
138
08 сент. La réponse est donnée par Ariel Septembre 08 2011-09-08 21:22 '11 à 21:22 2011-09-08 21:22

Bonne nouvelle pour toi. Très bientôt, vous pourrez charger facilement du code JavaScript. Cela deviendra le moyen standard d'importer des modules de code JavaScript et de faire partie du noyau JavaScript lui-même.

Vous devez juste écrire import cond from 'cond.js'; charge la macro nommée cond partir du fichier cond.js

Ainsi, vous n’avez pas besoin de vous fier à une infrastructure JavaScript et ne faites pas explicitement d’appels Ajax .

Se référer à:

90
03 июля '12 в 16:32 2012-07-03 16:32 la réponse est donnée à Imdad le 03 juillet 2012 à 04:32. 2012-07-03 16:32

Vous pouvez générer dynamiquement une balise JavaScript et l'ajouter à un document HTML à partir d'un autre code JavaScript. Cela chargera le fichier javascript cible.

 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 a répondu à Svitlana Maksymchuk le 04 juin 09 à 15:02 2009-06-04 15:02

opérateur import dans ECMAScript 6.

La syntaxe

 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 апр. Réponse donnée par draupnie le 17 avril 2015-04-17 04:56 '15 à 4:56 2015-04-17 04:56

Peut-être que vous pouvez utiliser cette fonction que j'ai trouvée sur cette page. Comment puis-je inclure un fichier javascript dans un fichier 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 réponse est donnée par Arnaud Gouder de Beauregard le 04 Juin 09 à 15:04 2009-06-04 15:04

Voici la version synchrone sans 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); } 

Notez que pour obtenir ce domaine de travail, le serveur devra définir un en allow-origin tête allow-origin dans sa réponse.

47
11 дек. Heinob 11 déc. 2013-12-11 14:54 13 à 14:54 2013-12-11 14:54

Je viens d'écrire ce code javascript (utilisant un prototype pour manipuler le 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); } }); })(); 

Utiliser:

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

La ligne du bas: http://gist.github.com/284442 .

43
23 янв. réponse donnée nornagon le 23 janvier 2010-01-23 08:20 '10 à 8:20 2010-01-23 08:20

Voici une version généralisée de la façon dont Facebook le fait pour son bouton omniprésent «J'aime»:

36
08 июля '15 в 5:41 2015-07-08 05:41 la réponse est donnée Dan Dascalescu 08 juillet '15 à 5:41 2015-07-08 05:41

Si vous voulez du javascript pur, vous pouvez utiliser document.write .

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

Si vous utilisez la bibliothèque jQuery, vous pouvez utiliser la méthode $.getScript .

 $.getScript("another_script.js"); 
30
13 нояб. La réponse est donnée par Venu immadi le 13 novembre 2013-11-13 12:18 13 à 12h18 2013-11-13 12:18

C'est probablement la plus grande faiblesse de JavaScript à mon avis. Au fil des ans, je n'ai eu aucun problème à suivre les dépendances. Dans tous les cas, il semble que la seule solution pratique consiste à utiliser le script inclus dans le fichier HTML. Il est donc terrible de rendre votre code JavaScript dépendant de l'utilisateur, y compris la source dont vous avez besoin, et de rendre sa réutilisation désagréable.

Désolé si cela ressemble à une conférence;) Ceci est ma (mauvaise) habitude, mais je tiens à souligner cela.

Le problème revient à tout le reste du Web, à l'histoire du javascript. Il n'a pas été conçu pour être utilisé dans les applications répandues d'aujourd'hui. Netscape a créé un >

Ce n'est pas un, bien sûr. HTML n'a pas été conçu pour une page Web moderne; il a été conçu pour exprimer la logique du document, de sorte que les lecteurs (navigateurs dans le monde moderne) puissent l'afficher sous une forme appropriée, dans les limites des capacités du système, et sa résolution a pris des années (autres que le piratage de MS et de Netscape). CSS résout ce problème, mais il a fallu attendre longtemps et même plus longtemps pour que les gens l'utilisent, plutôt que les méthodes BAD établies. C'est arrivé, louange.

Nous espérons que JavaScript (en particulier maintenant faisant partie de la norme) sera développé pour accepter le concept de modularité correcte (ainsi que d'autres éléments), comme tout autre >

30
24 мая '12 в 12:51 2012-05-24 12:51 La réponse est donnée par Stephen Whipp le 24 mai '12 à 12:51 2012-05-24 12:51

La plupart des solutions présentées ici supposent un chargement dynamique. Au lieu de cela, je recherchais un compilateur qui rassemble tous les fichiers dépendants dans un fichier de sortie. Tout comme les @import Less / Sass @import avec la règle CSS @import . Comme je n’ai rien trouvé de tel, j’ai écrit un outil simple pour résoudre un problème.

Donc, voici le compilateur https://github.com/dsheiko/jsic , qui remplace de manière fiable $import("file-path") contenu du fichier demandé. Voici le plugin Grunt approprié: https://github.com/dsheiko/grunt-jsic .

Dans le thread principal jQuery, ils fusionnent simplement les fichiers source atomiques en un, en commençant par intro.js et en finissant par outtro.js . Cela ne me convient pas, car cela n'offre pas de flexibilité dans le développement du code source. Découvrez comment cela fonctionne avec JSIC:

Src / main.js

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

SRC / Form / login /Tel.js

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

Maintenant nous pouvons exécuter le compilateur:

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

Et récupérez le fichier fusionné

build /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 la réponse est donnée par Dmitry Sheiko le 14 juillet 2013 à 0:44 2013-07-14 00:44

Vous pouvez également construire vos scripts en utilisant PHP :

Fichier 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 réponse est donnée par Calmarius le 28 décembre 2010-12-28 00:03 '11 à 0:03 2010-12-28 00:03

Si votre intention de télécharger un fichier JavaScript utilise des fonctions du fichier importé / inclus , vous pouvez également définir un objet global et définir des fonctions en tant qu'éléments d'objet. Par exemple:

global.js

 A = {}; 

fichier1.js

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

fichier2.js

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

main.js

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

Vous devez juste faire attention lorsque vous incluez des scripts dans le fichier HTML. La commande devrait être comme ci-dessous:

 <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 réponse est donnée par Adem İlhan le 24 juillet 2015 à 09:53 2015-07-24 09:53

Cela devrait faire:

 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 réponse est donnée tggagne le 24 mars '13 à 10:32 2013-03-24 22:32

Ou, au lieu d'inclure au moment de l'exécution, utilisez un script à fusionner avant le chargement.

J'utilise des astérisques (je ne sais pas s'il y en a d'autres). Vous construisez votre code JavaScript dans des fichiers séparés et incluez des commentaires traités par le mécanisme Sprockets, tout comme ceux inclus. Pour le développement, vous pouvez inclure des fichiers séquentiellement, puis pour la production, les combiner ...

Voir aussi:

17
07 июня '12 в 23:48 2012-06-07 23:48 la réponse est donnée par JMawer le 07 juin 12 à 23:48 2012-06-07 23:48

Si vous utilisez des travailleurs Web et souhaitez inclure des scripts supplémentaires dans l'espace des employés, d'autres réponses concernant l'ajout de scripts à la balise head , etc. Ne travaillera pas pour vous.

Heureusement, Web Workers possède sa propre fonction importScripts , qui est une fonction globale de la zone Web Worker, intégrée au navigateur même, dans la mesure où elle fait partie de la spécification .

En outre, RequireJS étant la deuxième réponse la plus appréciée à votre question , il peut également gérer l’inclusion de scripts dans Web Worker (probablement l’appel importScripts , mais avec plusieurs autres fonctionnalités utiles).

14
01 янв. La réponse est donnée par Turnerj le 01 janvier 2015-01-01 11:58 '15 à 11h58 2015-01-01 11h58