[英]Cannot include JS library in Typescript with Webpack in Angular2
I'm not sure what part of this process is failing but I would appreciate any sort of help on this. 我不确定该过程的哪一部分会失败,但是对此我将提供任何帮助。
I have a vendor library (BigDecimal.js) that I'm attempting to import and use in my angular2 application. 我有一个供应商库(BigDecimal.js),我正在尝试将其导入我的angular2应用程序中。 I can get it to transpile just fine by adding a definition file in my typings directory (I also tried it in my source directory) but webpack doesn't add the variable injection into the source file.
通过在我的类型目录中添加定义文件(我也在源代码目录中尝试过),可以使其很好地进行转换,但是webpack不会将变量注入添加到源文件中。 (I guess it's just assuming that it's declared globally).
(我猜这只是假设它是全局声明的)。
If it helps, here is the definition file thus far: 如果有帮助,请参见以下定义文件:
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;
At the top of my ts files, I'm using the following to import the class: 在ts文件的顶部,我使用以下命令导入该类:
import BigDecimal = BigDecimalLibrary.BigDecimal;
I've tried copying the directory to a vendor directory and just doing an npm install big-decimal
. 我试过将目录复制到供应商目录,然后执行
npm install big-decimal
。 Is there something I need to configure in webpack? 我需要在webpack中进行配置吗? I'm just lost as to where to even begin.
我什至不知道从哪里开始。
EDIT 编辑
I've been able to work around this issue by using the following: 通过使用以下方法,我已经能够解决此问题:
import BigDecimalType = bigdecimal.BigDecimal;
const BigDecimal = require('big-decimal').BigDecimal;
And replacing all type references with "BigDecimalType" and leaving the remaining references alone. 并用“ BigDecimalType”替换所有类型的引用,而其余的引用则保留下来。 This is not ideal but will work for now.
这不是理想的方法,但现在可以使用。
When using webpack the most important thing, is to know is, if the 3rd party library implements the UMD pattern. 使用webpack时,最重要的是,第3方库是否实现了UMD模式。 and has typings defined.
并定义了类型。
Simplest case: 最简单的情况:
Here the lib has both UMD implemented + typings package defined.
在这里,lib既实现了UMD,又定义了类型包。 In that case all you need to do is install both packages and write
在这种情况下,您只需安装两个软件包并编写
import xxx from 'xxx';
and you are good to go.
而且你很好。
NO UMD || 没有UMD || Typings
打字
In those cases, you need more work. 在这种情况下,您需要做更多的工作。 The solution I describe here will point you in the right direction and can be used for any third party library.
我在这里描述的解决方案将为您指明正确的方向,并且可以用于任何第三方库。
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.)
With those packages installed, you have to do the following: 安装这些软件包后,您必须执行以下操作:
inside your component.ts: 在您的component.ts中:
/// <reference path="path-to-your-custom-.d.ts" />
import 'expose?BigDecimal!../../../node_modules/xxx.js;
let BigDecimal: any = BigDecimal;
A like wise solution is describe here: how to install adal.js 这里描述了一个明智的解决方案: 如何安装adal.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.