在将大型AngularJS / RequireJS项目迁移到Webpack的过程中，我遍历了应用程序的不同部分并修改了依赖项，以便一切正常。好吧，除了mxGraph之外的所有东西。
我无法解码XML编码的图。我将问题追溯到mxCodec.prototype.decode，它依赖于全局范围内的所有函数，使用解码XML名称window[objectName]以找到相关的函数来实例化对象。
当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(','),
]
}
这很丑陋，但它允许应用程序使用语法类似于的方式很好地导入mxGraph import { mxArrow } from 'mx'。
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, ...
};
我仍然很开放，对更好的想法感兴趣...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句