加载第三方库角CLI

这涉及到这个问题here这一个here但那些都适合我的需要。加载第三方库角CLI

我在迁移的Angular2应用到angular-cli结构，我想包括.OBJLoader & .MTLLoader为threejs库在我移植的项目。

我已经包括从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

几个问题在这里：

什么我需要改变，以得到这个工作？
Typings文件夹是否检查node_nodules中@types文件夹的声明类型？
脚本如何在脚本中加载并使其可用？

我很困惑在这里做什么。

来源

2017-06-02 Katana24

感谢@Joe Clay的帮助，但我最终选择了允许我输入require的任何文件。我编辑的typings.d.ts文件在src文件夹的根目录，并将此：

/* 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');

来源

2017-06-20 12:41:14 Katana24

嘿，那里，只是好奇，如果你使用此功能迁移到Angular v5.xx时会遇到任何问题 –

的CLI配置文件的scripts部分不涉及import和export - 它只是增加了脚本在你的HTML标签。如果你想导入node_modules内的东西是不是主要的出口，你可以做一些沿的台词：

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

但是，如果你尝试这样做，你会immedialy碰到一个多更棘手的问题：OBJLoader或MTLLoader都不是JavaScript/TypeScript模块。他们不会导出任何东西，而只是将东西附加到全局变量THREE--由于您正在导入THREE，所以它不存在！

通过添加分型，你实际上是说“当我编译我的代码，这些模块将存在”，但它不会改变现实的实际文件不匹配这一点。

你可以尝试do some Webpack trickery to make things hook in properly，但这需要你弹出配置CLI和对自己使用的WebPack ...

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

来源

2017-06-02 15:01:21

你所说的代码复制到您的项目是否意味着通过.angular-cli.json来做到这一点？或者也许（并且这是以前的样子）将它放到libs文件夹下的assets文件夹中并传递给它？我最初使用的是webpack，但必须迁移到角色cli的做法 – Katana24

@ Katana24：如果你想“导入”它，你不想做任何一个选项。您需要将其添加到您的'src'文件夹中，并修改代码，以便导出'OBJLoader'而不是将其添加到'THREE'变量。 –

@ Katana24：噢，或者是某人的[打包成NPM包]（https://www.npmjs.com/package/three-obj-loader），所以你可以做'import * as OBJLoader from “三OBJ装载机”'。你仍然需要写自己的类型，但它可能更容易:) –

加载第三方库角CLI

回答

相关问题