無法使用RequireJS加載crossroads.js

Question

我嘗試使用RequireJS加載JS文件，但是交叉路口http://millermedeiros.github.io/crossroads.js/似乎未正確加載。 我已經使用Chrome開發工具欄進行了檢查，並且實際上已加載了所有JS文件。 但是運行window.crossroad返回我未定義 ？

下面是我的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之所以未定義，是因為crossroads調用是define 而不是將自身導出到全局空間（在window ）。

給定您當前擁有的require.config調用，更新后的調用將為：

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

上面的配置是所需的最小更改。 但是，我也建議不要在傳遞給require或define的名稱中使用.min 。 因此，您的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設置，而不必到處需要這些模塊並更改名稱。