我想知道如何正确地将handsontable社区版库捆绑到Aurelia应用程序中 . Handsontable作为单个JS文件分发为webpack模块,因此提示通常对webpack模块有用 .

使用默认加载程序配置Aurelia版本0.24.0:RequireJS和默认转换程序:Babel,NPM版本3.10.0 . 为了将handontable捆绑到我的应用程序中,我做了以下步骤:

npm install handsontable

然后编辑aurelia-project / aurelia.json添加以下内容

dependencies:{ ...
  {
    "name": "handsontable",
    "path": "../node_modules/handsontable",
    "main": "dist/handsontable.full",
    "resources": [
      "dist/handsontable.full.css"
     ]
  },

然后组件看起来像:(view - htable.html):

<template>
<div ref="filetable"></div>
</template>

(viewmodel - ES6中的htable.js):

import {Handsontable} from "handsontable";

export class htable {
...
   attached() {
     this.ht = new Handsontable (this.filetable, {
       data: this.data,
       rowHeaders: true,
       colHeaders: true
      });
   }
 }

但是,任何添加此类组件的尝试都会失败

Unhandled rejection TypeError: _handsontable is undefined

我在不同库中使用的另一种尝试会产生类似的错误

import * as Handsontable from "handsontable";
...
     this.ht = new Handsontable.Handsontable (this.filetable, {

顺便说一句 . 解决方法不是将handsontable捆绑并添加到index.html中,这使得“Handsontable”全局化 .