何时在 TypeScript 中使用脚本标签包含 JS 库？

Question

我在使用 import 语句使 TypeScript 正常工作时遇到了很多问题。

例如，我目前正在使用 Leaflet 构建 Angular2 应用程序。我已经设法正确加载了一些库，例如 Lodash 和 Leaflet，但是现在我正在努力获取 Leaflet 插件，Leaflet.MarkerCluster 才能正常工作。

我导入的方式如下：

import L from 'markercluster';

我的 SystemJS 定义中有以下内容：

markercluster: 'node_modules/leaflet.markercluster/dist/leaflet.markercluster'

这会导致加载和附加 MarkerCluster 文件，例如，当我在控制台中测试它时，我可以从 L.MarkerClusterGroup 访问它。

但是，当我在 TypeScript 模块中运行它时，出现错误。我做了一些挖掘，这似乎是由于生成的 JavaScript 是运行ning 的方式。生成的 JavaScript 实际上并不是试图访问 L（传单全局对象），而是访问：

var m = new markercluster_1.default.MarkerClusterGroup();

检查 markercluster_1.default，我发现它是一个空对象。不确定如何解决这个问题，但我在想在这种情况下是否值得使用 import 语句？简单地包含在页面顶部的 a 中并在我尝试访问模块的 TypeScript 文件中使用 ///<reference path='....'> 是否更有意义？

Answer 1

Not sure how to work around this, but I'm thinking if it's even worth using import statements in this situation

我的意见

远离 systemjs。只需使用网络包。
使用require

样本：

import * as leaflet from "leaflet"; 
// Augment leaflet
require('./leaflet.markercluster/dist/leaflet.markercluster');

// use new feature
(leaflet as any).MarkerClusterGroup;

聚会

Answer 2

我使用 Visual Studio Code to code angular 5 应用程序，我解决了同样的问题如下：

import L from 'leaflet';
import 'leaflet.markercluster';

...

ngOnInit() {
    this.map = L.map(this.mapId, options);
    this.activePOICommonLayer = L.markerClusterGroup().addTo(this.map);

    //create marker here;

    this.activePOICommonLayer.addLayer(marker);
}

何时在 TypeScript 中使用脚本标签包含 JS 库？

When to include JS libraries using script tags in TypeScript?

javascript

module

typescript

systemjs

我的意见