requireJS un dossier entier

StackOverflow https://stackoverflow.com/questions/5892978

  •  28-10-2019
  •  | 
  •  

Question

Est-il possible de "demander" un dossier entier en utilisant requireJS.

Par exemple, j'ai un dossier de comportements avec une tonne de fichiers de comportement js.J'aimerais vraiment pouvoir utiliser simplement require (['behavior / *'], function () {...});pour tout charger dans ce dossier plutôt que d'avoir à garder cette liste à jour.Une fois compressés et optimisés, tous ces fichiers seraient regroupés, mais pour le développement, il est plus facile de travailler avec eux individuellement.

Était-ce utile?

La solution

JavaScript dans le navigateur n'a pas d'accès au système de fichiers et il ne peut donc pas numériser un répertoire pour les fichiers.Si vous construisez votre application dans un langage de script comme PHP ou Ruby, vous pouvez écrire un script qui analyse le répertoire et ajoute les noms de fichiers à l'appel requis ().

Autres conseils

Bien que JavaScript dans le navigateur ne puisse pas (et ne devrait pas) voir le système de fichiers, j'ai créé une tâche Grunt qui fera exactement cela.Je travaille toujours dessus pour le retoucher ici et là, mais vous êtes invités à y jeter un œil.

https://npmjs.org/package/require-wild

npm install require-wild

Dans votre cas, tout ce que vous avez à faire est de configurer les paramètres de la tâche 

grunt.initConfig({
    requireWild: {
        app: {
            // Input files to look for wildcards (require|define)
            src: ["./**/*.js"], 

            // Output file contains generated namespace modules
            dest: "./namespaces.js", 

            // Load your require config file used to find baseUrl - optional
            options: { requireConfigFile: "./main.js" }
        }
    }
}); 

grunt.loadNpmTasks("require-wild");

grunt.registerTask('default', ['requireWild']);

Ensuite, exécutez la tâche de grognement.Votre fichier sera généré.Modifiez votre main.js pour charger namespaces.js

require(['namespaces'], function () { ... });

Permettant ainsi maintenant aux modules sous src d'utiliser des dépendances avec la correspondance de motifs glob de grunt.

require(['behaviors/**/*'], function (behaviors) { }

Cette idéologie suppose que vous avez une structure de fichiers significative.

Je sais que c'est vieux, mais j'aimerais partager ma solution:

Pour cette solution, vous avez besoin de JQuery

1) Créez un script bash qui listera tous les fichiers js dans "MyDirectory /" et enregistrez-le dans "directoryContents.txt" : 

#!/bin/bash
  #Find all the files in that directory...
  for file in $( find MyDirectory/ -type f -name "*.js" )
        do
          fileClean=${file%.js} #Must remove .js from the end!
          echo -n "$fileClean " >> MyDirectory/directoryContents.txt
        done
  • Le fichier ressemblera à ceci:

MyDirectory / FirstJavascriptFile MyDirectory / SecondJavascriptFile MyDirectory / ThirdJavascriptFile

  • Problème avec mon script! Met un "" supplémentaire à la fin, ça gâche les choses! Assurez-vous de supprimer l'espace excédentaire à la fin de directoryContents.txt

2) Puis dans votre code JS côté client:

  • faire une requête "GET" pour récupérer le fichier texte
  • Pour chaque entrée (divisée par l'espace), "exiger" ce fichier:

. 

$.get( "MyDirectory/directoryContents.txt", {}, function( data ) {
    var allJsFilesInFolder = data.split(" ");
    for(var a=0; a<allJsFilesInFolder.length; a++)
    {
        require([allJsFilesInFolder[a]], function(jsConfig) 
        {
            //Done loading this one file
        });
    }
}, "text");

J'avais un problème avec ce code qui ne se terminait pas avant mon autre code, alors voici ma réponse étendue: 

define([''], function() {

return {

    createTestMenu: function() 
    {
        this.loadAllJSFiles(function(){
            //Here ALL those files you need are loaded!
        });
    },

    loadAllJSFiles: function(callback)
    {   
        $.get( "MyDirectory/directoryContents.txt", {}, function( data ) {
            var allJsFilesInFolder = data.split(" ");
            var currentFileNum = 0;
            for(var a=0; a<allJsFilesInFolder.length; a++)
            {
                require([allJsFilesInFolder[a]], function(jsConfig) 
                {
                    currentFileNum++;
                    //If it's the last file that needs to be loaded, run the callback.
                    if (currentFileNum==allJsFilesInFolder.length)
                    {
                        console.log("Done loading all configuration files.");
                        if (typeof callback != "undefined"){callback();}
                    }
                });
            }
        }, "text");
    }
}
});

Ce que j'ai fini par faire, c'est qu'à chaque démarrage de mon serveur Node, il exécutera le script bash, remplissant directoryContents.txt. Ensuite, mon côté client lit simplement directoryContents.txt pour la liste des fichiers, et exige chacun dans cette liste.

J'espère que cela vous aidera!

Il n'y a pas vraiment de moyen de le faire conceptuellement à la volée (à ma connaissance).

Il y a cependant quelques solutions:

Utilisez grunt et concat, puis demandez simplement ce monstre ... Je sais, un peu nul.

Ce que je pense est une meilleure solution ... utilisez une hiérarchie d'exigences comme ceci: 

require('/js/controllers/init', function(ctrls){
    ctrls(app, globals);
});

// /js/controllers/init.js
define('js/controllers/index', 'js/controllers/posts', function(index, posts){
    return function protagonist(app, globals){
        var indexModule = index(app, globals);
        var indexModule = posts(app, globals);

        return app || someModule;
    };
});

// /js/controllers/index.js
define('js/controllers/index', 'js/controllers/posts', function(index, posts){
    return function protagonist(app, globals){
        function method1(){}
        function method2(){}

        return {
           m1: method1,
           m2: method2
        };
    };
});

Notez que "protagonist" function.Cela vous permet d'initialiser les modules avant leur utilisation, donc maintenant vous pouvez passer un 'sandbox' - dans ce cas app et globals.

De façon réaliste, vous n'auriez pas /js/controllers/index.js ... Cela devrait probablement être quelque chose comme /js/controllers/index/main.js ou /js/controllers/index/init.js pour qu'il y ait un répertoire adjacent à (frère de) /js/controllers/init.js appelé "index".Cela rendra vos modules évolutifs pour une interface donnée - vous pouvez simplement échanger des modules et garder votre interface identique.

J'espère que cela vous aidera!Bon codage!

J'ai écrit une bibliothèque pour résoudre ce problème. Finalement, quelqu'un d'autre est venu et a amélioré ma bibliothèque, la voici:

https://github.com/smartprocure/directory-metagen

Vous pouvez utiliser ma bibliothèque avec Gulp ou autre - elle génère des métadonnées pour votre projet et RequireJS peut utiliser ces métadonnées pour exiger les fichiers souhaités du système de fichiers.

L'utilisation de cette bibliothèque produira un module RequireJS qui ressemble à ceci: 

define(
    [
        "text!app/templates/dashboardTemplate.ejs",
        "text!app/templates/fluxCartTemplate.ejs",
        "text!app/templates/footerTemplate.ejs",
        "text!app/templates/getAllTemplate.ejs",
        "text!app/templates/headerTemplate.ejs",
        "text!app/templates/homeTemplate.ejs",
        "text!app/templates/indexTemplate.ejs",
        "text!app/templates/jobsTemplate.ejs",
        "text!app/templates/loginTemplate.ejs",
        "text!app/templates/overviewTemplate.ejs",
        "text!app/templates/pictureTemplate.ejs",
        "text!app/templates/portalTemplate.ejs",
        "text!app/templates/registeredUsersTemplate.ejs",
        "text!app/templates/userProfileTemplate.ejs"
    ],
    function(){

        return {

            "templates/dashboardTemplate.ejs": arguments[0],
            "templates/fluxCartTemplate.ejs": arguments[1],
            "templates/footerTemplate.ejs": arguments[2],
            "templates/getAllTemplate.ejs": arguments[3],
            "templates/headerTemplate.ejs": arguments[4],
            "templates/homeTemplate.ejs": arguments[5],
            "templates/indexTemplate.ejs": arguments[6],
            "templates/jobsTemplate.ejs": arguments[7],
            "templates/loginTemplate.ejs": arguments[8],
            "templates/overviewTemplate.ejs": arguments[9],
            "templates/pictureTemplate.ejs": arguments[10],
            "templates/portalTemplate.ejs": arguments[11],
            "templates/registeredUsersTemplate.ejs": arguments[12],
            "templates/userProfileTemplate.ejs": arguments[13]
        }
    });

Vous pouvez alors exiger des modules dans votre front-end comme ceci: 

var footerView = require("app/js/jsx/standardViews/footerView");

cependant, comme vous pouvez le voir, c'est trop verbeux, donc la manière magique est comme ça:

nommez la dépendance ci-dessus comme allViews!

maintenant vous pouvez faire: 

var allViews = require('allViews');
var footerView = allViews['standardViews/footerView'];

Il y a deux avantages à exiger des répertoires entiers:

(1) en production, avec l'optimiseur r.js, vous pouvez pointer vers une dépendance (module A) et il peut ensuite facilement tracer toutes les dépendances de A qui représentent un répertoire entier

(2) en développement, vous pouvez avoir besoin de répertoires entiers à l'avance, puis utiliser la syntaxe synchrone pour exiger des dépendances car vous savez qu'elles ont déjà été chargées

profitez de "RequireJS-Metagen"

https://github.com/smartprocure/directory-metagen

https://www.npmjs.com/package/requirejs-metagen

https://github.com/ORESoftware/requirejs-metagen

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top