Javascript RequireJS 相对路径

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14548369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 17:10:02  来源:igfitidea点击:

RequireJS relative paths

javascriptrequirejs

提问by Szymon Rozga

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

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

The layout of my code at the moment is:

目前我的代码布局是:

/
  default.html
  js
    code.js
    require-config.js 
    lib
      /require.js
      bridge
        bridge.js
        bindings1.js
        bindings2.js
        bindings3.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.

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

My require-config is very simple:

我的 require-config 非常简单:

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

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

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

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

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:

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

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.

但这不是我想要的。这似乎是一个非常基本的用例,我想我可能误解了相对路径的工作方式。

Thanks

谢谢

回答by ddotsenko

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

相对 ID 是相对于解析 ID 的模块 ID 进行解析的。见AMD规范module id format部分。

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

有两种方法可以将相对依赖项 ID 构建为正确的上下文/范围:

Define call

定义调用

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:

定义调用是“模块”的开始/定义。在define()调用中要求的所有依赖项的范围都在/相对于该模块的 ID。例子:

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

or

或者

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

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

在上述两种情况下,./child都根据define()调用定义的模块 ID 进行解析。在这两种情况下,模块ID是hand/named/module./child决心hand/named/child(当时间来得到它+”的.js'很明显,)

"Scoped" require

“范围”要求

You can change the scope of requirecall 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.

您可以require通过覆盖将调用范围从全局更改为本地。您实际上不需要覆盖/保留 name require,这是它所做更改的含义。require 功能成为特定模块的“本地”功能。

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

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

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

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

结果 B 是局部范围的,与模块 id 相关联,hand/named/module因此./child被解析为hand/named/child

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

@CristiPufu 推荐的是require用局部对象覆盖全局变量,该局部对象仅在该函数的范围内是局部的:

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

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

我的偏好是将所有相关资源放入define调用中。使它们明确和有意义,因为很清楚它们与什么相关。

回答by Dmitry Masley

Use "packages" in require config. Here the valid answer for you question topic

在需要配置中使用“包”。这是您问题主题的有效答案

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

Inside of package you will be able to use relative paths.

在包内,您将能够使用相对路径。