javascript - Folosind Leaflet sau orice bibliotecă js cu Typescript și webpack

Notă: Am căutat mult, dar nu am reușit să găsesc răspunsul meu.

Încerc să creez o bibliotecă de hartă extinzând leaflet. Dar cred că problema mea este legată de utilizarea bibliotecilor js în general. Folosesc webpack și ts-loader pentru a crea fișierul de ieșire.

Am instalat tipurile @types/geojson și @types/leaflet și le-am mutat în folderul modules.

iată fișierul meu simplu 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
}

Am setat library:'lib' în opțiunea mea de output din webpack. Acum apelez următoarele metode din consola browserului:

> (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

Am adăugat leaflet.js pe pagină, astfel încât typeof(L.latlng) este "function" (latlng cu litere mici).

Întrebare: evident tipurile pe care le-am folosit din leaflet nu sunt accesibile după generarea fișierelor js. Presupunerea mea era că dacă creezi un fișier de declarație ts (.d.ts) pentru orice bibliotecă js, poți folosi acea bibliotecă în fișierele tale ts. Ce îmi scapă aici? Cum să adaug și să folosesc biblioteci js normale într-un fișier Typescript astfel încât să funcționeze după bundlarea lor cu webpack?

Răspuns #1

Practica obișnuită este să instalați atât pachetele leaflet, cât și @types/leaflet în folderul vostru node_modules, și să faceți pur și simplu import * as L from "leaflet" (sau doar import L from "leaflet", în funcție de configurația voastră webpack). Tipurile vor fi vizibile automat. Iar webpack va include automat Leaflet în bundle.

La fel pentru toate celelalte biblioteci JS.

Prin importarea doar a tipurilor (import * as L from './modules/@types/leaflet/index';), îi spui TypeScript-ului ce înseamnă L, dar nu și webpack-ului.

Dacă dintr-un motiv oarecare vrei cu adevărat să adaugi biblioteca Leaflet pe cont propriu, în loc să lași webpack să o includă împreună cu restul aplicației tale, atunci trebuie să-i spui lui webpack să lase L așa cum este, pentru că îl vei furniza cumva la nivel global. Configurează webpack cu externals, de exemplu:

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