不能在包含JSpack的JS庫中包含Angular2中的Webpack

Question

我不確定這個過程的哪一部分失敗，但是我希望對此有所幫助。

我有一個供應商庫（BigDecimal.js），我試圖導入並在我的angular2應用程序中使用。我可以通過在我的typings目錄中添加一個定義文件（我也在我的源代碼目錄中嘗試過）來獲得它，但webpack不會將變量注入添加到源文件中。 （我想這只是假設它是全局聲明的）。

如果有幫助，這裏是定義文件迄今：

declare namespace BigDecimalLibrary { 
    interface MathContext { 
     ROUND_CEILING: number 
     ROUND_DOWN: number 
     ROUND_FLOOR: number 
     ROUND_HALF_DOWN: number 
     ROUND_HALF_EVEN: number 
     ROUND_HALF_UP: number 
     ROUND_UNNECESSARY: number 
     ROUND_UP: number 

     // TODO: Populate this if we ever need it 
    } 

    interface BigDecimal { 
     // CONSTANTS 
     ROUND_CEILING: number 
     ROUND_DOWN: number 
     ROUND_FLOOR: number 
     ROUND_HALF_DOWN: number 
     ROUND_HALF_EVEN: number 
     ROUND_HALF_UP: number 
     ROUND_UNNECESSARY: number 
     ROUND_UP: number 
     ZERO: BigDecimal 
     ONE: BigDecimal 
     TEN: BigDecimal 


     // INSTANCE METHODS 

     div(a:number, b: number): number 
     abs(context?: MathContext): BigDecimal 
     add(rhs: BigDecimal, context?: MathContext): BigDecimal 
     compareTo(rhs: BigDecimal, context?: MathContext): number 
     divide(rhs: BigDecimal, context?: MathContext): BigDecimal 
     divideInteger(rhs: BigDecimal, context?: MathContext): BigDecimal 
     max(rhs: BigDecimal, context?: MathContext): BigDecimal 
     min(rhs: BigDecimal, context?: MathContext): BigDecimal 
     multiply(rhs: BigDecimal, context?: MathContext): BigDecimal 
     negate(context?: MathContext): BigDecimal 
     plus(context?: MathContext): BigDecimal 
     pow(rhs: BigDecimal, context?: MathContext): BigDecimal 
     remainder(rhs: BigDecimal, context?: MathContext): BigDecimal 
     subtract(rhs: BigDecimal, context?: MathContext): BigDecimal 
     equals(rhs: BigDecimal, context?: MathContext): boolean 
     format(before: number, after: number, explaces?: number, exdigits?: number, exform?: number, exround?: number): string 
     intValueExact(): number 
     movePointLeft(digits: number): BigDecimal 
     movePointRight(digits: number): BigDecimal 
     scale(): number 
     setScale(scale: number, round?: number): BigDecimal 
     signum(): number 
     toString(): string 
     round(precision: number, mode: number): BigDecimal 
     isGreaterThan(rhs: BigDecimal): boolean 
     isLessThan(rhs: BigDecimal): boolean 
     isGreaterThanOrEqualTo(rhs: BigDecimal): boolean 
     isLessThanOrEqualTo(rhs: BigDecimal): boolean 
     isPositive(): boolean 
     isNegative(): boolean 
     isZero(): boolean 

    } 

    interface BigDecimalStatic { 
     // CONSTANTS 
     ROUND_CEILING: number 
     ROUND_DOWN: number 
     ROUND_FLOOR: number 
     ROUND_HALF_DOWN: number 
     ROUND_HALF_EVEN: number 
     ROUND_HALF_UP: number 
     ROUND_UNNECESSARY: number 
     ROUND_UP: number 
     ZERO: BigDecimal 
     ONE: BigDecimal 
     TEN: BigDecimal 

     new (number: string|string[], offset?: number, length?: number): BigDecimal 
    } 
} 

declare module 'big-decimal' { 
    var BigDecimal: BigDecimalLibrary.BigDecimalStatic; 
    export = BigDecimal; 
} 

declare var BigDecimal: BigDecimalLibrary.BigDecimalStatic; 

在我的TS文件的頂部，我用下面的導入類：

import BigDecimal = BigDecimalLibrary.BigDecimal; 

我已經嘗試將目錄複製到供應商目錄，並且只是做了一個npm install big-decimal。有什麼我需要在webpack中配置？我甚至失去了開始的地方。

編輯

我已經能夠通過使用來解決此問題如下：

import BigDecimalType = bigdecimal.BigDecimal; 
const BigDecimal = require('big-decimal').BigDecimal; 

，獨自替換爲「BigDecimalType」所有類型的引用，並留下剩餘的引用。這並不理想，但現在可以工作。

Answer 1

當使用webpack最重要的是，要知道的是，如果第三方庫實現了UMD模式。並定義了類型。

簡單的情況：

這裏的lib已經既UMD實現+分型 包中定義。在這種情況下，所有你需要做的是安裝這兩個 包和寫

import xxx from 'xxx'; 

，你是好去。

NO UMD ||類型
在這些情況下，您需要更多的工作。 我在這裏描述的解決方案將指向正確的方向，可用於任何第三方庫。

npm install xxx --save  (xxx = 'bigdecimal' in your case) 
write your own d.ts file || install it 
npm install expose-loader (in case the third party library doesn't impl. UMD module pattern.) 

在安裝這些軟件包，你必須做到以下幾點：
您component.ts內：

1. 寫三斜槓導入的分型，讓你的智能感知快樂
   /// <reference path="path-to-your-custom-.d.ts" />
2. 導入庫。
   import 'expose?BigDecimal!../../../node_modules/xxx.js;
   
3. 聲明類型的任何（工作在所有情況下），並將其assing到變種的一個變種在步驟暴露2（BigDecimal的在這種情況下）
   let BigDecimal: any = BigDecimal;

甲像明智的解決方案是在這裏描述：how to install adal.js