Relative Pfade mit Anforderungsmodulen/Paketen

Question

Ich bin ziemlich neu, um Jungen zu verlangen, und ich bin auf ein Problem gestoßen. Ich habe ein kleines Framework geschrieben, das auf dem Rückgrat mit Anforderungen basiert, und ich möchte, dass es in verschiedenen Projekten wiederverwendbar ist. Bei einigen Suchen habe ich gelernt, dass Pakete zulässigen Paketen erforderlich sind. Das schien das zu sein, wonach ich gesucht habe. Ich habe eine Main.js -Datei, um meine App zu starten, die im Wesentlichen so aussieht:

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

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

Dann habe ich im selben Verzeichnis wie mein main.js ein anderes Verzeichnis namens "Framework", das ein weiteres Main.js enthält, das so aussieht:

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

Bei der Suche fand ich diese Seite Dies zeigt an, dass das Argument "Erfordernis" an das Submodul gesendet werden sollte. Wenn ich jedoch versuche, Dinge zu verlangen, sind sie immer noch relativ zu meinem ursprünglichen Main.js. Ich habe eine Reihe von Dingen ausprobiert und stundenlang ohne Erfolg gesucht. Gibt es eine Möglichkeit, dass ich meine Anforderungen/Definieren von Anrufen in meinem Paket relativ zu den main.js in seiner Wurzel haben kann?

Answer 1

Sie müssen Ihr Submodul als Paket in der erforderlichen Konfiguration definieren:

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

Um Ihr Modul zu laden, müssen Sie nur Ihren "Packagenamen" bei den Anforderungen verwenden:

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

In Ihrem Paket müssen Sie die verwenden ./ Präfix zum Laden Ihrer Dateien relativ zu Ihrem Submodul:

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

---

Es gibt eine nützliche Abkürzung: Wenn Ihr Paketname Ihrem Standort entspricht und Ihre Hauptdatei "main.js" heißt, können Sie dies ersetzen

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

dazu:

  packages: ['packagename']

Soweit ich sehen kann, haben Sie bereits versucht, ein Paket zu definieren, aber haben Sie auch das Präfix verwendet? Versuchen Sie ohne dieses Präfix, die Dateien in seinem globalen Root-Bad zu finden. Und ohne Paket, ./ wird nutzlos sein, da der relative Weg dem globalen Wurzel-Pfad entspricht.

Prost

Answer 2

Ich fand die Antwort auf meine Frage und die Lösung (sie waren anscheinend nicht gleich). Ich denke, ich werde es hier veröffentlichen, falls es in Zukunft jemand anderem helfen kann.

Im Wesentlichen wollte ich mein Framework in seinen eigenen Kontext laden. Ich fand die Kontextoption unter dem Konfigurationsabschnitt auf der Website von Request und einer Beispiel dafür, wie man es benutzt. Ursprünglich habe ich dies versucht, indem ich so etwas wie:

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

Es gab zwei Probleme damit. Erstens wurde meine 'Req' -Variable außerhalb des Rahmens definiert, aber ich wollte, dass der Rahmen seine eigenen Wege definiert. Und zweitens, wenn eine Datei außerhalb des Frameworks eine Datei im Rahmen erfordern würde, was wiederum "jQuery" erfordern würde, wäre JQuery (oder was auch immer) nicht im Kontext der Framework -Instanz erforderlich von Erfordernis und so konnte es die Datei nicht finden.

Was ich am Ende gemacht habe, war, die Haupt.js meines Frameworks zu definieren, um so etwas auszusehen:

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

Und dann mache ich in der Main.js -Datei meines Projekts einfach Folgendes:

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

Dies nimmt alles an, was in die initialize () -Methode des Frameworks für 'BasistaRl' übergeben wird, und stellt vor, dass das Framework auf Wege definiert, die nicht mit einem Vorwärts -Schrägstrich oder "irgendetwas: //" beginnen, es sei denn, es handelt sich um Überschreibungswege. Dadurch kann das Paket, das das Framework verwendet, Dinge wie "jQuery" überschreiben.

Answer 3

Das funktionierte für mich und fügte eine hinzu "./" Präfix für die Modulnamen:

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

Ein Prozess, der für mich gut funktioniert hat, um ein Paket mit Submodules direkt von Data-Main oder einem externen Framework zu ermöglichen, vorausgesetzt, ein Main.js (oder ein anderes Paket-Haupt-Haupt) wird von einem bestimmten Namen aufgerufen var baseUrl = require.toUrl('packageName') + '/../' als Präfix zu a require.config({ paths: { ... } }) Konfigurationsdatei. Zum Beispiel:

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

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

Die Einstellung von context: "xxx" hat gut funktioniert, um normale Module mit dem Aufrufen von Modulen mit ./modName arbeitete aber nicht für die paths Argument für mich.