使用 Leaflet 或任何带有 Typescript 和 webpack 的 js 库

Question

注：我找了很多都没有找到答案。

我正在尝试通过扩展 leaflet 创建地图库。但我认为我的问题是一般使用 js 库。我正在使用 webpack 和 ts-loader 来创建输出文件。

我已经安装了类型 @types/geojson 和 @types/leaflet 并将它们移动到 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
}

我在我的 webpack 输出选项中设置了 library:'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

我已将 leaflet.js 添加到页面，因此 typeof(L.latlng) 为 "function"（latlng 带有小写字母）。

问题：很明显我在leaflet中使用的类型在生成js文件后无法访问。我的假设是如果你为任何 js 库创建 ts 声明文件 (.d.ts) 你可以在你的 ts 文件中使用该库.我在这里错过了什么？如何在 Typescript 文件中添加和使用普通的 js 库，以便它们在与 webpack?

捆绑后工作

Answer 1

通常的做法是在 node_modules 文件夹中同时安装 leaflet 及其关联的 @types/leaflet 软件包，并且只安装 import * as L from "leaflet"（或 import L from "leaflet"，取决于你的 webpack 配置）。类型将自动可见。并且 webpack 会自动打包 Leaflet。

所有其他 JS 库都一样。

通过导入只是类型 (import * as L from './modules/@types/leaflet/index';)，你确实告诉 TypeScript L 是什么意思，而不是 webpack。

如果出于某种原因你真的想自己添加 Leaflet 库，而不是让 webpack 将它与应用程序的其余部分捆绑在一起，那么你必须告诉 webpack保持 L 不变，因为您将以某种方式在全局范围内提供它。使用 externals 配置 webpack，例如：

module.exports = {
  //...
  externals : {
    "./modules/@types/leaflet/index": {
      root: 'L' // indicates global variable
    }
  }
};

使用 Leaflet 或任何带有 Typescript 和 webpack 的 js 库

Using Leaflet or any js library with Typescript and webpack

javascript

typescript

webpack

leaflet

bundling-and-minification