将多个 3rd 方库导入 Angular2 项目中的同一命名空间答案

【问题标题】：Import multiple 3rd party libraries into same namespace in Angular2 project将多个 3rd 方库导入 Angular2 项目中的同一命名空间
【发布时间】：2016-10-20 14:00:51
【问题描述】：

我正在使用 Angular2 制作项目。该项目使用 Angular-CLI (1.0.0-beta.17) 生成，并使用 Angular v2.0.0 和 TypeScript。

在这个项目中，我想同时导入Leaflet(1.0.1) 和Leaflet.VectorGrid(1.0.2)。

我用 npm 安装它们

npm install leaflet
npm install leaflet.vectorgrid

Leaflet 有一个@types 定义，所以我也安装了它

npm install @types/leaflet

Leaflet.VectorGrid 但是没有@types 定义，所以我添加了

declare module 'leaflet.vectorgrid';

改为我的 typings.d.ts 文件。

但是我怎样才能将这两个模块导入到我的项目文件中的同一个命名空间中呢？

如果我尝试：

import * as L from 'leaflet';
import * as L from 'leaflet.vectorgrid';

由于标识符重复，这在逻辑上会引发编译错误。使用不同的别名导入它们，例如：

import * as L from 'leaflet';
import * as LVG from 'leaflet.vectorgrid';

也不起作用，因为 Leaflet.VectorGrid 扩展了全局 L 对象这样做

LVG.vectorGrid(...)

失败。

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： angular typescript import leaflet

【解决方案1】：

一种解决方案是使用脚本标签将这两个库导入全局范围。然后添加

declare var L: any;

进入任何需要使用L 的.ts 文件都可以。然而这并不理想，因为 L 没有真正输入，并且打字稿编译器不会进行任何验证。

为了能够将这两个库与类型一起使用，必须为 Leaflet.VectorGrid 库编写类型定义，据我所知，该库目前不存在，然后将两个对象合并为一个。

【讨论】：

【解决方案2】：

我认为 require('path/to/library') 会起作用，您可以在打字稿中使用它。

require('node_modules/leaflet/leaflet-xxxxx.js');

您还可以使用 require 方法包含 Leaflet

var L = require('node_modules/leaflet/dist/leaflet-src.js');

【讨论】：