如何安装离子2的单张插件

Question

有人能帮忙吗？我正在尝试为离子2导入一个传单插件(https://github.com/Leaflet/Leaflet.markercluster)。

以下是我所做的步骤：

npm install leaflet.markercluster --save

我添加了像这样的传单：

import * as L from 'leaflet'; import * as LL from 'leaflet.markercluster';

像这样使用它：

var markers = LL.markerClusterGroup();

我得到了一个错误TypeError：

WEBPACK_IMPORTED_MODULE_2_leaflet_markercluster.markerClusterGroup不是一个函数

有什么方法可以定制webpack加载插件库吗？谢谢

Answer 1

Leaflet.markercluster插件不以“标准”/ UMD方式导出自己。

当您导入它时，它只执行一个副作用，即将自己附加到L (传单)全局命名空间。它不会将任何内容返回到默认导入或LL变量中。

但是，您应该能够使用它，就像您已经将它包括在“旧学派”中一样(即通过<script>标记)：

var mcg = L.markerClusterGroup();

顺便说一句，传单和Leaflet.markercluster都会产生副作用，所以您只需要以这种方式导入它们：

import 'leaflet'; // Creates a global L namespace.
import 'leaflet.markercluster'; // Attaches L.markerClusterGroup to global L.

Answer 2

如果使用javascript模块，则需要使用类型声明和模块。对于leaflet.markercluster来说，应该是这里。

之后

npm install leaflet.markercluster --save

做：

npm install --save-dev @types/leaflet-markercluster

还要确保您的tsconfig.json有条目"typeRoots": ["types"],

现在可以在您的类中导入它。

import * as LL from 'leaflet-markercluster';