Question Comment inclure un fichier JavaScript dans un autre fichier JavaScript?


Y a-t-il quelque chose en JavaScript similaire à @import en CSS qui vous permet d'inclure un fichier JavaScript dans un autre fichier JavaScript?


4146
2018-06-04 11:59


origine


Réponses:


Les anciennes versions de JavaScript n'avaient pas d'import, d'include, ou de require, tant d'approches différentes de ce problème ont été développées.

Mais les versions récentes de JavaScript ont des normes comme Modules ES6 pour importer des modules, bien que cela ne soit pas encore supporté par la plupart des navigateurs. De nombreuses personnes utilisant des modules avec des applications de navigateur utilisent construire et / ou transpiration des outils pour rendre pratique l'utilisation de la nouvelle syntaxe avec des fonctionnalités telles que les modules.

Modules ES6

Notez qu'actuellement, le support du navigateur pour les modules ES6 n'est pas particulièrement bon, mais il est en cours de réalisation. Selon cette réponse StackOverflow, ils sont pris en charge dans Chrome 61, Firefox 54 (derrière le dom.moduleScripts.enabled mettre en about:config) et MS Edge 16, avec seulement Safari 10.1 fournissant un support sans drapeaux.

Ainsi, vous devrez toujours utiliser des outils de génération et / ou de transpiration pour exécuter JavaScript sans que l'utilisateur ait besoin d'utiliser ces versions de navigateur ou d'activer les indicateurs.

Une fois que les modules ES6 sont courants, voici comment vous allez les utiliser:

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

Node.js nécessite

Node.js utilise actuellement un module.exports / require système. Vous pouvez utiliser babel transpirer si vous voulez le import syntaxe.

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

Il existe d'autres moyens pour JavaScript d'inclure des contenus JavaScript externes dans les navigateurs qui ne nécessitent pas de pré-traitement.

AJAX Chargement

Vous pouvez charger un script supplémentaire avec 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 sandbox. En utilisant eval ouvre également la porte aux bugs, aux hacks et aux problèmes de sécurité.

jQuery Chargement

le jQuery bibliothèque fournit des fonctionnalités de chargement en une ligne:

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

Chargement dynamique de script

Vous pouvez ajouter une balise de script avec l'URL du script dans le code HTML. Pour éviter les frais généraux de jQuery, c'est une solution idéale.

Le script peut même résider sur un serveur différent. De plus, le navigateur évalue le code. le <script> tag peut être injecté dans la page Web <head>ou inséré juste avant la fermeture </body> marque.

Voici un exemple de comment cela pourrait fonctionner:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script"); // Make a script DOM node
    script.src = url; // Set it's 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)
}

Cette fonction va ajouter une nouvelle <script> tag à la fin de la section tête de la page, où le src attribut est défini sur l'URL qui est donnée à la fonction en tant que premier paramètre.

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

Détection du moment où le script a été exécuté

Maintenant, il y a un gros problème que vous devez connaître. Faire cela implique que vous chargez le code à distance. Les navigateurs Web modernes chargeront le fichier et continueront à exécuter votre script actuel car ils chargeront tout de manière asynchrone pour améliorer les performances. (Cela s'applique à la méthode jQuery et à la méthode de chargement de script dynamique manuel.)

Cela signifie que si vous utilisez ces astuces directement, vous ne serez pas en mesure d'utiliser votre code nouvellement chargé la ligne suivante après que vous avez demandé à être chargé, car il sera encore en chargement.

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

Ensuite, vous rechargez la page en appuyant sur F5. Et il fonctionne! Déroutant...

Alors que faire à ce sujet?

Eh bien, vous pouvez utiliser le hack que l'auteur suggère dans le lien que je vous ai donné. En résumé, pour les personnes pressées, il utilise un événement pour exécuter une fonction de rappel lorsque le script est chargé. Vous pouvez donc mettre tout le code en utilisant la bibliothèque distante dans la fonction de rappel. Par exemple:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    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 le script est chargé dans un fonction lambda:

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

Ensuite, vous exécutez tout cela:

loadScript("my_lovely_script.js", myPrettyCode);

Notez que le script peut s'exécuter après le chargement du DOM, ou avant, selon le navigateur et si vous avez inclus la ligne script.async = false;. Il y a un super article sur Javascript chargement en général qui en discute.

Fusion de code source / pré-traitement

Comme mentionné en haut de cette réponse, de nombreux développeurs utilisent maintenant des outils de build / transpilation comme WebPack, Babel ou Gulp dans leurs projets, leur permettant d'utiliser de nouveaux modules de syntaxe et de support, de combiner des fichiers, de réduire, etc.


3579
2018-06-04 12:13



Si quelqu'un cherche quelque chose de plus avancé, essayez ExigerJS. Vous obtiendrez des avantages supplémentaires tels que la gestion des dépendances, une meilleure concomitance et éviter la duplication (c'est-à-dire récupérer un script plus d'une fois).

Vous pouvez écrire vos fichiers JavaScript dans des "modules", puis les référencer en tant que dépendances dans d'autres scripts. Ou vous pouvez utiliser RequireJS comme une simple solution "allez chercher ce script".

Exemple:

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

some-dependency.js

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

implementation.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 du GitHub README:

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

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

...


513
2018-06-07 20:55



Il y a effectivement est un moyen de charger un fichier JavaScript ne pas asynchrone, de sorte que vous pouvez utiliser les fonctions incluses dans votre fichier nouvellement chargé juste après le chargement, et je pense que cela fonctionne dans tous les navigateurs.

Vous devez utiliser jQuery.append()sur le <head> élément de votre page, c'est-à-dire:

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

Cependant, cette méthode a également un problème: si une erreur survient dans le fichier JavaScript importé, Pyromane (et aussi Firefox Error Console et Outils de développement Chrome ainsi) signalera sa place de manière incorrecte, ce qui est un gros problème si vous utilisez Firebug pour suivre les erreurs JavaScript beaucoup (je fais). Firebug ne connaît tout simplement pas le fichier nouvellement chargé pour une raison quelconque, donc si une erreur survient dans ce fichier, il signale qu'il s'est produit dans votre fichier principal. HTML fichier, et vous aurez du mal à trouver la véritable raison de l'erreur.

Mais si ce n'est pas un problème pour vous, alors cette méthode devrait fonctionner.

J'ai effectivement écrit un plugin jQuery appelé $ .import_js () qui utilise cette méthode:

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    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);

Donc, tout ce que vous devez faire pour importer JavaScript est:

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

J'ai également fait un test simple pour cela à Exemple.

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

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

Et juste après avoir inclus included.js, la hello() la fonction est appelée, et vous obtenez l'alerte.

(Cette réponse est en réponse au commentaire d'e-satis).


162
2018-04-28 15:25



Une autre façon, qui à mon avis est beaucoup plus propre, est de faire une requête Ajax synchrone au lieu d'utiliser un <script> marque. Qui est aussi comment Node.js poignées comprend.

Voici un exemple utilisant 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);
        }
    });
}

Vous pouvez ensuite l'utiliser dans votre code comme vous le feriez habituellement avec un include:

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

Et être en mesure d'appeler une fonction du script requis dans la ligne suivante:

subscript.doSomethingCool(); 

133
2017-09-08 18:22



Il y a une bonne nouvelle pour toi. Très bientôt, vous serez en mesure de charger du code JavaScript facilement. Il deviendra un moyen standard d'importer des modules de code JavaScript et fera partie du noyau JavaScript lui-même.

Vous devez simplement écrire import cond from 'cond.js'; charger une macro nommée cond à partir d'un fichier cond.js.

Vous n'avez donc pas à vous fier à un framework JavaScript ni à faire explicitement Ajax appels.

Faire référence à:


86
2017-07-03 13:32



Il est possible de générer dynamiquement une balise JavaScript et de l'ajouter au document HTML à partir d'autres codes JavaScript. Cela va charger le fichier JavaScript ciblé.

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

72
2018-06-04 12:02



Déclaration import est dans ECMAScript 6.

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;

58
2018-04-17 01:56



Peut-être que vous pouvez utiliser cette fonction que j'ai trouvée sur cette page Comment 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)
}

47
2018-06-04 12:04



Voici une synchrone version 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 fonctionnement interdomaine, le serveur devra définir allow-origin en-tête dans sa réponse.


46
2017-12-11 11:54