Javascript 使用带有Typescript和webpack的传单或任何js库

注意：我搜索了很多，但找不到答案

我正试图通过扩展

传单

来创建地图库。但我认为我的问题在于一般使用

js

库。我正在使用

webpack

和

ts-loader

创建输出文件

我已经安装了types

@types/geojson

和

@types/spool

并将它们移动到modules文件夹中

下面是我的简单Test1.ts文件：

import * as L from './modules/@types/leaflet/index';
import { MyDataItem } from './MyDataItem ';

export class Test1 {
    text: string;
    data: MyDataItem ;
    latLng: L.LatLng;
   
    constructor(theName: string) {
        this.data = { name: theName} as MyDataItem ;
    }
    public show() {
        console.log(this.data.name);
    }

    public showLatLng() {
        this.latLng = new L.LatLng(22, 55);
        console.log(this.latLng);
    }
}

module.exports = {
    Test1: Test1
}

我在我的网页输出选项中设置了

lib:'lib'

。 现在，我从浏览器控制台调用以下方法：

> (new lib.Test1("aa")).show()        // result: aa
> (new lib.Test1("aa")).showLatLng()   // error : L.LatLng is not a constructor
// or if it set webpack optimization:minimize to true  the error is: i.LatLng is not a constructor

我已经在页面中添加了

传单.js

，因此

typeof（L.latlng）

是

“函数”

（

latlng

，用小写字母）

---

问题：显然，我在传单中使用的类型在生成js文件后无法访问。我的假设是，如果您为任何js库创建ts声明文件（.d.ts），您可以在ts文件中使用该库。我错过了什么？如何在

Typescript

文件中添加和使用普通的js库，以便它们在与

webpack

捆绑后工作？

通常的做法是在

节点模块

文件夹中安装

传单

及其相关的

@types/传单

包，并从“传单”文件夹中以L的形式导入*（或仅从“传单”导入L，具体取决于您的网页配置）。这些类型将自动可见。并且webpack将自动捆绑传单

所有其他JS库也是如此

通过只导入类型（

import*as L from./modules/@types/传单/index'；

），您可以告诉TypeScript

L

的含义，但不能告诉webpack

如果出于某种原因，您确实希望自己添加传单库，而不是让webpack将其与应用程序的其余部分捆绑在一起，那么您必须告诉webpack保持原样，因为您将以某种方式在全局范围内提供它。使用配置网页包，例如：

module.exports={
//...
外部：{
“/模块/@类型/传单/索引”：{
root:'L'//表示全局变量
}
}
};