Question

我正在为我的项目使用aurelia bundler，我想使用cytoscape.js绘制图形。

我可以使用npm（"cytoscape": "^3.0.0"）和

轻松添加cytoscape主库

      {
        "name": "cytoscape",
        "path": "../node_modules/cytoscape/dist",
        "main": "cytoscape.min"
      },

在构建中 - ＆gt;捆绑 - ＆gt; aurelia.json中的依赖项。使用此设置，我可以创建一个有效的基本图形。

但是，添加qtip plugin会更加困难。

使用npm（"cytoscape-qtip": "*"）安装不是问题，对于Bundler我使用类似的指令：

      {
        "name": "cytoscape-qtip",
        "path": "../node_modules/cytoscape-qtip",
        "deps": ["jquery", "cytoscape", "qtip2"],
        "main": "cytoscape-qtip"
      }

但这不起作用。当我尝试使用简单的qtip hello world时出现以下错误：Uncaught TypeError: this.cy.elements(...).qtip is not a function

原因是，cytoscape-qtip插件尚未初始化（其初始化代码片段）：

  if( $ && $$ ){
    register( $$, $ );
  }

})(
  typeof jQuery !== 'undefined' ? jQuery : null,
  typeof cytoscape !== 'undefined' ? cytoscape : null
);

我调试过'cytoscape'参数为null，导致寄存器无法执行。

我不知道如何解决这个问题，因为文档指示我以嵌套的方式自己调用require，但我无法控制捆绑器生成的内容。

CommonJS:

var cytoscape = require('cytoscape');
var cyqtip = require('cytoscape-qtip');

cyqtip( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-qtip', 'jquery'], function( cytoscape, cyqtip, jquery ){
  cyqtip( cytoscape, jquery ); // register extension
});
Note that jquery must point to a jQuery object with .qtip() registered if AMD is used.

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

非常感谢任何帮助。我不想将我的整个项目设置更改为webpack或其他..

使用Aurelia bundler

0 个答案: