javascript - 使用 typescript 中的javascript库(具有继承的javascript依赖项)

语境
我正在用普通的Typescript构建一个项目以与聊天服务器通信。对于该通信，我正在使用strophe.js lib。
Strophe lib具有三种风格:commonjs，esm和umd。根据我的搜索，我不太了解这些格式之间的区别:

commonjs用于节点

用于Web应用程序的esm

umd是通用

基于此，我可以使用esm或umd，因为此应用程序旨在在浏览器中运行。
我写了一个Typescript文件作为strophe库的包装器。这是我导入它的方式:

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);

我的问题
使用 ESM 格式时:
我可以看到接口(interface)定义，调用其函数等。一切都很好，但是浏览器会抛出:Uncaught TypeError: Failed to resolve module specifier "abab". Relative references must start with either "/", "./", or "../".使用 UMD 格式时:
最初没有显示错误，但是未正确导入Strophe。尝试调用connect函数时，将引发以下错误:Uncaught TypeError: Cannot read property 'Connection' of undefined更新资料

沙箱:https://codesandbox.io/s/bitter-grass-sh4s9
为了测试这一点，我先运行tsc，然后运行live-server来提供文件
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"]
}

最佳答案

通过npm或Yarn这样的包管理器将Strophe.js添加为依赖项是一个好主意。看来您已将它们手动放置在名为dependencies的文件夹中。
添加依赖项:yarn add strophe.js添加类型声明:yarn add -D @types/strophe.js这会将Strophe.js下载到您的node_modules文件夹中。
将其导入您的代码中:

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

关于javascript - 使用 typescript 中的javascript库(具有继承的javascript依赖项)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/63810592/