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的項目的一部分，但Web根目錄是Web服務器的實際根目錄會。

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'] 
     } 
    ] 
}) 

當優化，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

當處理相對路徑時，您可能需要包含一個「。」在路徑字符串的開頭（指定您想要從當前路徑開始）。我最近遇到這個問題，同時在grunt上測試r.js。我已經將我的baseUrl設置爲「/」最初應該是「。「

在你的情況，你的baseUrl設置爲‘JS/lib目錄’ - 也許嘗試」的.js/lib目錄」

這是一個有點怪異，因爲我得到了似乎是錯誤消息有正確的基本路徑以及相對路徑，但r.js仍然無法找到文件。

這個問題很老，但我看到它有一堆的意見，所以我想我會把這個在這裏，因爲它可能會幫助別人。