将第 3 方 JavaScript 库 (dropzone.js) 添加到 Aurelia

Question

我在弄清楚如何将第 3 方 JavaScript 库添加到 Aurelia 时遇到了很多麻烦（在本例中 dropzone.js）。

我已经通过 npm 安装了 dropzone 并在 aurelia.json 中配置了它：

{
  "name": "dropzone",
  "path": "../node_modules/dropzone/dist/min",
  "main": "dropzone.min",
  "resources": [
    "dropzone.min.css"
  ]
}

并将 CSS 的 require 语句添加到我的 app.html:

<require from="dropzone/dropzone.min.css"></require>

但是，当我尝试做一个简单的测试，比如直接将 HTML 放在我的模板中时，该功能不起作用。

<template>
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</template>

我也尝试过这个解决方案，但无法正常工作：

Answer 1

尝试将 import 'dropzone'; 添加到您的视图模型。

Answer 2

尝试使用 dropzone-amd-module.min。像这样：

{
  "name": "dropzone",
  "path": "../node_modules/dropzone/dist/min",
  "main": "dropzone-amd-module.min", 
  "resources": [
    "dropzone.min.css"
  ],
  "deps": ["jquery"]
}

然后，import Dropzone from 'dropzone'; 就像另一个答案

Answer 3

根据您的示例，它不会起作用，因为 dropzone.js 库代码是在您的视图模型被激活之前加载的，并且 Aurelia 不会重新触发它。您需要在视图模型的 attached() 方法中手动激活 dropzone.js，如下所示：

// JQuery option
$("div#myId").dropzone({ url: "/file/post" });

// Non-JQuery option
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

因此，您的视图模型可能如下所示：

文件-upload.js

export class FileUpload {

  attached() {
    // activate dropzone.js element
    this.zone = new Dropzone(this.dz, { url: "/file/post"});
  }

  detached() {
    // deactivate the element
    this.zone.destroy();
  }

}

文件-upload.html

<template>
  <form ref="dz" action="/file-upload" class="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
  </form>
</template>

将第 3 方 JavaScript 库 (dropzone.js) 添加到 Aurelia

Adding 3rd-party JavaScript library (dropzone.js) to Aurelia

javascript

dropzone.js

aurelia