Webpack - mxClient的加载器,无法在导出时干净地加载所有相关对象

时间:2016-06-30 20:59:48

标签: webpack mxgraph

我当前的装载机是:

{
    test: path.join(__dirname, '../libs/mxClient/js/mxClient.js'),
    loaders: [
        'exports?mxClient,mxGraph,mxGraphModel'
    ]
}

我似乎必须导出mxClient中存在的每个对象,以便在我使用时能够在我的应用程序中使用它:

var mxClientTest = require('mxClient');

另一个问题是,当我尝试为我的模块使用导入时,没有任何内容被加载,但是当我将它分配给变量并使用require时,我确实得到了我在加载器中指定的导出,任何人都会知道为什么吗?

2 个答案:

答案 0 :(得分:1)

我已经能够通过webpack导入它。您必须在模块=>规则下的webpack配置中添加以下代码

module: {
   rules: [
       ...

       {
         test: require.resolve('mxgraph/javascript/mxClient'),
         use: 'exports-loader?' +
      'mxClient,mxLog,mxObjectIdentity,mxDictionary,mxResources,mxEffects,mxUtils,mxConstants,mxEvent,mxClipboard,mxUrlConverter,mxVmlCanvas2D,mxStencilRegistry,' +
      'mxMarker,mxHierarchicalEdgeStyle,mxCellPath,mxPerimeter,mxEdgeStyle,mxStyleRegistry,mxCodecRegistry,mxGenericChangeCodec,mxStylesheetCodec,mxDefaultToolbarCodec,' +
      'mxGraph,mxRubberband,mxHierarchicalLayout,mxFastOrganicLayout,mxGraphModel,mxPanningHandler,mxKeyHandler,mxParallelEdgeLayout,mxLayoutManager,mxCompactTreeLayout,' +
      'mxPrintPreview,mxToolbar,mxOutline,mxCellTracker,mxCellOverlay,mxImage,mxLoadResources,mxPopupMenu,mxCylinder,mxRectangle,mxCellRenderer,mxVertexHandler,mxPoint,' +
      'mxHandle,mxRhombus, mxActor,mxArrow,mxArrowConnector,mxCloud,mxConnector,mxConnector,mxEllipse,mxHexagon,mxImageShape,mxLabel,mxLine,mxPolyline,mxMarker,mxRectangleShape,' +
      'mxShape,mxStencil,mxStencilRegistry,mxSwimlane,mxText,mxTriangle,mxAutoSaveManager,mxDivResizer,mxForm,mxGuide,mxImageBundle,mxImageExport,mxLog,mxMorphing,mxMouseEvent,' +
      'mxPanningManager,mxSvgCanvas2D,mxUndoableEdit,mxUndoManager,mxUrlConverter,mxWindow,mxXmlCanvas2D,mxXmlRequest,mxCellEditor,mxCellState,mxCellStatePreview,mxConnectionConstraint,' +
      'mxGraphSelectionModel,mxGraphView,mxMultiplicity,mxSwimlaneManager,mxTemporaryCellStates,mxGeometry,mxStackLayout,mxRadialTreeLayout,mxPartitionLayout,mxGraphLayout,' +
      'mxEdgeLabelLayout,mxCompositeLayout,mxCircleLayout,mxSwimlaneOrdering,mxMinimumCycleRemover,mxMedianHybridCrossingReduction,mxHierarchicalLayoutStage,mxCoordinateAssignment,' +
      'mxSwimlaneLayout,mxObjectCodec,mxGenericChangeCodec,mxTooltipHandler,mxSelectionCellsHandler,mxPopupMenuHandler,mxGraphHandler,mxElbowEdgeHandler,mxEdgeHandler,' +
      'mxConstraintHandler,mxConnectionHandler,mxCellMarker,mxCellHighlight,mxDefaultPopupMenu,mxDefaultKeyHandler,mxCodec,mxGraphHierarchyModel,mxGraphAbstractHierarchyCell,' +
      'mxGraphHierarchyEdge,mxGraphHierarchyNode,mxSwimlaneModel,mxEdgeSegmentHandler'
       }
        ]
}

然后按如下所示在代码中导入变量:

import {
   mxClient,
   mxUtils,
   mxConstants,
   ...
       } from 'mxgraph/javascript/mxClient'

希望这会有所帮助:)

答案 1 :(得分:0)

当我使用以下设置时,我已经能够使用import而不是require。

我像这样使用导出加载器:

{ test: /mxClient\.js$/, loader: 'exports-loader?mxClient,mxGraph, mxGraphModel' }

然后当我导入时:

import { mxGraph } from 'mxgraph/javascript/mxClient';

或:

import { mxGraph, mxClient, mxGraphModel } from 'mxgraph/javascript/mxClient';