使用 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中的導入映射中。

    <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 的另一個功能。我還必須手動新增 codemirror 的所有依賴項。我發現這是必需的，因為不同的 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";

為了工作，我們可以如下更新導入映射：

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中文網其他相關文章！