如何用 webpack 编写 Autodesk.Viewing.Extensions 并做出反应？答案

【问题标题】：How to write Autodesk.Viewing.Extensions with webpack and react?如何用 webpack 编写 Autodesk.Viewing.Extensions 并做出反应？
【发布时间】：2017-06-08 03:26:29
【问题描述】：

我在 view3D v2.11、React、ES6 和 webpack 中编写代码。但我不知道如何在 webpack 和 React 中编写 Autodesk.Viewing.Extensions。谁能给我一些例子？

【问题讨论】：

标签： reactjs webpack autodesk-forge

【解决方案1】：

使用 webpack 编写查看器扩展与使用 webpack 编写任何其他 js 应用程序没有什么不同。看看我的扩展库 repo，无论你是在 dev 还是 prod 中构建项目，每个扩展都被捆绑到一个单独的 .js 或 .min.js 中：library-javascript-viewer-extensions。

这是这样设计的，因此每个扩展都可以独立动态加载，但是如果您围绕查看器构建整个应用程序，您可以简单地将每个扩展程序的代码与应用程序的其余部分一起包含并生成单个 webpack 包.

这个 React 项目包含多个查看器扩展（其中一些是从上述库中提取的），并将扩展代码与应用程序的其余部分捆绑在一起：forge-rcdb。

就 React 和查看器而言，它并不是很相关，因为查看器是一个动态创建的 3D 组件，所有 WebGL 画布和查看器 2D 元素都是在您的应用加载模型后生成的，而 React 允许您在应用程序启动时声明 2D 组件。我正在尝试将动态 React 组件注入到查看器 div 中，您可以查看同一个项目 here：

this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)

// Experimental !
// This this to render dynamic components
// inserted after the viewer div has been created

const reactViewerNode = document.createElement('div')

this.viewer.container.appendChild(reactViewerNode)

this.viewer.react = {
    node: reactViewerNode,
    components: [],
    addComponent: (component) => {

      this.viewer.react.components.push(component)
    },
    render: (props) => {

      ReactDOM.render(
        <div>
        {
          React.Children.map(
            this.viewer.react.components,
            (child) => React.cloneElement(child, props))
          }
        </div>,
        reactViewerNode)
    }
  }

然后我通过覆盖 componentDidUpdate 来渲染这些动态组件：

componentDidUpdate () {

 if (this.viewer && this.viewer.react) {

   if(this.viewer.react.components.length) {

    this.viewer.react.render(this.props)
   }
 }
}

there 是一个使用示例：

viewer.react.addComponent(
    <DBDropdown key="test" className="react-div">
    </DBDropdown>
)

我实际上并没有在应用程序的live version 中实现任何使用该功能的功能，但它应该给你一个想法。

希望对您有所帮助。

【讨论】：