3

環境

チャット サーバーと通信するためにプレーンな Typescript でプロジェクトを構築しています。そのコミュニケーションのために、私はstrophe.js libを使用しています。

Strophe lib には、commonjs、esm、およびumdの 3 つのフレーバーがあります。検索した内容によると、これらの形式の違いがよくわかりません。

  • commonjsはノード用です
  • Web アプリ用のesm
  • umdはジェネリックです

このアプリはブラウザーで実行することを目的としているため、これに基づいてesmまたはumdを使用できます。

strophe ライブラリのラッパーとして機能する Typescript ファイルを作成しました。これは私がそれをインポートする方法です：

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"]
}
4

1 に答える 1

4

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);
于 2020-09-16T12:04:11.533 に答える