Bündelung ohne Bundler mit esm.sh-js-Tutorial-php.cn

Bundling without a bundler with esm.sh

In meinem vorherigen Beitrag habe ich einige Tipps gegeben, wie Sie komplizierte Entwicklertools in modernen Webprojekten vermeiden können. Ich habe mitgeteilt, wie Sie mit esm.sh Pakete direkt aus dem Browser importieren können.

Wenn Sie Abhängigkeiten ansammeln und insbesondere wenn Sie Abhängigkeiten übernehmen, die selbst Abhängigkeiten haben (die als transitive Abhängigkeiten bezeichnet werden), kann es sein, dass Ihre anfängliche Ladezeit darunter leidet. Klar, sobald die Seite geladen ist, wird alles ordentlich zwischengespeichert. Aber Ihr Browser muss viele verschiedene Dateien laden (wie Ihnen die Registerkarte „Netzwerk“ in den Entwicklertools zeigt) und sobald er diese Dateien geladen hat, muss er noch eine weitere Reihe von Dateien laden.

Das ist natürlich der ganze Grund, warum es Bundler gibt! Die Schlussfolgerung ist also, dass man irgendwann einen Bundler braucht. Nun ja, vielleicht. Sie müssen diesen Bundler jedoch nicht selbst ausführen. esm.sh verfügt über eine experimentelle Funktion, die tatsächlich ein Bundle mit den von Ihnen angegebenen Paketen für Sie erstellt. So verwende ich es.

Angenommen, wir benötigen die folgenden Pakete für einen Editor, den wir erstellen.

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";

Nach dem Login kopieren

Verwenden einer Importmap

Jetzt könnten Sie diese einfach zu Ihrer Importmap in index.html hinzufügen.

    <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>

Nach dem Login kopieren

Das * markiert alle Abhängigkeiten als extern, was eine weitere Funktion von esm.sh ist. Außerdem musste ich alle Abhängigkeiten von Codemirror manuell hinzufügen. Ich habe herausgefunden, dass dies erforderlich ist, da verschiedene Codemirror-Pakete leicht unterschiedliche Versionen von Übersetzungsabhängigkeiten haben und unterschiedliche Versionen dieser transitiven Abhängigkeiten importiert werden, was zu Konflikten führt.

Dieser Ansatz funktioniert, aber wie in der Einleitung beschrieben, leidet die anfängliche Ladezeit darunter, da der Browser viele Dateien herunterladen muss und nicht im Voraus weiß, welche Dateien er herunterladen soll.

Lassen Sie esm.sh ein Bundle kompilieren

Mit diesem Ansatz können Sie esm.sh ein Bundle erstellen lassen, ohne selbst einen Bundler zu verwenden. Außerdem erkläre ich Ihnen, wie Sie Typen zum Laufen bringen.

Zuerst habe ich eine Datei /deps/editor.deps.js erstellt:

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,
};

Nach dem Login kopieren

Hier gibt es ziemlich viele Wiederholungen. Und Sie müssen die Importe an mehreren Stellen aktualisieren, wenn Sie sie ändern möchten. Das ist zugegebenermaßen ein ziemlicher Aufwand. Ich lasse Sie entscheiden, ob es sich lohnt.

Auf jeden Fall werden Sie sehen, dass beim Importieren dieser Datei ret auf der Konsole gedruckt wird. Folgendes wird gedruckt:

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

Nach dem Login kopieren

Die bundleUrl ist die URL, die das für uns erstellte Bundle esm.sh enthält! Wir importieren es mit einem dynamischen import() und exportieren es dann erneut.

So können Sie einfach alles aus /deps/editor.deps.js importieren.

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

Nach dem Login kopieren

Und du bist fertig!

Wenn Sie Importe wie
wünschen

import { basicSetup, EditorView } from "codemirror";

Nach dem Login kopieren

Um zu funktionieren, können wir unsere Importmap wie folgt aktualisieren:

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";

Nach dem Login kopieren

Dies funktioniert nicht für Standardexporte (wie mit dem Typescript-Paket). Dazu können wir eine deps/editor.deps.d.ts-Datei erstellen, damit die Typen funktionieren:

    <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>

Nach dem Login kopieren

Und da haben Sie es! Bündelung ohne Bündler. Wir können
anrufen Es ist ohne Bundler, da es genau wie bei Serverless immer noch einen Server/Bundler gibt, nur keinen, mit dem Sie sich befassen müssen.

Das obige ist der detaillierte Inhalt vonBündelung ohne Bundler mit esm.sh. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!