RequireJS相对路径 [英] RequireJS relative paths

问题描述

我是RequireJS的新手。我在Knockout.js中编写了许多自定义绑定，并希望使用模块将它们拆分。

I'm new to RequireJS. I'm writing a number of custom bindings in Knockout.js and want to split them up using modules.

目前我的代码布局是：

/
  default.html
  js
    code.js
    require-config.js 
    lib
      /require.js
      bridge
        bridge.js
        bindings1.js
        bindings2.js
        bindings3.js

我想从default.html加载bridge.js并在所有绑定文件中加载。我已经尝试使用require函数使用或内联js加载bridge.js。

I want to load bridge.js from default.html and have that load in all of the bindings files. I've tried loading bridge.js using a or inline js using the require function.

我的require-config非常简单：

My require-config is very simple:

require.config({
    baseUrl: '/'
});

在bridge.js中，我在使用相对路径加载文件时遇到问题。我试过了：

In bridge.js, I am having problems loading the files using a relative path. I tried:

require(['./bindings1', './bindings2', './bindings3'], function () {
    console.log('loaded');
});

但这最终只能使用路径baseUrl +'bindings1.js'。我在bridge.js中尝试了各种迭代。我唯一成功的是如果我写完整个路径：

But this just ends up using the path baseUrl + 'bindings1.js', for example. I've tried various iterations in bridge.js. The only success I've had is if I write the entire path:

require(['js/bridge/bindings1', 'js/bridge/bindings2', 'js/bridge/bindings3'], function () {
    console.log('loaded');
});

但这不是我想要的。这似乎是一个非常基本的用例，我想我可能会误解相对路径是如何工作的。

But that is not what I want. This seems like a pretty basic use case and I think I may be misunderstanding how the relative paths work.

谢谢

推荐答案

相对于模块ID解析相对ID解析ID的位置。请参阅 AMD规范的模块ID格式 section。

Relative IDs are resolved relative to the module ID within which the ID is resolved. See AMD spec's module id format section.

有两种方法可以将相对依赖关系ID构建到正确的上下文/范围中：

There are two ways to frame a relative dependency ID into a correct context/scope:

定义调用是模块的开始/定义。在 define（）调用中要求的所有依赖项都限定在该模块的ID内/相对于该模块的ID。示例：

Define call is the start/definition of "module." All dependencies asked for within define() call are scoped to be within/relative to that module's ID. Example:

// does not matter what the file name is.
define(
    'hand/named/module'
    , ['./child']
    , factoryFunction
)

或

// inside of 'hand/named/module.js' file.
define(
    ['./child']
    , factoryFunction
)

在上述两种情况下， ./ child 将根据 define（）定义的模块ID解析致电。两种情况下的模块ID都是 hand / named / module ， ./ child 被解析为 hand / named / child （+'。js'很明显，到时候了）

In both of the above cases, ./child is resolved against the module ID defined by the define() call. The module id in both cases is hand/named/module and the ./child is resolved to hand/named/child (+ '.js' obviously, when time comes to get it)

您可以通过覆盖来改变 require 从全局调用到本地的范围。实际上你不需要覆盖/保留名称 require ，这就是它改变的含义。 require函数变为特定模块的本地。

You can change the scope of require call from global to local by overriding it. You actually don't need to override / keep the name require, it's the meaning of what it does changes. The require functionality becomes "local" to a particular module.

// inside 'hand/named/module.js' file
define(
    ['require']
    , function(myLocalRequire){
        require('./child', function(){
            // outcome A
        })
        myLocalRequire('./child', function(){
            // outcome B
        })
    }
)

在结果A中，您继续使用全局要求 - 附加到父范围的要求。你的 ./ child 解析为baseURL +'/ child'

There in outcome A you continue to use "global" require - the one attached to parent scope. Your ./child resolves to baseURL + '/child'

结果B是本地范围的，绑定到module id hand / named / module so， ./ child 被解析为 hand / named / child

The outcome B is locally-scoped, tied to module id hand/named/module so, ./child is resolved to hand/named/child

@CristiPufu建议用本地覆盖全局 require 变量只对该函数范围本地的对象：

What @CristiPufu recommended is to override the global require variable with local object that will be local only to the scope of that function:

// inside 'hand/named/module.js' file
define(
    ['require']
    , function(require){
        return function(){
            // here we have access only to "local" require,
            // since in the function declaration you decided to
            // override the 'require' variable with new object.
            // All code outside of this function will use global require.
            require('./child', function(){
                // outcome B
            })
        }
    }
)

我的偏好是将所有相关资源放在 define 打电话。因为很明显它们是相对的，所以使它们显而易见并且变得有趣。

My preference is to put all relative resources inside define call. Makes them explicit and meeningfull as it's clear what they are relative to.

这篇关于RequireJS相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！