Använd javascript-bibliotek från typescript (med ärvda javascript-beroenden)

Kontext

Jag bygger ett projekt i ren Typescript för att kommunicera med en chattserver. För den kommunikationen använder jag strophe.js-biblioteket.

Strophe-biblioteket finns i tre varianter: commonjs, esm och umd. Jag förstår egentligen inte skillnaden mellan dessa format, enligt vad jag har sökt:

  • commonjs är för node
  • esm för webbappar
  • umd är generisk

Baserat på detta skulle jag kunna använda esm eller umd, eftersom denna app är avsedd att köras i webbläsaren.

Jag skrev en Typescript-fil för att fungera som en wrapper till strophe-biblioteket. Så här importerar jag 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 använder ESM-format:

Jag kan se gränssnittsdefinitionen, anropa dess funktioner osv. Allt är bra men webbläsaren kastar: Uncaught TypeError: Failed to resolve module specifier "abab". Relative references must start with either "/", "./", or "../".

När du använder UMD-format:

Inga fel visas först, men Strophe importeras inte korrekt. När man försöker anropa connect-funktionen kastas detta fel:

Uncaught TypeError: Cannot read property 'Connection' of undefined

Uppdatera

Sandlåda: https://codesandbox.io/s/bitter-grass-sh4s9

För att testa detta kör jag tsc och sedan live-server för att serva filerna

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 skulle vara en bra idé att lägga till Strophe.js som ett beroende genom en paketchef som npm eller Yarn. Det ser ut som att du manuellt har placerat dem i mappen som kallas dependencies.

Lägga till beroendet: yarn add strophe.js
Lägga till typerna: yarn add -D @types/strophe.js

Detta skulle ladda ner Strophe.js till din node_modules-mapp.

Importera det i din kod:

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

Relaterade artiklar