RequireJS

Question

鉴于我的项目结构，我无法理解如何为 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 保持一致？

Answer 1

我在 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
您不需要在配置中的任何地方使用 ../

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

Answer 2

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

Answer 3

总结

不要连续两次要求同一个文件，尤其是如果是更改配置选项的文件，尤其是如果它使用相对路径。
使用单个应用程序入口点。如果您不能在一个地方启动您的应用程序，将很难（尽管并非不可能）使用 data-main 属性。
在包含模块或设置配置时，使用 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 问题。

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

RequireJS - what should I set for the BaseUrl?

javascript

directory-structure

project-structure

relative-path

总结

单一入口点

多个要求

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

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

RequireJS - what should I set for the BaseUrl?

javascript

directory-structure

project-structure

relative-path

requirejs

总结

单一入口点

多个要求

使用paths避免../

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