Javascript 如何在网页包项目中导入XML编码的mxGraph？ 上下文

作为大型AngularJS/RequireJS项目迁移到Webpack的一部分，我已经浏览了应用程序的不同部分，并调整了依赖项，以便一切正常。好吧，除了你，什么都有

问题 我无法解码XML编码的图形。我将问题追溯到了

mxCodec.prototype.decode

，它依赖于全局范围内的所有函数，使用

window[objectName]

对XML名称进行解码，以找到实例化对象的相关函数

当Webpack将mxGraph作为一个模块加载时，对象不是全局的，并且不包括在

窗口中

对象中，因此解码不起作用

此外，该应用程序严重依赖mxGraph，并且在不同的模块中使用，因此不能在一个地方导入

有人知道如何让它工作吗

提前感谢您的帮助

配置 mxGraph是使用Webpack的导出加载程序导入的，配置如下

rules: {
    test: path.resolve(__dirname, 'node_modules/mxgraph/javascript/mxClient.min.js'),
    use: [
      'exports-loader?' + [
        // handler
        'mxHandle', 'mxVertexHandler', 'mxEdgeSegmentHandler',

        // io
        'mxCodec', 'mxCodecRegistry',

        // layout
        'mxHierarchicalLayout', 'mxSwimlaneLayout',
        'mxCircleLayout', 'mxCompactTreeLayout', 'mxCompositeLayout', 'mxFastOrganicLayout', 'mxGraphLayout',
        'mxLayoutManager', 'mxParallelEdgeLayout', 'mxPartitionLayout', 'mxRadialTreeLayout', 'mxStackLayout',

        // model
        'mxCell', 'mxCellPath', 'mxGeometry', 'mxGraphModel',

        'mxClient',

        // shapes
        'mxActor', 'mxArrow', 'mxArrowConnector', 'mxCloud', 'mxConnector', 'mxCylinder', 'mxDoubleEllipse', 'mxEllipse', 'mxHexagon', 'mxLabel', 'mxLine',
        'mxMarker', 'mxPolyline', 'mxRectangleShape', 'mxRhombus', 'mxRubberband', 'mxStencil', 'mxStencilRegistry', 'mxSwimlane', 'mxText', 'mxTriangle',

        // util
        'mxConstants', 'mxEvent', 'mxUndoManager', 'mxUtils', 'mxDivResizer', 'mxImage', 'mxPoint', 'mxRectangle', 'mxLog',

        // view
        'mxGraph', 'mxEdgeStyle', 'mxCellRenderer', 'mxCellOverlay', 'mxCellState',
      ].join(','),
    ]
  }

这很难看，但它允许应用程序使用类似于“mx”的

import{mxArrow}的语法很好地导入mxGraph

尝试

我试图通过将mxGraph包装在自定义的“mxWrapper”库中来解决这个问题，该库覆盖了
mxCodec.prototype.decode
函数，但这会导致具有控制点的边出现问题。可能是我的覆盖无法正确处理mxPoint阵列。。。但这个解决方案似乎很做作
我也跟着做了，但是没有用
我可以按照上面描述的第一次尝试，即编写我自己的“mxWrapper”库，使其工作。它是为这样一个简单的需要而设计的，但它是有效的

基本思想：

import { 
  mxCell, mxCellPath, mxGeometry, mxGraphModel, mxCodec as _mxCodec, ...
} from 'mx';

// Overridden in our application
var mxCodec = _mxCodec;

var KNOWN_OBJECTS = {
  mxCell: mxCell,
  mxCellPath: mxCellPath,
  mxGeometry: mxGeometry,
  mxGraphModel: mxGraphModel,
  ...
  Array: Array,
  array: Array,
}

/**
 * Function: decode
 *
 * Decodes the given XML node. The optional "into"
 * argument specifies an existing object to be
 * used. If no object is given, then a new instance
 * is created using the constructor from the codec.
 *
 * The function returns the passed in object or
 * the new instance if no object was given.
 *
 * Parameters:
 *
 * node - XML node to be decoded.
 * into - Optional object to be decodec into.
 */
mxCodec.prototype.decode = function (node, into) {
  var obj = null;

  if (node != null && node.nodeType == mxConstants.NODETYPE_ELEMENT) {
    var ctor = null;

    try {
      ctor = KNOWN_OBJECTS[node.nodeName];
    }
    catch (err) {
      // ignore
    }

    var dec = mxCodecRegistry.getCodec(ctor);

    if (dec != null) {
      obj = dec.decode(this, node, into);
    }
    else {
      obj = node.cloneNode(true);
      obj.removeAttribute('as');
    }
  }

  return obj;
};


export {
  mxCell, mxCellPath, mxGeometry, mxGraphModel, ...
};

我仍然非常开放，对更好的想法感兴趣