使用Leaflet、TypeScript与Webpack集成JS库的问题排查

我来帮你拆解这个问题——你现在遇到的核心问题是把TypeScript的类型声明文件和实际的JavaScript运行时代码搞混了，再加上webpack打包时没有正确处理你页面中全局引入的Leaflet库。

1. 错误导入类型声明文件：你直接import了./modules/@types/leaflet/index，但@types/leaflet只是TypeScript用来做类型检查的声明文件，本身不包含任何可执行的JS代码。所以打包后，运行时根本找不到L.LatLng的实际构造函数。
2. 全局库的webpack处理缺失：你已经在页面里引入了Leaflet的全局L对象，但webpack不知道这个全局变量的存在，导致打包后的代码尝试去寻找内部的L实现，而非复用页面上已有的全局L。

另外你提到页面中typeof(L.latlng)是function，应该是笔误——Leaflet里的构造函数是L.LatLng（首字母大写），小写的latlng一般是实例的属性或者方法返回值。

根据你页面已经全局引入Leaflet的场景，分两步修改：

1. 修正TypeScript的类型引用方式 #

删掉你Test1.ts里的错误导入：

// 删掉这行！
import * as L from './modules/@types/leaflet/index';

替代方案二选一：

• 方案A：通过tsconfig.json全局引入类型
  在你的tsconfig.json里添加types配置，让TypeScript自动识别Leaflet的全局类型：

  {
    "compilerOptions": {
      // 其他配置...
      "types": ["leaflet"]
    }
  }
  

• 方案B：在文件顶部添加类型引用
  在Test1.ts的最顶部添加一行类型引用注释：

  /// <reference types="leaflet" />
  

这样TypeScript就能识别全局的L对象，同时保留完整的类型提示。

2. 配置webpack的externals避免重复打包 #

在webpack配置文件里添加externals选项，告诉webpack：Leaflet已经作为全局变量L存在于页面中，不需要把它打包到你的输出文件里：

module.exports = {
  // 其他配置...
  externals: {
    leaflet: 'L'
  }
}

如果你之后想在代码里用import语法（比如import * as L from 'leaflet'），webpack会自动把这个导入映射到全局的L变量，既保留类型提示，又不会重复打包。

验证修改后的代码 #

修改后的Test1.ts应该是这样的：

/// <reference types="leaflet" /> // 如果你选方案B的话
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 }

现在重新打包，在浏览器控制台调用(new lib.Test1("aa")).showLatLng()应该就能正常输出LatLng对象了。

如果你之后不想依赖页面全局引入的Leaflet，想把它一起打包到你的库中：

1. 先安装实际的Leaflet库：

   npm install leaflet
   

2. 在Test1.ts里正常导入：

   import * as L from 'leaflet';
   

3. 删掉webpack的externals配置，同时移除页面中单独引入的leaflet.js，避免重复加载。

这样webpack会把Leaflet的代码打包到你的输出文件里，运行时也能正常找到L.LatLng构造函数。

内容的提问来源于stack exchange，提问作者nAviD