4

xterm.jsのソース コードにいくつかの変更を加えて、PR を作成する前にテストしたいと考えています。機能する「ディストリビューション」を生成できませんでした。

(私の用語が間違っている場合はお詫びします -- 私は Web 開発にかなり慣れていません)

設定

次のような簡単なテスト Web サイトをセットアップしましたindex.html

<!doctype html>
  <html>
    <head>
      <script src="%PUBLIC_URL%/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        console.log(Terminal);
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>
  </html>

この場所に、次のいずれかから%PUBLIC_URL%JS ソース ファイルを配置します。xterm.js

  • node_modules/xterm/dist/xterm.js- npm で追加
  • xterm.js/lib/xterm.js- GitHub リポジトリからビルド

のローカル コピーを作成するxterm.jsには、次の手順を実行しました。

git clone https://github.com/xtermjs/xterm.js.git xterm-local
cd xterm-local
npm install
npm run package

（注：自宅でフォローしている場合、WindowsまたはMacでxterm.jsをビルドできませんでした-Ubuntu 18.04を使用してこれらの手順を実行しただけです）

コマンドはすべて正常に実行され、最後のコマンドxterm-local/libはxterm.js. そのファイルを使用して、NPM インストールから取得できるコピーを置き換えます。

結果

普通

NPMdist/xterm.jsを使用すると、ターミナル要素が正常にレンダリングされ、ログが読み取られます

ƒ Terminal(options) {
        this._core = new Terminal_1.Terminal(options);
        this._addonManager = new AddonManager_1.AddonManager();
    }

ローカル ビルドの使用

xterm-local/lib/xterm.jsレンダリングされた端末要素がないからローカルにビルドされた出力を使用すると、エラーが発生Uncaught TypeError: Terminal is not a constructorし、ログに次のように表示されます

{Terminal: ƒ, __esModule: true}
  Terminal: ƒ e(e)
  __esModule: true
  __proto__: Object

期待

xterm.js のローカル コピーをビルドした後は、NPM ディストリビューションと同じように使用できると思います。ただし、コマンドがフォルダーではなくフォルダーnpm run packageを生成する理由に興味があります。の独自の使用可能なコピーを作成するために欠けている追加の手順はありますか?distlibxterm.js

4

2 に答える 2