RequireJS - 我应该为 BaseURL 设置什么

RequireJS - what should I set for the BaseUrl?

本文关键字：设置什么 BaseURL 我应该 RequireJS 更新时间：2023-09-26

鉴于我的项目结构，我无法理解如何为 requirejs 设置基本 URL。

问题：并非所有 html 文件都位于同一文件夹级别。脚本文件路径根据 html 页面的位置不断变化。

我尝试过什么：我已经搜索了API，但我只是不明白BaseURL应该是什么才能获得所有页面的正确路径。我已经测试了变体（./js/lib，/js/lib/，我试图不将其全部包含在主文件中.js但下面的这个是唯一似乎在某些文件上产生正确结果的文件。

主.js

requirejs.config({
    baseUrl: '../js/lib',    
    paths: {
        'jquery' : (document.addEventListener) ? ['vendor/jquery'] : ['vendor/jquery-1.9.1']
    },
    shim: {
        'foundation/foundation': {
            deps: ['jquery']
        },
        'foundation/foundation.alert': {
            deps: ['jquery', 'foundation/foundation']
        },            
        'vendor/slick.min': {
            deps: [
                'jquery',
                'foundation',
                'foundation/foundation.interchange'
            ],
            exports: 'slick'
        }
    }
});
requirejs(['jquery'
    , 'foundation/foundation'   
]);

文件夹结构

Main Folder
│
│  Some Folder
│  ├── css
│  ├── js
│  │   ├── lib
│  │   │   ├── foundation
│  │   │   │   ├── foundation.alert.js
│  │   │   │   ├── ...(foundation component js files)
│  │   │   │   ├── foundation.js
│  │   │   ├── vendor
│  │   │   │   ├── jquery-1.9.1.js
│  │   │   │   ├── jquery.js
│  │   │   ├── foundation.min.js
│  │   │   ├── slick.min.js
│  │   │   └── slickModule.js
│  │   ├── main.js
│  │   └── require.js   
│  ├── html
│  │   ├── components
│  │   │   ├── slider.html    [All scripts throw 404: Main Folder/Some Folder/html/js/lib/vendor/file.js ]
│  │   ├── home.html           [loads files as expected]
│  │   ├── second.html         [loads files as expected]
│  │   ├── subfolder
│  │   │   └── random.html
│  ├── extra folder
│  │   └── index.html   [All scripts throw 404: Main Folder/Some Folder/extra folder/js/lib/vendor/file.js ]
│  │
│  Another Folder
│  ├── index.html [All scripts throw 404]

/html/components/slider.html

当我尝试以这种方式调用 require 时，slickModule 的 url 是"Main Folder/some Folder/html/js/lib/slickModule.js" - 注意 'html' 在基本 url 之后添加

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <script data-main="../../js/main" src="../../js/require.js"></script>
    <script>
        require(['../js/main'], function () {
            require(['slickModule']);
        });
    </script>
</head>
<body>
...
</body>
</html>

有人可以帮助我了解为什么会发生这种情况吗？

如果可能的话，我该怎么做才能使基本 URL 保持一致？

总结

不要连续两次要求同一个文件，尤其是当该文件更改了配置选项时，尤其是当它使用相对路径时。
使用单个应用程序入口点。如果无法在一个位置启动应用程序，则很难（尽管并非不可能）使用 data-main 属性。
在包含模块或设置配置时，使用paths配置选项指向文件，而不是相对路径。

单一入口点

首先，您可能会遇到一些data-main属性问题，因为它用于多个入口点时的行为是未记录的。正如它所说：

如果要在 HTML 页面中执行require()调用，则最好不要使用 data-main。 data-main 仅当页面只有一个主入口点（即 data-main 脚本）时才使用。对于想要执行内联require()调用的页面，最好将它们嵌套在配置的require()调用中

多重需求

其次，您使用 data-main 属性来加载定义库行为的配置（换句话说，require/requirejs 函数是自定义的），但随后使用该自定义工具再次加载配置：

<script data-main="../../js/main" src="../../js/require.js"></script>
<script>
    require(['../js/main'], function () {
        require(['slickModule']);
    });
</script>

我几乎肯定这引入了一些奇怪的行为。

使用`paths`避免`../`

第三，您的baseUrl会自动设置为加载它的 HTML 的位置或data-main脚本的位置。您可以通过创建单个入口点（可能是js/main），然后定义路径配置选项以隐藏嵌套模块来利用这一点。

换句话说，您的应用程序永远不需要请求../（或其任何变体），因为嵌套的任何内容都应由路径条目隐藏，例如：

"paths": {
    "slickModule": "lib/slickModule"
}

我知道这个答案并不能专门解决您的问题，但我确信其中一个问题 - 如果得到纠正 - 将解决您的 404 问题。

我在 ASP.NET MVC4 应用程序中遇到了同样的问题，结构如下：

Main Folder
├── Scripts
│   ├── Libraries
│   │   ├── jquery
│   │   |   ├── jquery-1.10.2.min.js
...

我所做的是使用服务器端技术的方法来确定应用程序的"根位置"。就我而言，这是HttpRequest.ApplicationPath，它"获取服务器上 ASP.NET 应用程序的虚拟应用程序根路径"。（来源）。

我的requirejs设置如下所示：

<script type="text/javascript">
    var require = {
        baseUrl: '@(Request.ApplicationPath)/Scripts',
        paths: {
            jquery: 'Libraries/jquery/jquery-1.10.2.min',
            ...
        }
    }
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Libraries/require/require.js")"></script>

总结一下：

我的基本 URL 是根应用程序路径加上Scripts文件夹
每个path都以作为Scripts子文件夹的文件夹开头
这迫使 js 使用库的绝对路径，而不是尝试从各个目录中找出相对路径。
paths配置中未指定的任何脚本也应从作为 Scripts 的子文件夹开始
您不需要在配置中的任何位置使用 ../

希望对您有所帮助，显然您需要针对您使用的任何技术进行调整。

由于在不同级别的不同文件夹中有 html 文件，因此将 baseUrl 设置为相对路径（即 ../lib/js ）适用于某些文件，但对于所有文件，这是意料之中的。您需要设置一个绝对路径，从根目录到lib文件夹，例如，如果"主文件夹"是您的根目录，则您的baseUrl应该是/Some Folder/js/lib/或/Some Folder/js/lib。我希望这有所帮助。

RequireJS - 我应该为 BaseURL 设置什么

RequireJS - what should I set for the BaseUrl?

总结

单一入口点

多重需求

使用paths避免../

使用`paths`避免`../`