不能在包含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