一个接一个的导入库

Question

因此，我对Aurelia和JavaScript导入语法有点陌生，我正在开发一个需要jQuery、UI、draggable和droppable的应用程序。由于这些小部件不能在移动设备上工作，所以我需要使用jQuery UI触袋库。

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

Uncaught TypeError: Cannot read property 'mouse' of undefined

它显然是在jQuery UI之前加载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"]
      }
    ]

在我看来，这些进口产品的模型是：

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

由于某种原因，一切都很好，但我仍然有控制台错误。

如何确定jQuery触摸袋库在jQuery UI之前已经加载，如果是这样的话，如何确保在它之后加载。

Answer 1

似乎正在发生的是模块加载器同时导入两个脚本，而touch-punch赢得了比赛，因此，它首先被加载。我相信这个问题是奥雷利亚无法控制的。

然而，jquery-ui-touch-punch并不是为模块化系统而设计的。导入它的最佳方法是使用<script>标记或将其放在包的前面。考虑到jquery-ui-touch-punch依赖于依赖于jquery的jquery-ui，解决方案将放在所有这些解决方案的前面。如下所示：

"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语句。