RequireJS:为什么相对路径适用于define(),但不适用于require()？

Question

假设您有以下目录结构,以及以下文件:

root
|-- require-jquery.js
+-- folder
     |-- index.html
     |-- main.js
     +-- AnotherModule.js

在RequireJS中,当您引用以"."开头的模块时,RequireJS会查找当前模块所在的文件夹,即使这是一个子目录.但是,如果在调用define()之前更改baseUrl,则RequireJS会将依赖项映射到新的baseUrl.

您可以通过在index.html中设置baseUrl并将data-main更改为相对于baseUrl的路径来解决此问题:

文件夹/ index.html的:

<script>
    var require = {
        baseUrl : "../"
    };
</script>
<script data-main="folder/main" src="../require-jquery.js"></script>

文件夹/ main.js:

define(
        [ "jquery", './AnotherModule' ],
        function($, AnotherModule) {});

这仅适用于define():

文件夹/ main.js:

require(
        [ "jquery", './AnotherModule' ],
        function($, AnotherModule) {});

如果我尝试使用require(),RequireJS将在root中查找AnotherModule.js,而不是文件夹.为什么会这样,特别是为什么define()和require()之间的设计差异？

Answer 1

这是因为define指定了模块名称,而require则没有.

可以像这样调用Define:

define('folder/main',
        [ "jquery", './AnotherModule' ],
        function($, AnotherModule) {});

第一个参数是模块名称 - 模块的显式路径.Define()始终隐式指定路径,并且通常不建议使用显式路径.要求不带名称参数.

当您在define()中包含相对依赖项(如'./AnotherModule')时,会发现它相对于模块名称.在这种情况下,./ OtherModule将解析为文件夹/ AnotherModule.

在调用require()时,没有模块名称.相对依赖关系被解析为根.