RequireJs：使用 r.js 构建时模块路径不存在错误

Question

我正在使用 RequireJs，但我在构建时遇到了问题。

我的结构是

webroot
  css
    /* css here */
  files
  img
  js
    emails
      verify.js
    lib
      jquery-1.8.3.min.js
      jquery-ui.min.js
      jquery.ui.selectmenu.js
      modernizr.js
      require.js
    orders
      form.js
    common.js
  js-build
    /* expected build output here */
  js-tools
    app.build.js

这是 CakePHP 项目的一部分，但 webroot 是 web 服务器的实际 webroot 所在的位置。

node 和 r.js.cmd 都在我的路径上，所以我没有将它包含在 js-tools 目录中。

访问默认页面时，是/，但也可能显示为/orders/form。出于这个原因，相对于 JS 的 URL 是一个问题。

当我加载 JS 时，我正在使用

<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript">
//<![CDATA[
require(['/js/common.js'], function(common){
    require(['orders/form']);
});

//]]>
</script>

这取自https://github.com/requirejs/example-multipage-shim。

我的 common.js 是

requirejs.config({
    "baseUrl": "/js/lib",
    "paths": {
        "orders": "../orders",
        "emails": "../emails",
        "jquery": [
            "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min",
            "jquery-1.8.3.min"
        ],
        "jquery-ui": [
            "//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min",
            "jquery-ui.min"
        ]
    },
    "shim": {
        "jquery.ui.selectmenu": ["jquery", "jquery-ui"]
    }
});

就目前而言，这适用于处理未优化的代码。重要的特点是js是用绝对URL引用的，是不是可以从/，或者/orders/form的代码中获取到。

我的 app.build.js 是

({
    appDir: '..', /* relative to app.build.js */
    mainConfigFile: '../js/common.js', /* relative to app.build.js */
    baseUrl: 'js/lib', /* relative to current directory */
    dir: '../js-build', /* relative to app.build.js */
    optimize: 'uglify2',
    paths: {
        "jquery": "empty:",
        "jquery-ui": "empty:",
        "jquery.ui.selectmenu": "empty:",
        "common": "../common",
        "orders": "../orders",
        "emails": "../emails"
    },
    modules: [
        {
            name: 'common',
            include: [
                'modernizr'
            ],
            exclude: ['jquery-1.8.3.min', 'jquery-ui.min', 'jquery.ui.selectmenu']
        },
        {
            name: 'orders/form',
            exclude: ['common', 'jquery.ui.selectmenu']
        },
        {
            name: 'emails/verify',
            exclude: ['common', 'jquery.ui.selectmenu']
        }
     ]
})

当优化从 webroot 以 r.js.cmd -o js-tools\app.build.js 运行时，我得到一个 js-build 目录，其中包含整个 webroot 目录的副本，已优化。虽然不理想（我想将其限制为仅优化 js 目录），但我可以使用我的 Ant 驱动的构建脚本将 js-build\js 目录的内容复制到正确的位置。

当我从命令行运行构建时，生成的 common.js、orders/form.js 和 emails/verify.js 都排除了 jquery.ui.selectmenu。 common.js 包含了modernizr，以及来自同一个库的头文件。 form.js 和 verify.js 也排除了 jquery.ui.selectmenu，并且没有任何标题。

但是，当我从我的 Ant 脚本运行时，orders/form.js 和 emails/verify.js 包括 jquery.ui.selectmenu 和 modernizr，尽管我已经给出了 common 和 jquery.ui.selectmenu 的具体说明被排除在外。

我已经排除了 jquery.ui.selectmenu，因为我正在使用的特定版本是按照以下形式编写的，并且浏览器存在 end jQuery 变量不可用的问题。通过排除 jquery.ui.selectmenu，我可以尝试单独加载它，就好像它来自 CDN。

(function($, undefined) {
    $.widget("ui.selectmenu", {...
    });
}( jQuery ));

那么，我的问题是，为什么同一个 app.build.js 会导致不同的输出？

Answer 1

在处理相对路径时，您可能需要在路径字符串的开头包含一个 "."（以指定您要从当前路径开始）。我最近在 grunt 上测试 r.js 时遇到了这个问题。我最初将我的 baseUrl 设置为 "/"，而它应该是 "。"

在您的情况下，您的 baseUrl 设置为 "js/lib" - 也许尝试 ".js/lib"

这有点奇怪，因为我收到的错误消息似乎具有正确的基本路径以及相对路径，但 r.js 仍然无法找到该文件。

这个问题很老了，但我看到它有很多观点，所以我想我会把它放在这里，因为它可能会帮助那里的人。