Angular 8：Webpack - 三个.js 加载两次

Posted 2023-03-16

【中文标题】Angular 8：Webpack - 三个.js 加载两次

【英文标题】：Angular 8: Webpack - THREE.js loading twice

【发布时间】：2020-04-05 07:53:12

【问题描述】：

我正在使用集成了 Autodesk forge 查看器 javscript 库的 Angular 创建一个 Web 应用程序。

forge viewer.js 库包含在 forge viewer.js 本身中，它是 THREE.js 版本 r71 的定制版本。

因此，我在我的应用中看到了一些意想不到的结果：

THREE.Object3D.add: object not an instance of THREE.Object3D

通过一些研究，这是因为 THREE.js 被两次加载到我的应用程序中。我试过从 node_modules 卸载 three.js，但这会导致构建错误：

Error: ENOENT: no such file or directory, open 'C:\Users\username\source\repos\Testing\appname\appname-SPA\node_modules\three\build\three.min.js'

当我在 tsconfig.json 中排除 THREE.js 时，此错误已消除，但我仍然看到意外结果。

显然，React 应用程序中的一个修复方法是在使用 webpack 时在外部提及 THREE.js：

const config = 
    …
    externals: 
        three: 'THREE'
    ,

但是 Angular 不包括 webpack.config.js。我将如何排除 THREE.js？

【问题讨论】：

这不是我最喜欢的方法，但你可以像 here 那样扩充 webpack 配置。

【参考方案1】：

我无法重现您的错误，因为我不确定您是如何导入 forge-viewer 脚本的。

默认情况下，forge-viewer 脚本是通过 index.html 中的 head 标签中的脚本标签导入的，它链接到 Autodesk cdn。这不应提示将任何节点模块安装到您的 Angular 项目中。 但是，您确实需要安装 forge-viewer typings。这将为您提供 forge-viewer 功能的类型定义。

我会做一个干净的ng new 并相应地添加脚本和包：

初始化一个新的 Angular 项目。

将查看器脚本和 css 添加到 Angular 项目中的 index.html 中。这将在运行项目时提示尽快加载脚本。

安装forge-viewer typings，这些类型也包括three.js类型。

将"types": ["forge-viewer"] 添加到tsconfig.app.json 下的compilerOptions 以解决初始编译器错误。

或者，您可以尝试从当前项目中删除所有与 forge-viewer 相关的包，然后执行上述步骤 2 到 4。

【讨论】：

谢谢 Sam，步骤 2-4 没有修复我现有的应用程序，正如您所提到的，我已经导入了 forge-viewer 脚本。我不知道有可用的类型，所以这很棒。但创建一个新应用程序按预期工作。由于我现有应用程序中有一个额外版本的three.js，因此看起来three.js 的伪造查看器版本与node_modules 中的版本冲突

好东西，这解决了您的previous 问题吗？

原来我是个白痴，并且在我的 angular.json 脚本数组中有一个指向 three.js 的链接，过去没有伪造测试应用程序，这在使用 npm 卸载三个后导致构建错误.将答案添加到我之前的问题中，我会接受。干杯！