Question

上下文

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

问题

我无法解码XML编码的图形。我已经将问题追溯到mxCodec.prototype.decode，它依赖于全局范围内的所有函数，使用window[objectName]解码XML名称以找到实例化对象的相关函数。

当Webpack将mxGraph作为模块加载时，对象不是全局的，不包含在window对象中，因此解码不起作用。

此外，应用程序在很大程度上依赖于mxGraph，它在不同的模块中使用，因此无法在一个地方导入。

有没有人知道如何让它发挥作用？

提前感谢您的帮助。

配置

mxGraph正在使用Webpack的exports-loader导入，其配置符合

的要求

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(','),
    ]
  }

它很丑，但它允许应用程序使用import { mxArrow } from 'mx'的语法很好地导入mxGraph。

尝试

我试图通过将mxGraph包装在一个自定义的“mxWrapper”库中来解决这个问题，该库会覆盖mxCodec.prototype.decode函数，但这会导致问题进一步发生，边缘会有控制点。可能是我的覆盖不能正确处理mxPoint数组......但是这个解决方案看起来非常人为......
我也跟着this template无效

Answer 1

我可以按照上面描述的第一次尝试使其工作，即编写我自己的“mxWrapper”库。它是为这样一个简单的需求而设计的，但它确实有效。

基本理念：

NodeJS

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

如何在Webpack项目中导入XML编码的mxGraph？

上下文

问题

配置

尝试

1 个答案: