使用Webpack构建mxgraph图形编辑器

问题描述

我正在构建一个图形编辑器应用程序，我想以grapheditor示例为起点。

我试图将其与webpack捆绑在一起，但似乎我必须在window对象中公开很多全局变量：

例如：

import mxgraph from 'mxgraph';

const graphConfig = {
    //the path in mxClient.basePath.
    mxBasePath: './assets/',// the path in mxClient.imageBasePath.
    mxImageBasePath: './assets/images',// the language for resources in mxClient.language.
    mxLanguage: 'en',// the default language in mxClient.defaultLanguage.
    mxDefaultLanguage: 'en',// if any resources should be loaded.  Default is true.
    mxLoadResources: true,// if any stylesheets should be loaded.  Default is true
    mxLoadStylesheets: false,loadDefaultBundle:true
};

Object.keys(graphConfig).map(k => {
    window[k] = graphConfig[k];
})
const {
    mxClient,mxUtils,mxEvent,mxEditor,mxRectangle,mxGraph,mxGeometry,mxCell,mxEventObject,mxImage,mxDivResizer,mxObjectCodec,mxCodecRegistry,mxConnectionHandler,mxEventSource,mxPoint,mxPopupMenu,mxGraphView,mxGraphHandler,mxPopupMenuHandler,mxConstants,mxText,mxGraphModel,mxSvgCanvas2D,mxShape,mxCellHighlight,mxStackLayout,mxCellRenderer,mxConnector,mxStencil,mxActor,mxArrow,mxArrowConnector,mxCloud,mxCylinder,mxDoubleEllipse,mxEllipse,mxHexagon,mxImageShape,mxLabel,mxLine,mxMarker,mxPolyline,mxRectangleShape,mxRhombus,mxStencilRegistry,mxSwimlane,mxTriangle,mxPerimeter,mxStyleRegistry,mxEdgeStyle,mxConnectionConstraint,mxResources,mxUndoManager,mxLayoutManager,mxDictionary,mxKeyHandler

} = mxgraph(graphConfig);

//#region 
window.mxClient = mxClient;
window.mxUtils = mxUtils;
window.mxRectangle = mxRectangle;
window.mxGraph = mxGraph;
window.mxEvent = mxEvent;
window.mxGeometry = mxGeometry;
window.mxCell = mxCell;
window.mxImage = mxImage;
window.mxEditor = mxEditor;
window.mxDivResizer = mxDivResizer;
window.mxObjectCodec = mxObjectCodec;
window.mxCodecRegistry = mxCodecRegistry;
window.mxConnectionHandler = mxConnectionHandler;
window.mxEventSource = mxEventSource;
window.mxPoint = mxPoint;
window.mxPopupMenu = mxPopupMenu;
window.mxGraphView = mxGraphView;
window.mxGraphHandler = mxGraphHandler;
window.mxPopupMenuHandler = mxPopupMenuHandler;
window.mxConstants = mxConstants;
window.mxText = mxText;
window.mxGraphModel = mxGraphModel;
window.mxSvgCanvas2D = mxSvgCanvas2D;
window.mxShape = mxShape;
window.mxCellHighlight = mxCellHighlight;
window.mxStackLayout = mxStackLayout;
window.mxCellRenderer = mxCellRenderer;
window.mxConnector = mxConnector;
window.mxStencil = mxStencil;
window.mxStencilRegistry = mxStencilRegistry;
window.mxSwimlane = mxSwimlane;
window.mxCylinder = mxCylinder;
window.mxActor = mxActor;
window.mxArrow = mxArrow;
window.mxArrowConnector = mxArrowConnector;
window.mxCloud = mxCloud;
window.mxDoubleEllipse = mxDoubleEllipse;
window.mxEllipse = mxEllipse;
window.mxHexagon = mxHexagon;
window.mxImageShape = mxImageShape;
window.mxLabel = mxLabel;
window.mxLine = mxLine;
window.mxMarker = mxMarker;
window.mxPolyline = mxPolyline;
window.mxRectangleShape = mxRectangleShape;
window.mxRhombus = mxRhombus;
window.mxTriangle = mxTriangle;
window.mxPerimeter = mxPerimeter;
window.mxStyleRegistry = mxStyleRegistry;
window.mxEdgeStyle = mxEdgeStyle;
window.mxConnectionConstraint = mxConnectionConstraint;
window.mxResources = mxResources;
window.mxUndoManager = mxUndoManager;
window.mxEventObject = mxEventObject;
window.mxLayoutManager = mxLayoutManager;
window.mxDictionary = mxDictionary;
window.mxKeyHandler = mxKeyHandler;

然而，仅仅让事情正常进行还不够。 我想建立一个VanillaJs lib，我找到的所有答案都是关于Angular或类似框架集成的。

有没有更好的方法或可打包的叉子？

预先感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）