正确导入 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' 工作正常。如果需要更小的捆绑包，您可以挑选您实际需要的部分：

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 的 cellViewNamespace 和 dia.Graph 的 cellNamespace 选项。否则，您可能会遇到 Uncaught Error: dia.ElementView: markup required error

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

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

正确导入 JointJS v3

Properly Importing v3 of JointJS

javascript

jointjs