Question

我正在尝试添加thrid-party library。我正在为我的应用程序使用 webpack 和 angular 2 + ，并且需要知道如何在此库中获取对象的引用方式。

我的角度2分量，`

///<reference path="../../js/daypilot-all.min.d.ts" />

import { Component, OnInit } from '@angular/core';
import DayPilot = require('../../js/daypilot-all.min.js');


@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
    ngOnInit() {
        var dp = new DayPilot.DayPilot.Scheduler("dp");

        //dp is an empty object.
        debugger;
    }
}`

Answer 1

安装NPM版本：https://npm.daypilot.org/

然后你可以import作为一个模块。

Answer 2

您可以像index.html一样在普通脚本链接中定义它：

<head>
    <script src="path/js/daypilot-all.min.js" type="text/javascript"></script>
</head>

或者如果您使用angular-cli在assets属性数组中定义它。

"assets": [
   'path/js/daypilot-all.min.js'
];

然后在您的打字稿文件中，您可以使用declare关键字。

declare var dayPilot: DayPilot;
export class DashboardComponent implements OnInit {
    ngOnInit() {
        var dp = new dayPilot().Scheduler("dp")
    }
}

我不知道DayPilot包含什么，所以var dp = new dayPilot().Scheduler("dp")只是一个例子。

在webpack中包含第三方JS库

2 个答案: