Les chemins relatifs avec des modules / packages RequireJS

Question

Je suis assez nouveau pour RequireJS et j'ai rencontré un peu d'un problème. J'ai écrit un petit cadre construit sur Backbone en utilisant RequireJS et je veux que ce soit réutilisable dans différents projets. Alors, avec quelques recherches, j'ai appris qui nécessitent des paquets permet. Cela semblait être ce que je cherchais. J'ai un fichier main.js pour lancer mon application qui ressemble essentiellement à ceci:

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

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

Ensuite, dans le même répertoire que mes main.js j'ai un autre répertoire appelé « cadre » qui contient un autre main.js qui ressemble à ceci:

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

Dans la recherche, j'ai trouvé cette page ce qui indique que l'argument « besoin » doit être portée définie au sous-module. Cependant, lorsque je tente d'exiger des choses qu'ils sont encore par rapport à mon main.js. d'origine J'ai essayé un certain nombre de choses et cherché pendant des heures en vain. Est-il possible que je peux avoir mon besoin / définir des appels dans mon package inclus par rapport aux main.js dans elle est la racine?

Answer 1

Vous devez définir votre sous-module comme package dans la configuration exigent:

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

Pour charger votre module, vous avez juste besoin d'utiliser votre « nom_du_paquet » aux exigences:

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

Dans votre package, vous devez utiliser le préfixe ./ pour charger vos fichiers relatifs à votre sous-module:

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

---

Il y a un raccourci utile: Si votre nom de package est égal à votre emplacement et votre fichier principal est appelé « main.js », vous pouvez remplacer

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

à ceci:

  packages: ['packagename']

Pour autant que je le vois, vous avez déjà essayé de définir un paquet mais vous n'utilisez aussi le préfixe ./? Sans ce préfixe require essayer de trouver les fichiers global chemin racine de lui. Et sans un paquet, ./ sera inutile, car le chemin relatif est le même que le chemin de la racine globale.

Vive

Answer 2

Je me suis dit la réponse à ma question, et la solution (ils ne sont pas les mêmes en apparence). Je suppose que je vais le poster ici au cas où il peut aider quelqu'un d'autre à l'avenir.

Essentiellement ce que je voulais était de charger mon cadre dans son propre contexte. J'ai trouvé l'option de contexte dans la section configuration sur besoin de site Web et un exemple de la façon de l'utiliser . Au départ, j'ai essayé cela en faisant quelque chose comme:

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

Il y avait deux problèmes. Tout d'abord, ma variable « req » était définie en dehors du cadre, mais je voulais le cadre de définir des chemins propres est tout. Et deuxièmement, chaque fois qu'un fichier en dehors du cadre nécessiterait un dossier dans le cadre, qui, à son tour require « jQuery », par exemple, alors jQuery (ou tout autre) ne serait pas nécessaire de dans le cadre de l'instance-cadre d'exiger et il n'a pas pu trouver le fichier.

Ce que je fini par faire était de définir mon main.js de cadre de quelque chose de ressembler à ceci:

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

Et puis dans le fichier de main.js de mon projet, je fais ceci:

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

Cela prend tout ce qui est passé dans la méthode initialize () cadre pour « baseURL » et précèder que, pour tous les chemins que le cadre définit qui ne commencent pas par une barre oblique ou « quoi que ce soit: // », à moins qu'ils ne sont override chemins. Cela permet à l'emballage en utilisant le cadre de l'emporter sur des choses comme « jQuery ».

Answer 3

Cela a fonctionné pour moi, en ajoutant un préfixe "./" aux noms de modules:

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 processus qui a bien fonctionné pour moi pour permettre à un paquet de sous-modules pour être utilisé directement à partir de données-main ou d'un cadre extérieur, en supposant que l'on appelle un main.js (ou un autre emballage principal) par un nom particulier, était d'utiliser var baseUrl = require.toUrl('packageName') + '/../' comme préfixe à un fichier de configuration require.config({ paths: { ... } }). Par exemple:

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

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

Le réglage de context: "xxx" a bien fonctionné pour appeler des modules normaux avec ./modName mais n'a pas fonctionné pour l'argument paths pour moi.