Question

我正在使用Coffeescript和RequireJS。我有以下RequireJS配置：

require.config
    urlArgs: "v=0.0.7"
    baseUrl: "./src"
    catchError: true
    paths:
        "jquery": "lib/jQuery/jquery.min"
        "jqueryui": "lib/jQuery/jquery-ui.min"
        "TouchPunch": "lib/Touch-Punch/jquery.ui.touch-punch.min"
        "MobileEvents": "lib/jQuery/jquery.mobile-events.min"
        "MathJax": (if window.getParameter("mathJaxEnabled") == "false" then "frontend/blank" else "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML")
    shim:
        "jqueryui": ["jquery"]
        "TouchPunch": ["jquery"]
        "MobileEvents": ["jquery"]
        "MathJax":
            exports: "MathJax",
            init: ->
                MathJax.Hub.Config
                    config: ["MMLorHTML.js"]
                    jax: ["input/MathML", "output/HTML-CSS"]
                    extensions: ["mml2jax.js","MathMenu.js","MathZoom.js"]
                    showMathMenu: false
                    showMathMenuMSIE: false
                MathJax.Hub.Startup.onload()
                return MathJax

我的目录结构也很简单。有一个src文件夹，其中包含一个名为lib的文件夹和一个名为frontend的文件夹。里面的lib是一个名为jQuery的文件夹（包含jquery.min.js，jquery-ui.min.js和jquery.mobile-events.min.js），以及名为Touch-Punch的文件夹（包含jquery.ui.touch-punch） .min.js）。里面的前端是一个名为blank.js的文件。

此配置以前一切都运行良好。但是，现在，当我加载页面时，我收到一个脚本错误，并且RequireJS抱怨它无法找到Touch-Punch。同样，Chrome 404：

GET file:///C:/repository/lib/Touch-Punch/jquery.ui.touch-punch.min.js?v=0.0.7

似乎RequireJS和Chrome正在寻找存储库的 root 中的Touch-Punch，而不是在src文件夹中。这很奇怪，因为Touch-Punch的路径与所有其他路径非常相似，并且这些路径不会出错。将路径更改为src/lib/Touch-Punch/jquery.ui.touch-punch.min可以使其正常工作。

我还发现Internet Explorer仍然以不同的方式处理这个问题 - 它抱怨它在我说过的位置找不到 jQuery UI 。再一次，将路径更改为src/lib/jQuery/jquery-ui.min可以解决问题......但仅限于Internet Explorer。如果我改变了这条路径，Chrome就无法找到jQuery UI。

导致这种情况的道路有什么问题？ jQuery不会加载失败，即使它的路径几乎与jQuery UI相同。

我唯一能想到的是jQuery UI和Touch-Punch在他们的文件名中都有-，但我不明白为什么这会导致问题（并且它从未引起过之前的问题）。实际上，Internet Explorer似乎也找不到MobileEvent（文件名中也有-） - 但Chrome对MobileEvents没有问题。更改文件名没有{其中{1}}没有影响任何事情 - 问题仍然存在。

Answer 1

问题是另一个RequireJS模块干扰了这个。由于它们是异步加载的，因此Chrome和Internet Explorer之间的区别在于模块以不同的顺序加载。外部RequireJS模块的一部分将加载，然后是内部的，它改变了RequireJS 的配置，然后外部模块的其余部分将（无法）加载。

我用杏仁包裹内部模块来修复它。

Answer 2

简单解决方案：
将jquery-ui推入触摸式打印机

shim: {
    "jquery-ui": {
        exports: "$",
        deps: ["jquery"],
        async: false
    },
    "jquery-ui-touch-punch": {
        exports: "$",
        deps: ["jquery", "jquery-ui"],
        async: false
    }
}

RequireJS：路径无法正确解析（并且浏览器之间存在差异）

2 个答案: