加載第三方庫角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

回答

相關問題