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;

用＆＃34; BigDecimalType＆＃34;替换所有类型引用并留下其余的参考资料。这不是理想的，但现在可以使用。

Answer 1

当使用webpack时，最重要的是，如果第三方库实现了UMD模式。并有定义的类型。

最简单的情况：

此处lib具有UMD实现+打字包定义。在这种情况下，您需要做的就是安装两者包和写
import xxx from 'xxx';
你很高兴。

没有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中：

写一个三重斜杠来输入打字，所以你的智能感知很开心 /// <reference path="path-to-your-custom-.d.ts" />
导入库。
import 'expose?BigDecimal!../../../node_modules/xxx.js;
声明var类型为any（适用于所有情况）并将其分配给您在步骤2中公开的var（在本例中为BigDecimal）
let BigDecimal: any = BigDecimal;

这里描述了一个类似的解决方案：how to install adal.js

不能在Angular2中使用Webpack在Typescript中包含JS库

1 个答案: