percorsi relativi RequireJS moduli / pacchetti

Question

Sono abbastanza nuovo per RequireJS e ho incontrato un po 'un problema. Ho scritto un piccolo quadro costruito su Backbone utilizzando RequireJS e voglio che sia riutilizzabile in diversi progetti. Così, con qualche ricerca ho imparato che richiedono permette pacchetti. Questo sembrava come quello che stavo cercando. Ho un file main.js per lanciare la mia app che in sostanza si presenta in questo modo:

require.config({
  packages: ['framework']
});

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

Poi, nella stessa directory come i miei main.js ho un'altra directory chiamata "quadro", che contiene un altro main.js che assomiglia a questo:

define(function(require, exports, module) {
  exports.createDash = function(dash, element) {
    require(['dash/dash.model', 'dash/dash.view'], function(DashModel, DashView) {
      return new DashView({
        model: new DashModel(dash),
        el: element ? element : window
      });
    });
  };
});

Nella ricerca ho trovato questa pagina il che indica che l'argomento 'require' ambito dovrebbe essere al modulo. Tuttavia, quando cerco di chiedere le cose sono ancora relativi alla mia main.js. originale Ho provato un certo numero di cose e cercato per ore senza alcun risultato. C'è un modo che io possa avere la mia richiedono / definire le chiamate all'interno del mio pacchetto includeva relativi alle main.js in esso di root?

Answer 1

È necessario definire il vostro modulo come pacchetto nella richiedere la configurazione:

require.config({
  packages: [
    { name: 'packagename',
      location: 'path/to/your/package/root',  // default 'packagename'
      main: 'scriptfileToLoad'                // default 'main' 
    }]
  ... some other stuff ...
});

Per caricare il modulo è sufficiente utilizzare il 'packagename' ai requisiti:

define(['jquery', 'packagename'], function($, MyPackage) {
  MyPackage.useIt()
});

Nel pacchetto è necessario utilizzare il prefisso ./ per caricare i file relativi al modulo:

define(['globalDependency', './myLocalFile'], function(Asdf, LocalFile) {
  LocalFile.finallyLoaded();
});

---

C'è un utile scorciatoia: se il nome del pacchetto è uguale alla tua posizione e il file principale si chiama 'main.js', allora si può sostituire questo

  packages: [
    { name: 'packagename',
      location: 'packagename',
      main: 'main'
    }]

a questo:

  packages: ['packagename']

Per quanto posso vedere, è già tentato di definire un pacchetto, ma ha usato anche il ./ prefisso? Senza questo prefisso richiedono cercherà di trovare i file in esso è globale root-path. E senza un pacchetto, ./ sarà inutile perché il percorso relativo è uguale alla radice-percorso globale.

Acclamazioni

Answer 2

ho capito la risposta alla mia domanda, e la soluzione (non erano la stessa apparentemente). Credo che vi posterò qui nel caso in cui esso può aiutare qualcun altro in futuro.

In sostanza quello che mi mancava era di caricare la mia quadro all'interno del proprio contesto. Ho trovato l'opzione contesto sotto il configurazione sezione sul richiedono di sito web e un esempio di come usarlo . Inizialmente ho provato questo facendo qualcosa di simile:

var req = require.config({
    baseUrl: 'framework',
    context: 'framework',

    paths: {
        jQuery: 'lib/jquery/jquery-1.7.min.js',
        Underscore: 'lib/underscore/underscore.min.js',
        Backbone: 'lib/backbone/backbone.min.js',
        etc...
    }
});

req(['main'], function() {});

Ci sono stati due problemi con questo. In primo luogo, la mia variabile 'rich' era in fase di definizione al di fuori del quadro, ma ho voluto il quadro per definire i propri percorsi. E in secondo luogo, ogni volta che un file al di fuori del quadro richiederebbe un file all'interno del quadro, che a sua volta richiederebbe 'jQuery', per esempio, allora jQuery (o qualsiasi altra cosa) non sono richieste dal all'interno del contesto dell'istanza quadro di richiedere e quindi non riusciva a trovare il file.

Quello che ho finito per fare stava definendo main.js del mio quadro di aspetto simile a questo:

var paths = {
    jQuery: 'lib/jquery/jquery-1.7.min.js',
    Underscore: 'lib/underscore/underscore.min.js',
    Backbone: 'lib/backbone/backbone.min.js',
    etc...
};

define(function() {
    var exports = {};

    exports.initialize = function(baseUrl, overridePaths, callback) {
        if(!overridePaths) {
        overridePaths = {};
        }
        if(baseUrl && baseUrl[baseUrl.length - 1] != '/') {
            baseUrl = baseUrl + '/';
        }

        var fullpaths = {};
        for(var path in paths) {
            // Don't add baseUrl to anything that looks like a full URL like 'http://...' or anything that begins with a forward slash
            if(paths[path].match(/^(?:.*:\/\/|\/)/)) {
                fullpaths[path] = paths[path];
            }
            else {
                fullpaths[path] = baseUrl + paths[path];
            }
        }

        var config = {paths: fullpaths};
        for(var pathName in overridePaths) {
            config.paths[pathName] = overridePaths[pathName];
        }
        require.config(config);

        // Do anything else you need to do such as defining more functions for exports

        if(callback) {
            callback();
        }
    }

    return exports;
});

E poi nel main.js del mio file di progetto Io faccio solo questo:

require(['framework/main'], function(framework) {
    // NOTE: This setTimeout() call is used because, for whatever reason, if you make
    //       a 'require' call in here or in the framework without it, it will just hang
    //       and never actually go fetch the files in the browser. There's probably a
    //       better way to handle this, but I don't know what it is.
    setTimeout(function() {
        framework.initialize('framework', null, function() {
            // Do stuff here
        }
    }, 0);
});

Questo prende tutto ciò che è passato in per inizializzare il quadro () metodo per 'baseURL' e antepone che per i percorsi che le definisce quadro che non iniziano con una barra o 'nulla: //', a meno che non siano di override percorsi. In questo modo il pacchetto utilizzando il quadro per le cose di override come 'jQuery'.

Answer 3

Questo ha funzionato per me, l'aggiunta di un prefisso "./" ai nomi di modulo:

define(function (require, exports, module) {
    exports.createDash = function (dash, element) {
        require([ './dash/dash.model', './dash/dash.view' ], function (DashModel, DashView) {
            return new DashView({
                model : new DashModel(dash),
                el : element ? element : window
            });
        });
    };
});

Answer 4

Un processo che funzionava bene per me per consentire ad un pacchetto con moduli da utilizzare direttamente da dati principale o da una struttura esterna, supponendo che un main.js (o altro pacchetto principale) è chiamato con un nome particolare, sia utilizzare var baseUrl = require.toUrl('packageName') + '/../' come prefisso ad un file di configurazione require.config({ paths: { ... } }). Per esempio:

var music21Base = require.toUrl('music21') + '/../';

require.config({ paths: {
                          'jquery': music21Base + 'ext/jquery/jquery.2.1.10.min';
                          'subModuleLoader': music21Base + 'src/subModuleLoader';
                         }  });

L'impostazione di context: "xxx" ha funzionato bene per i moduli di chiamata normali con ./modName ma non ha funzionato per l'argomento paths per me.