带有requirejs模块/软件包的相对路径

StackOverflow https://stackoverflow.com/questions/9302284

  •  25-10-2019
  •  | 
  •  

题

我是Requirejs的新手，我遇到了一些问题。我已经写了一个使用Requirejs建立在骨架上的小框架，我希望它可以在不同的项目中重新使用。因此，通过一些搜索，我了解到需要包装。这似乎是我想要的。我有一个main.js文件来启动我的应用程序，该应用实际上是这样的：

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

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

然后，在与我的main.js同一目录中，我有另一个名为“框架”的目录，其中包含另一个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
      });
    });
  };
});

在搜索中我发现 这一页 这表明应将“要求”参数范围范围范围范围。但是，当我尝试需要事物时，它们仍然相对于我的原始main.js。我已经尝试了许多事情，并搜索了几个小时，但无济于事。有什么办法可以在包含在root中的main.js中包含的包装中的需要/定义呼叫？

有帮助吗？

解决方案

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

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']

据我所知，您已经尝试定义一个软件包，但是您还使用了./前缀吗？没有此前缀的要求，将尝试在其全局根路径中找到文件。而且没有包裹 ./ 将是毫无用处的，因为相对路径与全局根路径相同。


干杯

其他提示

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

从本质上讲，我想要的是将我的框架加载到自己的上下文中。我找到了下文选项 配置部分 在需求网站上 如何使用它的示例. 。最初，我通过做类似的操作来尝试以下操作：

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（或其他任何内容）需要，因此找不到文件。

我最终所做的就是定义我的框架的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”的初始化方法，并将其预先介绍到该框架定义的任何路径，除非它们是覆盖路径，否则该框架不以前斜线或“ notings：// nothing”的速度开始。这允许使用框架的软件包覆盖“ jQuery”之类的东西。

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

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

假设Main.js（或其他软件包Main）以特定名称调用，则可以直接从Data-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 我的论点。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top