无法使用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设定具有到处去的，而不是你需要这些模块和更改名称。