无法使用 Forge 查看器编译反应应用程序 - 无法编译 - Autodesk 未定义 un-def答案

【问题标题】：can't compile react app with forge viewer - can't compile - Autodesk not defined un-def无法使用 Forge 查看器编译反应应用程序 - 无法编译 - Autodesk 未定义 un-def
【发布时间】：2019-08-05 12:05:39
【问题描述】：

我们想将我们的一些 forge 查看器代码库移动到一个 react-app 中，并且无法弄清楚如何在没有附加所有 Autodesk.Viewer.... 的情况下使用 viewer3d js api 在我们的组件中使用 window.*这适用于我们研究过的所有（优秀且广泛的）git 示例。为什么？我们在 index.html 和 react 登陆之间加载 viewer3d.js 文件：

<body>
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
  <div id="root" />

我们得到的错误（对于 Autodesk 命名空间的每个使用实例）：

Failed to compile

./src/components/Viewer.js
  Line **:  'Autodesk' is not defined  no-undef

这行得通：

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

这不起作用：

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

【问题讨论】：

标签： autodesk-forge

【解决方案1】：

我准备了一个autodesk-forge-viewer打字模块，你可以在编译时使用它来验证类型。

这样使用：

import Autodesk from 'autodesk-forge-viewer';
const autodesk: typeof Autodesk = (window as any).Autodesk;

对于最新 TypeScript 类型的一些限制，类型将是 Autodesk，值将是 autodesk，所以这里是创建 Viewer 实例的代码：

const viewer: Autodesk.Viewing.Private.GuiViewer3D = new autodesk.Viewing.Private.GuiViewer3D(viewerContainer);

请注意 autodesk-forge-viewer 模块不包含 Viewer 实现，因此您仍然必须将 viewer3D.js 脚本添加到 index.html。

【讨论】：

【解决方案2】：

我们通过在组件文件的第一行放置一个全局变量来解决这个问题。基于this。

/*global Autodesk*/

但是，我更喜欢这个，就在导入之后。谢谢你，布莱恩。

const Autodesk = window.Autodesk;

【讨论】：

【解决方案3】：

正如user guide 中提到的，您需要从 window.xml 显式读取任何全局变量。把它放在文件的顶部，它就会起作用：

const Autodesk = window.Autodesk;

建议将你的脚本标签拉到你的应用入口 html 的标题部分，以确保它在 React 发出之前被加载：

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
  </head>
...

【讨论】：

抱歉刚刚挖出了一些文档 - 我自己没有遇到这个问题，但我使用的是 TypeScript，这可能是原因。