使用Webpack构建mxgraph图形编辑器

如何解决使用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或类似框架集成的。

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

预先感谢