1、先上一个图:

开始引入@antv/x6,初始化的时候,一切正常。

然后引入插件的时候,就报上面的错了。

然后vite这边也有人提出了:

https://github.com/vitejs/vite/issues/3413

2、修改vite配制解决:

optimizeDeps: {
      exclude: [
        '@antv/x6',
        '@antv/x6-plugin-history',
        '@antv/x6-plugin-keyboard',
        '@antv/x6-plugin-selection',
        '@antv/x6-plugin-snapline',
        '@antv/x6-plugin-clipboard',
        '@antv/x6-plugin-keyboard',
      ],
    },

这样加了排除以后,就按需引相应的插件就可以。

3、引入插件:

比如用一用缩放的功能

import { Transform } from '@antv/x6-plugin-transform';
const container = new Graph({
      container: document.getElementById('container'),
      grid: true,
      width,
      height,
    });

    dvChild.use(
      new Transform({
        resizing: true,
        rotating: true,
      }),
    );

dvChild.addNode({
      shape: 'image',
      x: 320,
      y: 120,
      width: 200,
      height: 180,
      imageUrl:
        'https://gips1.baidu.com/it/u=2109130335,2323458671&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f1296_198',
    });

最后上一张效果图:

其它的插件,一样的使用,相当可以。

更多推荐