javascript - Aurelia 逐个导入库

Question

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

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

Uncaught TypeError: Cannot read property 'mouse' of undefined

当 jQuery UI Touch Punch 库加载之前 jQuery UI 时，它显然会出现。

我的 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"]
      }
    ]

我的 View 模型中有这些导入:

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这取决于 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 中删除并删除 import声明。