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

时间：2015-01-09 21:54:09

标签： javascript requirejs relative-path directory-structure project-structure

我无法理解如何根据项目结构设置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是 ＆＃34;主文件夹/某些文件夹/ html / js / lib / slickModule.js＆＃34; - 注意＆＃39; html＆＃39;在基本网址

之后添加 
<!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>

有人可以帮我看看为什么会这样吗？

如果它甚至可能，我该怎么做才能使基本网址保持一致？

3 个答案:

答案 0 :(得分：5)

摘要

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

    4. 单一入口点

    首先，您的data-main属性可能会因behavior when used for multiple entry points is undocumented问题而遇到一些问题。正如它所说：

      

    如果您想在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 configuration option来隐藏嵌套模块来利用它。

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

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

    我知道这个答案并没有专门解决你的问题，但我很肯定这些问题中的一个 - 经过纠正 - 将解决你的问题。

答案 1 :(得分：4)

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

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

我所做的是使用我的服务器端技术的方法来确定应用程序的根位置＆＃34;。就我而言，这是HttpRequest.ApplicationPath，它在服务器上获取ASP.NET应用程序的虚拟应用程序根路径。＆＃34; （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>

总结：

  • 我的基本网址是根应用程序路径加上Scripts文件夹
  • 每个path都以Scripts
    • 的子文件夹开头
  • 强制要求j使用库的绝对路径，而不是试图找出各个目录中的相对路径。
  • paths配置中未指定的任何脚本也应该以{{1​​}}
    • 的子文件夹开头
  • 您不需要在配置中的任何位置使用Scripts

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

答案 2 :(得分：0)

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

相关问题
最新问题