Rutas relativas con módulos/paquetes requiradores

Question

Soy bastante nuevo en Requerirjs y me he encontrado con un poco de problema. He escrito un pequeño marco construido en la columna vertebral utilizando necesidades y quiero que sea reutilizable en diferentes proyectos. Entonces, con algunas búsquedas, aprendí que requiere que permita paquetes. Esto parecía lo que estaba buscando. Tengo un archivo main.js para iniciar mi aplicación que esencialmente se ve así:

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

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

Luego, en el mismo directorio que mi principal, tengo otro directorio llamado "marco" que contiene otro main.js que se ve así:

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

En la búsqueda, encontré esta página lo que indica que el argumento 'requerir' debe alcanzar el submódulo. Sin embargo, cuando trato de requerir cosas, todavía están en relación con mi Main.js. He probado varias cosas y busqué horas en vano. ¿Hay alguna forma de que pueda tener mis llamadas requeridas/Definir dentro de mi paquete incluidas en relación con el principal.js en su raíz?

Answer 1

Debe definir su Submodule como paquete en la configuración Requerir:

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

Para cargar su módulo, solo necesita usar su 'PackageName' en los requisitos:

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

En su paquete debe usar el ./ prefijo para cargar sus archivos en relación con su submódulo:

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

---

Hay un atajo útil: si el nombre de su paquete es igual a su ubicación y su archivo principal se llama 'main.js', puede reemplazar esto

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

a esto:

  packages: ['packagename']

Por lo que puedo ver, ya intentaste definir un paquete, pero ¿también usaste el ./ prefijo? Sin este prefijo, intentará encontrar los archivos en su ritmo raíz global. Y sin un paquete, ./ será inútil porque la ruta relativa es la misma que la ruta de la raíz global.

Salud

Answer 2

Descubrí la respuesta a mi pregunta y la solución (aparentemente no eran la misma). Supongo que lo publicaré aquí en caso de que pueda ayudar a alguien más en el futuro.

Esencialmente, lo que quería era cargar mi marco dentro de su propio contexto. Encontré la opción de contexto bajo el sección de configuración en el sitio web de Require y un Ejemplo de cómo usarlo. Originalmente probé esto haciendo algo como:

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

Hubo dos problemas con esto. Primero, mi variable 'Req' se estaba definiendo fuera del marco, pero quería que el marco definiera sus propios caminos. Y segundo, cada vez que un archivo fuera del marco requeriría un archivo dentro del marco, que a su vez requeriría 'jQuery', por ejemplo, entonces jQuery (o cualquier otra cosa) no se requeriría desde el contexto de la instancia del marco de necesidad y por lo tanto no pudo encontrar el archivo.

Lo que terminé haciendo fue definir el principal.js de mi marco para verse algo así:

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

Y luego en el archivo Main.js de mi proyecto, solo hago esto:

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

Esto toma lo que se pasa al método Initialize () del marco para 'BaseUrl' y prepoca eso en cualquier ruta que el marco define que no comienza con una barra de avance o 'cualquier cosa: //', a menos que estén anulando las rutas. Esto permite que el paquete use el marco para anular cosas como 'jQuery'.

Answer 3

Esto funcionó para mí, agregando un "./" prefijo los nombres del módulo:

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 proceso que funcionó bien para mí por permitir que un paquete con submódulos se use directamente de Data-Main o de un marco externo, suponiendo que un nombre en particular llame a un nombre principal (u otro paquete principal). var baseUrl = require.toUrl('packageName') + '/../' Como prefijo de un require.config({ paths: { ... } }) archivo de configuración. Por ejemplo:

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

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

La configuración de context: "xxx" funcionó bien para llamar a módulos normales con ./modName pero no funcionó para el paths argumento para mi.