Bruk javascript-bibliotek fra typescript (med arvede javascript-avhengigheter)

Kontekst

Jeg bygger et prosjekt i ren Typescript for å kommunisere med en chat-server. Til den kommunikasjonen bruker jeg strophe.js-biblioteket.

Strophe-biblioteket kommer i tre varianter: commonjs, esm og umd. Jeg forstår egentlig ikke forskjellen mellom disse formatene, ifølge det jeg har søkt etter:

  • commonjs er for node
  • esm for nettapper
  • umd er generisk

Basert på dette kunne jeg bruke esm eller umd, ettersom denne appen er ment å kjøre i nettleseren.

Jeg skrev en Typescript-fil for å fungere som en wrapper for strophe-biblioteket. Slik importerer jeg det:

import * as core from './dependencies/strophe.umd.js'; // using UMD
import core from './dependencies/strophe.esm.js'; // using ESM
const Strophe = core.Strophe;

// ...
// Usage example:
this.conn = new Strophe.Connection(options.connection, options.options);

Mitt problem

Når du bruker ESM-format:

Jeg kan se grensesnittdefinisjonen, kalle funksjonene dens osv. Alt er flott, men nettleseren gir: Ufanget TypeError: Klarte ikke å løse modulspesifikatoren "abab". Relative referanser må starte med enten "/", "./" eller "../".

Når du bruker UMD-format:

Ingen feil vises først, men Strophe importeres ikke riktig. Når man prøver å kalle connect-funksjonen, blir denne feilen kastet:

Uncaught TypeError: Cannot read property 'Connection' of undefined

Oppdater

Sandkasse: https://codesandbox.io/s/bitter-grass-sh4s9

For å teste dette kjører jeg tsc og deretter live-server for å servere filene

tsconfig.json

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "baseUrl": "src",
    "outDir": "build",
    "sourceMap": false,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "removeComments": true,
    "lib": ["es2018", "dom"],
    "types": ["jest", "node"],
    "paths": {
      "@core/*": ["./src/core"]
    }
  },
  "include": ["src/**/*.ts"]
}

Svar #1

Det ville være en god idé å legge til Strophe.js som en avhengighet gjennom en pakkehåndterer som npm eller Yarn. Det ser ut som du har plassert dem manuelt i mappen kalt dependencies.

Legger til avhengigheten: yarn add strophe.js
Legger til typedeklarasjonene: yarn add -D @types/strophe.js

Dette ville laste ned Strophe.js til din node_modules-mappe.

Importere det i koden din:

import { Strophe } from "strophe.js";
this.conn = new Strophe.Connection(options.connection, options.options);

Relaterte artikler