javascript - 正确导入 JointJS v3

Question

当使用 JointJS 2.2.1 版本时，我像这样导入它:

import { default as joint } from "jointjs";

现在我使用的是 3.0.2 版本。上面一行中的“joint”未定义。导入不再有效。我在 JointJS 3.0.0 的发行说明中注意到:

Notable changes - full support for ES Modules

我现在应该如何导入它？

Answer 1

不再有默认导入， import * as joint from 'jointjs'工作得很好。如果需要较小的 bundle ，您可以挑选您实际需要的部件:

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)

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

运行此代码片段可以快速检查您是否正确设置了命名空间:

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