使用来自打字稿的 javascript 库(具有继承的 javascript 依赖项)
Use javascript lib from typescript (with inherited javascript dependencies)
上下文
我正在用纯 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 导入不正确。尝试调用连接函数时抛出此错误:
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);
上下文
我正在用纯 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 导入不正确。尝试调用连接函数时抛出此错误:
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);