無法使用RequireJS加載crossroads.js

Question

我嘗試使用RequireJS加載JS文件，但十字路口http://millermedeiros.github.io/crossroads.js/似乎沒有正確加載。我使用Chrome Dev Toolbar進行了檢查，並且所有JS文件實際上都已加載。然而運行window.crossroad還給我undefined？

以下是我的requirejs配置..請指教......謝謝！

的index.html

<script data-main="scripts/config" src="scripts/require.js"></script> 

config.js

require.config({ 
    shim: { 
    "zepto.min": { 
     exports: "$" 
    }, 
    "underscore.min": { 
     exports: "_" 
    }, 
    "crossroads.min": { 
     exports: "crossroads" 
    } } 
}); 

require(["zepto.min","underscore.min", "crossroads.min",], function() { 
    console.log("=> Loading app") 
    require(["main"]); 
}); 

main.js

require(["hp-config", "hp-model", "hp-view", "hp-controller"], function() { 
    console.log("=> Init"); 
    console.log(window.crossroads); 
    //$(document).ready(function(){ HP.C.init(); }); 
}); 

Answer 1

如果你在看代碼對於十字路口，您會看到它檢測到它處於AMD環境中（RequireJS是），並自行調用define。所以你應該刪除你的墊片。基本規則是：一個不叫define的庫需要一個墊片，但是一個叫做define的庫不需要。原因window.crossroads是未定義的是，十字路口調用define而不是導出自己在全球空間（在window）。

鑑於require.config呼叫您當前擁有，該更新的呼叫將是：

require.config({ 
    shim: { 
    "zepto.min": { 
     exports: "$" 
    }, 
    "underscore.min": { 
     exports: "_" 
    } 
    } 
}); 

以上配置是必需的最小變化。但是，我還建議您使用.min的而不是，並將其傳遞給require或define。所以，你的config.js可能是相反：

require.config({ 
    paths: { 
    zepto: "zepto.min", 
    underscore: "underscore.min", 
    crossroads: "crossroads.min" 
    }, 
    shim: { 
    zepto: { 
     exports: "$" 
    }, 
    underscore: { 
     exports: "_" 
    } 
    } 
}); 

require(["zepto","underscore", "crossroads",], function() { 
    console.log("=> Loading app") 
    require(["main"]); 
}); 

這樣，如果你想切換到非精縮版（調試），你只需改變paths設定具有到處去的，而不是你需要這些模塊和更改名稱。