时间戳

首页 > 解决方案 > 正确导入 JointJS v3

javascript - 正确导入 JointJS v3

问题描述

使用 JointJS 的 2.2.1 版本时，我将其导入如下：

import { default as joint } from "jointjs";

现在我正在使用 3.0.2 版。上一行中的“关节”是未定义的。导入不再起作用。我在 JointJS 3.0.0 的发行说明中注意到：

显着变化 - 完全支持 ES 模块

我现在应该如何导入它？

标签： javascriptjointjs

解决方案

不再有默认导入， 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)

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

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

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

推荐阅读