RequireJS - 我应该为 BaseUrl 设置什么?

RequireJS - what should I set for the BaseUrl?

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

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

我试过的: 我已经搜索了 API,但我只是不明白 BaseURL 应该是什么获取所有页面的正确路径。我已经测试了变体(../js/lib、/js/lib/,我尝试不将其全部包含在 main.js 文件中)但是下面的这个是唯一一个似乎产生正确的某些 个文件的结果。

Main.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 保持一致?

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

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

我所做的是使用服务器端技术的方法来确定应用程序的 "root location"。就我而言,这是 HttpRequest.ApplicationPath,其中 "gets the ASP.NET application's virtual application root path on the server." (source).

我的 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
  • 的子文件夹开头
  • 这会强制 requirejs 使用库的绝对路径,而不是尝试从各种目录中找出相对路径。
  • 任何未在 paths 配置中指定的脚本也应从 Scripts
  • 的子文件夹开始
  • 您不需要在配置中的任何地方使用 ../

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

由于您在不同级别的不同文件夹中有 html 文件,将您的 baseUrl 设置为相对路径(即 ../lib/js)将适用于某些文件,但对于所有文件而言,这是预期的。您需要设置一个绝对路径,从您的根目录到您的 lib 文件夹,例如如果 'Main Folder' 是您的根目录,您的 baseUrl 应该是 /Some Folder/js/lib//Some Folder/js/lib。希望对您有所帮助。

总结

  1. 不要连续两次要求同一个文件,尤其是如果是更改配置选项的文件,尤其是如果它使用相对路径。
  2. 使用单个应用程序入口点。如果您不能在一个地方启动您的应用程序,将很难(尽管并非不可能)使用 data-main 属性。
  3. 在包含模块或设置配置时,使用 paths 配置选项指向文件,而不是相对路径。

单一入口点

首先,自 behavior when used for multiple entry points is undocumented 以来,您的 data-main 属性可能 运行 存在一些问题。正如它所说:

If you want to to do require() calls in the HTML page, then it is best to not use data-main. data-main is only intended for use when the page just has one main entry point, the data-main script. For pages that want to do inline require() calls, it is best to nest those inside a require() call for the configuration

多个要求

其次,您正在使用 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 configuration option 来隐藏嵌套模块来利用它。

换句话说,您的应用程序永远不需要请求 ../(或其任何变体),因为任何嵌套的内容都应该被路径条目隐藏,例如:

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

我知道这个答案并没有专门解决您的问题,但我确信其中一个问题在更正后会解决您的 404 问题。