Question

我对RequireJS很新，我遇到了一些问题。我使用RequireJS编写了一个基于Backbone构建的小框架，我希望它可以在不同的项目中重用。所以，通过一些搜索，我了解到需要允许包。这看起来像我在寻找。我有一个main.js文件来启动我的应用程序，基本上是这样的：

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

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

然后在与我的main.js相同的目录中，我有另一个名为＆＃34; framework＆＃34;的目录。其中包含另一个main.js，如下所示：

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

在搜索中，我发现this page表示需要＆＃39;参数应该作用于子模块。但是，当我尝试要求它们仍然相对于我原来的main.js.我已经尝试了很多东西，并且搜索了几个小时无济于事。有没有什么方法可以让我的包中的require / define调用包含在相对于它的根目录中的main.js中？

Answer 1

您需要在require配置中将子模块定义为包：

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

要加载您的模块，您只需要在要求中使用'packagename'：

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

在您的包中，您必须使用./前缀来加载相对于子模块的文件：

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

有一个有用的快捷方式：如果您的包名称等于您的位置，而您的主文件名为'main.js'，那么您可以替换此

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

到此：

  packages: ['packagename']

据我所知，您已经尝试定义了一个包，但是您是否也使用了./前缀？如果没有此前缀，require将尝试在其全局根路径中查找文件。如果没有包，./将无用，因为相对路径与全局根路径相同。

干杯

Answer 2

我找到了问题的答案和解决方案（显然它们不一样）。我想我会在这里发布，以防将来可以帮助其他人。

基本上我想要的是在自己的上下文中加载我的框架。我在require的网站configuration section和example of how to use it下找到了上下文选项。最初我试过这样做：

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

这有两个问题。首先，我的'req'变量是在框架之外定义的，但我希望框架定义它自己的路径。第二，每当框架外的文件需要框架内的文件时，例如，反过来需要'jQuery'，那么在框架实例的上下文中就不需要jQuery（或其他任何东西）需要，所以它找不到文件。

我最终做的是定义我的框架的main.js看起来像这样：

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

然后在我的项目的main.js文件中，我就这样做了：

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

这将传递给框架的'baseURL'的initialize（）方法，并将其预先添加到框架定义的不以正斜杠或'anything：//'开头的任何路径，除非它们是覆盖路径。这允许使用框架的包覆盖诸如'jQuery'之类的东西。

Answer 3

这对我有用，在模块名称中添加了"./"前缀：

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

一个适合我的进程，允许直接从data-main或外部框架使用包含子模块的包，假设main.js（或其他包main）由特定名称调用，使用var baseUrl = require.toUrl('packageName') + '/../'作为require.config({ paths: { ... } })配置文件的前缀。例如：

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

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

context: "xxx"的设置适用于使用./modName调用普通模块，但对我来说不适用于paths参数。

RequireJS模块/包的相对路径

4 个答案: