正确导入v3 of JointJS

Question

在使用2.2.1版本的JointJS时，我导入它时如下所示：

import { default as joint } from "jointjs";

现在我正在使用3.0.2版本。以上线上的“接缝”未予界定。导入不再起作用了。我在JointJS 3.0.0的发行说明中注意到：

显著变化-对ES模块的完全支持

我现在该怎么进口？

Answer 1

没有默认的导入了，import * as joint from 'jointjs'工作得很好。如果需要一个较小的包，您可以选择实际需要的部件：

import { dia } from 'jointjs/src/core.mjs';
// import shapes you need 
import * as standard from 'jointjs/src/shapes/standard.mjs';

const graph = new dia.Graph([], { cellNamespace: { standard } });
new dia.Paper({
    cellViewNamespace: { standard },
    el: document.getElementById('paper'),
    width: 500, height: 500,
    model: graph
});

const rectangle = new standard.Rectangle().size(200, 200).position(100, 100).addTo(graph)

请注意，在此设置中，您需要小心dia.Paper的dia.Paper选项和dia.Graph的cellNamespace选项。否则，您可能会遇到Uncaught Error: dia.ElementView: markup required error

运行这个片段是一个快速检查，您已经正确设置了名称空间：

const cells = JSON.stringify(graph.toJSON());
graph.clear();
graph.fromJSON(JSON.parse(cells));