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的Urls是一个问题。

当我加载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，以及来自同一lib的头文件。 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，因为我正在使用的特定版本是使用以下形式编写的，并且浏览器有一个问题，即结束jQuery变量不可用。通过排除jquery.ui.selectmenu，我可以尝试单独加载它，就像它来自CDN一样。

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

所以，我的问题是，为什么同样的app.build.js导致不同的输出呢？

Answer 1

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

在您的情况下，您的baseUrl设置为＆＃34; js / lib＆＃34; - 也许可以尝试＆＃34; .js / lib＆＃34;

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

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

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

1 个答案: