使用 Angular-cli 加载第三方库

Question

这与这里的这个问题和这里的这个问题有关，但这两个都不符合我的需求。

我正在将 Angular2 应用程序迁移到angular-cli结构，并尝试将threejs库的.OBJLoader和.MTLLoader包含在迁移的项目中。

我已经将threejs节点文件夹中的脚本包含在我的.angular-cli.json文件中，如下所示：

"styles": [
"styles.css"
],
"scripts": [
"../node_modules/three/examples/js/loaders/OBJLoader.js",
"../node_modules/three/examples/js/loaders/MTLLoader.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}

因为.OBJLoader和.MTLLoader没有键入，所以我认为我必须在typings.d.ts文件中自己创建它们：

/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
// OBJLoader
declare var objloader: OBJLoader;
interface OBJLoader {
}
// MTLLoader
declare var mtlloader: MTLLoader;
interface MTLLoader {
}

然后，我尝试将模块导入到我需要它们的服务中，如下所示：

import { Injectable } from '@angular/core';
import * as THREE from 'three';
import * as OBJLoader from 'OBJLoader';
import * as MTLLoader from 'MTLLoader';
@Injectable()
export class LoaderService {
constructor() {}
setupMTLLoader(appPath) {
var mtlLoader = new MTLLoader(); 
return mtlLoader;
}
setupObjLoader(materials, appPath) {
var objLoader = new OBJLoader();
return objLoader;
}
}

但angular-cli抱怨说：

Module not found: Error: Can't resolve 'OBJLoader' in '/my-path/src/app/shared/services'
@ ./src/app/shared/services/loader.service.ts 12:0-39

这里有几个问题：

• 我需要更改什么才能使其正常工作？
• 键入文件夹是否检查node_nodules中@types文件夹是否存在声明的类型？
• 脚本如何加载并在打字稿中可用？

我很困惑在这里做什么。

Answer 1

CLI 配置文件的scripts部分与import和export无关 - 它只是将脚本作为标签添加到 HTML 中。如果要从内部导入不是主要导出的内容node_modules，可以执行以下操作：

// Your typings would need to match!
import * as OBJLoader from "three/examples/js/loaders/OBJLoader";

但是，如果你尝试这样做，你会立即遇到一个更棘手的问题：OBJLoader和MTLLoader都不是JavaScript/TypeScript模块。他们不导出任何内容，而只是将内容附加到全局THREE变量 - 由于您正在导入THREE，因此不存在！

通过添加类型，您实际上是在说"当我编译代码时，这些模块将存在"，但它并没有改变实际文件与此不匹配的现实。

您可以尝试做一些 Webpack 技巧来使事情正确挂钩，但这需要弹出您的 CLI 配置并自行使用 Webpack......

老实说，我认为这里最好的选择是将代码复制到您的项目中。直接从包的示例中导入代码似乎最终可能会变得非常脆弱。

Answer 2

感谢 @Joe Clay 的帮助，但我最终选择了另一种选择，允许我require我需要的任何文件。我在src文件夹的根目录中编辑了typings.d.ts文件并添加了以下内容：

/* Allow the use of require in the code  */
declare var require : any;

这使我在抓取.MTLLoader或.OBJLoader时可以使用以下内容：

var MTLLoader = require('three-mtl-loader');
var OBJLoader = require('three-obj-loader');