Hvordan bruker jeg MapLibre-GL fra TypeScript?

Jeg prøver å vise et MapLibre-kart på en enkel nettside ved å bruke TypeScript.

Eksemplet på MapLibre-nettstedet bruker JavaScript, jeg vil gjøre det samme i TypeScript.

Her er min index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/[email /dist/maplibre-gl.css' />
    <script src='https://unpkg.com/[email /dist/maplibre-gl.js'></script>
    <script defer src="script.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html, body, #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>var exports = {};</script>
</body>
</html>

Her er min script.ts:

import MapLibreGL from 'maplibre-gl';

const map = new MapLibreGL.Map({
    container: 'map', // container id
    style: 'https://demotiles.maplibre.org/style.json', // style URL
    center: [0, 0], // starting position [lng, lat]
    zoom: 1 // starting zoom
});

Her er min tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

Jeg får følgende feil i nettleserkonsollvinduet:

'Uopptatt ReferenceError: require er ikke definert ved script.ts:1:1' :

Jeg bruker Visual Studio Pro 2022. Jeg har også prøvd det i VSCode med lignende resultater.

Kan noen identifisere hva jeg gjør feil?

Finnes det et eksempel på nettet som viser hvordan man gjør det? Jeg har ikke klart å finne ett.

Svar #1

Problemet er relatert til de forskjellige modulsystemene som brukes i JavaScript

Min begrensede erfaring med ts betyr at tsconfig.json kan være utilstrekkelig. Hvis du bruker ESM, er det to ekstra uttalelser som trengs.

{
    "compilerOptions": {
        "moduleResolution": "Node",
        "module": "ESNext",

        // to build it successfully
        "target": "es2015",
    }
}

Jeg prøvde å bygge TS-filen med mål ES5, men det fungerte ikke med den nyeste maplibre-gl.js. Jeg endret målet til ES2015.

Feilen som er nevnt skyldes at TSC bygger JS-filen i CommonJS-standarden som standard. Nettleseren kan ikke håndtere det. Bruk ESM i stedet, som støttes av moderne nettlesere.

Det finnes 3 måter å løse dette på. Metode 3 er den beste.

    1. Bruk referansen til maplibre-gl

      Fjern import MapLibreGL from 'maplibre-gl'; i script.ts og endre det til:

      /// <reference types="maplibre-gl" />

      Dette vil kun referere til typen av maplibre-gl fra modulen som er installert i node_modules, i stedet for å importere koden.

      Siden koden allerede er lastet av skript-tagger i HTML, er det ikke nødvendig å importere eller kreve koden til maplibre-gl på nytt.

    1. Konverter CommonJS-standarden til et format som nettleseren kan akseptere. Bruk Browserify:

      1. Installer Browserify med npm:

        npm install -g browserify

      1. Kjør Browserify for å fjerne require-setningen:

        browserify script.js -o script.js

        Browserify vil legge til de nødvendige bibliotekene i filen.

      1. Fjern skriptimport-taggen.

        <script src='https://unpkg.com/[email /dist/maplibre-gl.js'></script>

    1. Bruk en modulbundler, som for eksempel Vite eller Webpack.

      Dette bruker ESM-standarden, så sørg for at skript-tagen som importerer script.js bør endres og at en attributt type bør legges til og settes til "module".

      <script defer src="script.js" type="module"></script>

      Og fjern:

      <script src='https://unpkg.com/[email /dist/maplibre-gl.js'></script>

      Merk: For Vite støttes det å importere en TypeScript.

      <script defer src="script.ts" type="module"></script>

      For mer informasjon, vennligst se på nettsiden til det valgte verktøyet.

Relaterte artikler