Question

所以我对Aurelia和JavaScript导入语法都不熟悉，我正在开发一个需要jQuery UI draggable和droppable的应用程序。由于这些小部件无法在移动设备上运行，因此我需要使用jQuery UI Touch Punch库。

我遇到的问题是以下控制台错误：

Uncaught TypeError: Cannot read property 'mouse' of undefined

在 jQuery UI之前加载jQuery UI Touch Punch库时，显然会出现这种情况。

这是我的aurelia.json文件的设置方式：

"dependencies": [
      // ....
      {
        "name": "jquery",
        "path": "../node_modules/jquery/dist/",
        "main": "jquery"
      },
      {
        "name": "jquery-ui",
        "path": "../node_modules/jquery-ui-dist/jquery-ui",
        "deps": ["jquery"]
      },
      {
        "name": "touch-punch",
        "path": "../node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch",
        "deps": ["jquery-ui"]
      }
    ]

我在我的视图模型中有这些导入：

import 'jquery-ui';
import 'touch-punch';

出于某种原因，一切正常，但我仍然有控制台错误。

如何确定jQuery Touch Punch库已经在jQuery UI之前加载了，如果确实如何确保它在之后加载。

Answer 1

似乎正在发生的事情是模块加载器同时导入两个脚本，并且touch-punch正在赢得比赛，因此，它首先被加载。我相信这个问题超出了Aurelia的控制范围。

尽管如此，jquery-ui-touch-punch并非针对模块化系统。导入它的最佳方法是使用<script>标记或将其添加到包中。考虑到jquery-ui-touch-punch取决于依赖jquery-ui的{{1}}，解决方法是在所有这些方法之前。像这样：

jquery

然后，将其从"name": "vendor-bundle.js", "prepend": [ "node_modules/bluebird/js/browser/bluebird.core.js", "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js", "node_modules/jquery/dist/jquery.js", "node_modules/jquery-ui-dist/jquery-ui.js", "node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.js", "node_modules/requirejs/require.js" ], "dependencies": [ ... ]中删除，然后删除dependencies语句。

图书馆

1 个答案: