无法使用aurelia CLI使aurelia InteractionJS插件正常工作

我正在试用这本书，看看它是否符合我的需要。我按照所有安装步骤将其安装到一个新的aurelia cli项目中。然后，我为的拖动部分添加了代码。浏览器控制台显示以下错误，说明interact不是一个功能：

Unhandled rejection TypeError: interact is not a function. (In 'interact(this.element)', 'interact' is undefined)
    attached@http://localhost:9005/node_modules/aurelia-interactjs/dist/amd/interact-draggable.js:18:21

这是我的密码：

app.html

<template>
  <div id="drag-1" interact-draggable.bind="interactjsOptions">
    <p> You can drag one element </p>
  </div>
  <div id="drag-2" interact-draggable.bind="interactjsOptions">
    <p> with each pointer </p>
  </div>
</template>

---

对不起，上面在我上下班的公交车上写的我的手机没有读到所有的代码：-）

如果希望获得基本的可拖动示例（来自的第一个示例），该示例允许您仅拖动元素：

app.css

.draggable {
  width: 25%;
  height: 100%;
  min-height: 6.5em;
  margin: 10%;

  background-color: #29e;
  color: white;

  border-radius: 0.75em;
  padding: 4%;

  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

app.html

<template>
  <require from="app.css"></require>
  <div
    interact-draggable.bind="interactOptions" 
    interact-dragend.delegate="dragEnd($event)" 
    interact-dragmove.delegate="dragMoveListener($event)" 
    class="draggable">
    <p> You can drag one element </p>
  </div>
  <div 
    interact-draggable.bind="interactOptions" 
    interact-dragend.delegate="dragEnd($event)" 
    interact-dragmove.delegate="dragMoveListener($event)" 
    class="draggable">
      <p> with each pointer </p>
  </div>
</template>

---

这是一个bug，typescript定义和实际代码之间似乎不一致。定义将导入指定为“interact.js”，而在代码中它实际上是“interact”。我认为JSPM通过它创建的映射来处理这个问题。在require/CLI情况下，不会创建“interact.js”和“interact”之间的映射。我将研究并更新包。@Erik进一步研究后，我发现我使用的是nodejs 5.5。我不确定这是怎么发生的，因为我特别记得安装了v4.x。无论如何，我升级到了最新的NodeV6，错误现在消失了。然而，当我尝试拖动时，什么也没有发生（而且dragMoveListener函数从未被调用）。@Erik你在我的代码（我对InteractionJS完全陌生）中看到任何可能导致拖动不起作用的东西吗？或者你仍然认为有一个bug需要修复吗？

<template>
  <require from="app.css"></require>
  <div
    interact-draggable.bind="interactOptions" 
    interact-dragend.delegate="dragEnd($event)" 
    interact-dragmove.delegate="dragMoveListener($event)" 
    class="draggable">
    <p> You can drag one element </p>
  </div>
  <div 
    interact-draggable.bind="interactOptions" 
    interact-dragend.delegate="dragEnd($event)" 
    interact-dragmove.delegate="dragMoveListener($event)" 
    class="draggable">
      <p> with each pointer </p>
  </div>
</template>

export class App {
  public dragMoveListener(event) {
      var target = event.target,
          // keep the dragged position in the data-x/data-y attributes
          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.detail.dx,
          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.detail.dy;

      // translate the element
      target.style.webkitTransform =
          target.style.transform =
          'translate(' + x + 'px, ' + y + 'px)';

      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
  }

  public dragEnd(event) {
      var textEl = event.target.querySelector('p');

      textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(event.detail.dx * event.detail.dx +
                     event.detail.dy * event.detail.dy)|0) + 'px');
    }

  public interactOptions = {
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,
  };
}