使用打字稿中的javascript lib具有继承的javascript依赖项 使用 ESM 格式时：使用 UMD 格式时： tsconfig.json

问题描述

上下文

我正在用普通的Typescript构建一个项目以与聊天服务器通信。对于这种通信，我使用的是strophe.js lib。

Strophe lib具有三种风格： commonjs ， esm 和 umd 。根据我搜索的内容，我不太了解这些格式之间的区别：

• commonjs 用于节点
• 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 格式时：

我可以看到接口定义，调用其函数等。一切都很好，但浏览器会抛出： 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);