バンドラーを使用しない esm.sh によるバンドル

前回の投稿では、最新の Web プロジェクトで複雑な開発者ツールを回避する方法についていくつかのヒントを共有しました。 esm.sh を使用してブラウザからパッケージを直接インポートする方法を共有しました。

依存関係を蓄積すると、特にそれ自体に依存関係がある依存関係 (推移的依存関係と呼ばれます) を引き受けると、初期ロード時間が長くなることがあります。確かに、ページが読み込まれると、すべてがきちんとキャッシュされます。しかし、ブラウザは (開発者ツールのネットワーク タブでわかるように) さまざまなファイルをロードする必要があり、それらのファイルをロードしたら、さらに別のファイルをロードする必要があります。

もちろん、これがバンドラーが存在する理由のすべてです。したがって、結論としては、ある時点でバンドラーが必要になるということです。まあ、たぶん。ただし、そのバンドラーを自分で実行する必要はありません。 esm.sh には、指定したパッケージを含むバンドルを実際に作成する実験的な機能があります。私の使用方法は次のとおりです。

構築中のエディターに次のパッケージが必要だとします。

import ts from typescript;
import { tsSync, tsFacet, tsLinter, tsAutocomplete } from "@valtown/codemirror-ts";
import { basicSetup, EditorView } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { acceptCompletion, autocompletion } from "@codemirror/autocomplete";
import { Compartment, StateEffect } from "@codemirror/state";
import { oneDark } from "@codemirror/theme-one-dark";
import { indentWithTab } from "@codemirror/commands";
import { keymap, ViewPlugin } from "@codemirror/view";
import {
  createDefaultMapFromCDN,
  createSystem,
  createVirtualTypeScriptEnvironment,
} from "@typescript/vfs";

インポートマップの使用

これで、これらをindex.html の importmap に追加するだけでできる。

    <script type="importmap">
      {
        "imports": {
          "typescript": "https://esm.sh/typescript",
          "@valtown/codemirror-ts": "https://esm.sh/*@valtown/codemirror-ts",
          "style-mod": "https://esm.sh/style-mod",
          "w3c-keyname": "https://esm.sh/w3c-keyname",
          "crelt": "https://esm.sh/crelt",
          "@marijn/find-cluster-break": "https://esm.sh/@marijn/find-cluster-break",
          "@lezer/": "https://esm.sh/*@lezer/",
          "@codemirror/": "https://esm.sh/*@codemirror/",
          "codemirror": "https://esm.sh/*codemirror"
        }
      }
    </script>

* はすべての依存関係を外部としてマークします。これは esm.sh のもう 1 つの機能です。また、codemirror のすべての依存関係を手動で追加する必要がありました。コードミラーパッケージごとに翻訳依存関係のバージョンがわずかに異なり、それらの推移依存関係の異なるバージョンがインポートされて競合が発生するため、これが必要であることがわかりました。

このアプローチは機能しますが、冒頭で説明したように、ブラウザは大量のファイルをダウンロードする必要があり、どのファイルをダウンロードする必要があるか事前に認識していないため、初期ロード時間が長くなります。

esm.sh でバンドルをコンパイルする

このアプローチを使用すると、バンドラーを自分で使用せずに、esm.sh にバンドルを作成させることができます。また、型を機能させる方法についても説明します。

まず最初に、ファイル /deps/editor.deps.js を作成しました:

import build from "https://esm.sh/build";

const ret = await build({
  dependencies: {
    "codemirror": "^6.0.1",
    "@valtown/codemirror-ts": "^2.3.1",
    "@codemirror/lang-javascript": "^6.2.2",
    "@codemirror/autocomplete": "^6.18.4",
    "@codemirror/state": "^6.5.0",
    "@codemirror/theme-one-dark": "^6.1.2",
    "@codemirror/commands": "^6.7.1"
  },
  source: `
  import ts from "typescript";
  import { tsSync, tsFacet, tsLinter, tsAutocomplete } from "@valtown/codemirror-ts";
  import { basicSetup, EditorView } from "codemirror";
  import { javascript } from "@codemirror/lang-javascript";
  import { acceptCompletion, autocompletion } from "@codemirror/autocomplete";
  import { Compartment, StateEffect } from "@codemirror/state";
  import { oneDark } from "@codemirror/theme-one-dark";
  import { indentWithTab } from "@codemirror/commands";
  import { keymap, ViewPlugin } from "@codemirror/view";
  import {
    createDefaultMapFromCDN,
    createSystem,
    createVirtualTypeScriptEnvironment,
  } from "@typescript/vfs";

  export {
    ts,
    tsSync,
    tsFacet,
    tsLinter,
    tsAutocomplete,
    basicSetup,
    EditorView,
    javascript,
    acceptCompletion,
    autocompletion,
    Compartment,
    StateEffect,
    oneDark,
    indentWithTab,
    keymap,
    ViewPlugin,
    createDefaultMapFromCDN,
    createSystem,
    createVirtualTypeScriptEnvironment,
  };`
});

const {
  ts,
  tsSync,
  tsFacet,
  tsLinter,
  tsAutocomplete,
  basicSetup,
  EditorView,
  javascript,
  acceptCompletion,
  autocompletion,
  Compartment,
  StateEffect,
  oneDark,
  indentWithTab,
  keymap,
  ViewPlugin,
  createDefaultMapFromCDN,
  createSystem,
  createVirtualTypeScriptEnvironment,
} = await import(ret.bundleUrl);

console.log({ret});

export {
  ts,
  tsSync,
  tsFacet,
  tsLinter,
  tsAutocomplete,
  basicSetup,
  EditorView,
  javascript,
  acceptCompletion,
  autocompletion,
  Compartment,
  StateEffect,
  oneDark,
  indentWithTab,
  keymap,
  ViewPlugin,
  createDefaultMapFromCDN,
  createSystem,
  createVirtualTypeScriptEnvironment,
};

ここにはかなりの繰り返しがあります。また、インポートを変更したい場合は、複数の場所でインポートを更新する必要があります。これは確かにかなり面倒です。それに価値があるかどうかはあなたに決めてもらいます。

いずれの場合でも、このファイルをインポートすると、ret がコンソールに出力されることがわかります。印刷される内容は次のとおりです:

{
  ret: {
    bundleUrl: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95?bundle",
    id: "e4d1ab3ba39fc16e6de014e6f19bd819605fdd95",
    url: "https://esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95"
  }
}

bundleUrl は、作成されたバンドル esm.sh を含む URL です。動的 import() を使用してインポートし、再エクスポートします。

したがって、/deps/editor.deps.js からすべてをインポートするだけです。

import { ts } from "/deps/editor.deps.js";

これで完了です!

次のようなインポートが必要な場合

import { basicSetup, EditorView } from "codemirror";

機能するには、次のように importmap を更新します。

import ts from typescript;
import { tsSync, tsFacet, tsLinter, tsAutocomplete } from "@valtown/codemirror-ts";
import { basicSetup, EditorView } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { acceptCompletion, autocompletion } from "@codemirror/autocomplete";
import { Compartment, StateEffect } from "@codemirror/state";
import { oneDark } from "@codemirror/theme-one-dark";
import { indentWithTab } from "@codemirror/commands";
import { keymap, ViewPlugin } from "@codemirror/view";
import {
  createDefaultMapFromCDN,
  createSystem,
  createVirtualTypeScriptEnvironment,
} from "@typescript/vfs";

これは、デフォルトのエクスポート (typescript パッケージの場合など) では機能しません。このために、deps/editor.deps.d.ts ファイルを作成して型を機能させることができます:

    <script type="importmap">
      {
        "imports": {
          "typescript": "https://esm.sh/typescript",
          "@valtown/codemirror-ts": "https://esm.sh/*@valtown/codemirror-ts",
          "style-mod": "https://esm.sh/style-mod",
          "w3c-keyname": "https://esm.sh/w3c-keyname",
          "crelt": "https://esm.sh/crelt",
          "@marijn/find-cluster-break": "https://esm.sh/@marijn/find-cluster-break",
          "@lezer/": "https://esm.sh/*@lezer/",
          "@codemirror/": "https://esm.sh/*@codemirror/",
          "codemirror": "https://esm.sh/*codemirror"
        }
      }
    </script>

これで完成です!バンドラーを使用しないバンドル。
に電話することもあります バンドラーレスです。サーバーレスと同様に、サーバー/バンドラーが関与しており、対処する必要がないだけです。

以上がバンドラーを使用しない esm.sh によるバンドルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。