richiede un intero cartella

Question

È possibile "richiedere" un'intera cartella utilizzando Requisitijs.

Ad esempio, ho una cartella di comportamenti con una tonnellata di file JS comportamentali. Mi piacerebbe davvero essere in grado di usare semplicemente Requisite (['comportamenti/*'], function () {...}); caricare tutto in quella cartella piuttosto che dover mantenere aggiornato quell'elenco. Una volta compressi e ottimizzati, avrei tutti quei file raggruppamenti insieme, ma per lo sviluppo è più facile lavorare con loro individualmente.

Answer 1

JavaScript nel browser non ha accesso al filesystem e quindi non può scansionare una directory per i file. Se stai costruendo la tua app in un linguaggio di scripting come PHP o Ruby, potresti scrivere uno script che scansiona la directory e aggiunge i nomi dei file alla chiamata requisito ().

Answer 2

Mentre JavaScript nel browser non può (e non dovrebbe) vedere il file system ho creato un'attività grugnita che farà proprio questo. Attualmente ci sto ancora lavorando toccandolo qua e là, ma sei il benvenuto a dare un'occhiata.

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

npm install require-wild

Nel tuo caso tutto ciò che dovresti fare è impostare le impostazioni dell'attività

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']);

Quindi eseguire l'attività grugnita. Il tuo file verrà generato. Modifica il tuo main.js caricare namespaces.js

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

Così ora permettendo i moduli sotto src Per utilizzare le dipendenze con la corrispondenza del modello Glob di Grunt.

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

Questa ideologia presuppone che tu abbia una struttura di file significativa.

Answer 3

So che è vecchio, ma vorrei condividere la mia soluzione:

Per questa soluzione hai bisogno di jQuery

1) Crea un file Script Bash che lo farà Elenca tutti i file JS in "mydirectory/", e Salvalo su "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

• Il file sembrerà così:

Mydirectory/firstjavascriptfile mydirectory/secondjavascriptfile mydirectory/terzojavascriptfile

• Problema con la mia sceneggiatura! Mette un extra "" alla fine, che incasina le cose! Assicurati di rimuovere lo spazio in eccesso alla fine di DirectoryContents.txt

2) quindi nel codice JS sul lato client:

• Fai una richiesta "OTTIENI" per recuperare il file di testo
• Per ogni voce (divisa dallo spazio), "richiede" quel file:

.

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

Stavo avendo un problema con questo codice non finendo prima del mio altro codice, quindi ecco la mia risposta estesa:

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

Quello che ho finito per fare è stato ogni volta che i miei stivali del server nodo, eseguiranno lo script bash, popolando DirectoryContents.txt. Quindi il mio lato client legge DirectoryContents.txt per l'elenco dei file e richiede ciascuno in quell'elenco.

Spero che sia di aiuto!

Answer 4

Non c'è davvero un modo per farlo concettualmente al volo (che conosco).

Ci sono alcuni lavori in giro però:

Uso grunt e concat E poi richiedi solo quel behemoth ... lo so, un po 'succhiare.

Quello che penso sia una soluzione migliore ... usa una gerarchia di richieste come così:

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

Notare che "protagonist" function. Ciò ti consente di inizializzare i moduli prima del loro uso, quindi ora puoi passare insandbox' -- in questo caso app e globals.

Realisticamente, non lo avresti fatto /js/controllers/index.js... probabilmente dovrebbe essere qualcosa di simile /js/controllers/index/main.js o /js/controllers/index/init.js in modo che ci sia una directory adiacente a (fratello di) /js/controllers/init.js chiamato "indice". Questo renderà i tuoi moduli scalabili a una determinata interfaccia: puoi semplicemente scambiare i moduli e mantenere la stessa interfaccia.

Spero che sia di aiuto! Codice felice!

Answer 5

Ho scritto una biblioteca per risolvere questo problema. Alla fine qualcun altro è venuto e ha migliorato la mia biblioteca, eccolo:

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

Puoi usare la mia lib con gulp o qualsiasi altra cosa: genera metadati per il tuo progetto e richiedere che i metadati richiedano i file desiderati dal filesystem.

L'uso di questo Lib produrrà un modulo requisito che assomiglia a questo:

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

Puoi quindi richiedere moduli nel tuo front-end in questo modo:

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

Tuttavia, come puoi vedere, questo è troppo verboso, quindi il modo magico è così:

Nomina la dipendenza sopra come Allviews!

ora puoi fare:

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

Ci sono due vantaggi nel richiedere le directory intere:

(1) In produzione, con l'ottimizzatore R.JS, puoi indicare una dipendenza (modulo A) e può quindi tracciare facilmente tutte le dipendenze di A che rappresentano un'intera directory

(2) In sviluppo, puoi richiedere intere directory in anticipo e quindi utilizzare la sintassi sincrona per richiedere dipendenze perché sai che sono già state caricate

Divertiti a "Requisitojs-Metagen"

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

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

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